Overview
The “Welcome to the Philippines” interactive travel guide is a single-page web app that offers an engaging way to explore the Philippines. Built with HTML, CSS, and JavaScript, users can interact with clickable stars to learn about key tourist destinations and click on areas of a map to view more details. The app also features a Flourish chart to visualize popular tourist spots. Combining interactive elements with informative content, this project helps users discover the beauty and culture of the Philippines.
Tools
HTML, CSS, and Javascript
Target Audience
The target audience for the “Welcome to the Philippines” travel guide includes travelers and tourists interested in exploring the Philippines. It appeals to users who enjoy interactive, visually engaging experiences to learn about popular destinations in the country.
Design & Features
Main Interactive Graphic: Each star represents an aspect of the Philippines, offering interactive content. Users can click on the stars to view introductory information about the country.
Philippine Map: Clicking on specific regions of the map brings up relevant information, providing users with detailed insights into various areas.
Flourish Chart (Popular Destinations): The first Flourish chart highlights the most popular tourist destinations in the Philippines, providing a visual representation of travel trends.
Slideshow of Destinations: The second Flourish chart features a slideshow of destinations, displaying details about each location and offering users a dynamic exploration experience.
Travel Tips: A section dedicated to travel tips, with embedded YouTube videos offering practical advice, such as the best times to visit and essential packing tips.
Conclusion: The experience concludes with a summary of key highlights, final travel recommendations, and an encouragement to explore the Philippines.
Development Process
Main Logo: The logo, created using Procreate, reflects the theme of the Philippines and serves as a branding element for the project, helping users connect visually with the content.
HTML & CSS: The site structure is simple and user-friendly, styled using traditional CSS techniques to create a clean, responsive layout suitable for web browsers.
JavaScript: JavaScript powers the dynamic features, such as the interactive star navigation and the clickable map regions. The logic behind the fading and showing of the stars ensures smooth transitions for a more engaging user experience.
Final Website
Website Link: https://khristineb.github.io/welcome-to-the-philippines.io/
Next Steps
For the next steps, I plan to possibly add more information about the destinations and travel tips to make the site more comprehensive. I’ll also explore incorporating more interactive elements to enhance user engagement, such as additional multimedia features or interactive maps. Additionally, I’ll focus on optimizing the site for mobile use and refining the overall design based on user feedback. Finally, I’ll work on finalizing the user interface and testing for performance to ensure a smooth experience across devices.