Overview
For Project 2, I built a website that explores some of the most remote places on Earth, such as Alert, Canada; Changtang; Easter Island; and Svalbard. The goal was to create an interactive, user-friendly website using only HTML and CSS, focusing on a modern design and a responsive layout.
Tools
HTML and CSS
Target Audience
The target audience for this website includes travelers, adventure seekers, and anyone curious about remote and unique places around the world.
Design & Usability
Modern & Simple Design: I chose a clean, minimalistic design to keep the focus on the content. The website uses modern typography and a subtle color scheme that doesn’t distract from the visuals. The overall look is sleek and straightforward, aligning with the theme of remote locations.
Responsive Layout: The website is designed with a mobile-first approach, ensuring it works well on both small and large screens. I used Flexbox to create a flexible grid that adapts to different screen sizes, providing a smooth browsing experience on desktop and mobile devices.
Interactive Slideshow: To showcase the remote places, I included a CSS-powered slideshow that transitions through images of Alert, Canada, Changtang, Easter Island, and Svalbard. The images change automatically, providing an engaging visual experience. I utilized resources from W3Schools to implement the slideshow effect, giving it a modern and smooth transition.
Navigation: The website features a hamburger menu for easy navigation. This collapsible menu makes the site more user-friendly on mobile devices and simplifies access to different sections of the website. The design and function were carefully crafted to ensure ease of use without unnecessary complexity.
Development Process
HTML Structure: The website’s structure is built with semantic HTML elements to ensure clarity and accessibility. I used <header>, <main>, and <footer> tags for easy navigation, with clear content sections.
CSS Styling: The styling is separated into an external CSS file. I applied Flexbox for layout flexibility and used media queries to adjust the layout for different screen sizes. Custom CSS was used for the slideshow, buttons, and navigation to create smooth transitions and a polished design.
Responsive Features: By designing mobile-first and using media queries for desktop, I ensured that the website is fully responsive. The layout adapts seamlessly across devices, whether you’re viewing it on a smartphone or a computer screen.
Final Website
Website Link: https://opal.ils.unc.edu/~kbb/project2/index.html
Next Steps
Next, I plan to expand the content by adding more detailed information, along with multimedia elements like videos or audio for a richer experience. I’ll also refine the mobile-first approach and adjust media queries to ensure the site is fully responsive and displays consistently across all device sizes. Lastly, I’ll review the site’s performance to optimize loading times and test it across various browsers for compatibility.