Welcome to My Final Project
In this homework we will be changing this code to be a valid code in HTML5.
We will probably need to change a lot of details around the code and the basic idea of this Homework is to learn how to use the validator from W3C.
The image you see here will be used a lot in many exercises we will be doing in class! This is an old boat, probably an old ship. One of those types used to transport heavy cargo in the old times?!?! Of course this picture is not real, but you can imagine a big boat made basically of wood and using the main power of the wind! Remember that this picture needs to be uploaded to the Hills Server (your account) together with this file you are modifying, otherwise, the picture will not be shown!
You will be able to change a little bit the content of the two paragraphs below to insert the links requested to make sense when reading the content.
Our Page's Responsive Web Design Implementation
In this project, I focused on improving the user experience by implementing a **responsive navigation menu** entirely from scratch without relying on frameworks like Bootstrap or Tailwind CSS. Although these tools make Responsive Web Design (RWD) easier, I chose to challenge myself by creating a custom solution.
On mobile devices, I developed a **hamburger menu** that enhances usability. The hamburger menu appears only on smaller screens (below 768px) thanks to the @media query. Additionally, the menu stays **fixed at the top** using the position: fixed property combined with a high **z-index: 1000** value to ensure it remains on top of all content, even when the user scrolls down the page. This creates a seamless and **user-friendly experience** for mobile navigation.
Dropdown menus were handled carefully to ensure they open and close properly with smooth transitions. I implemented JavaScript logic to toggle the dropdown menus individually while ensuring other open menus automatically close for a cleaner look. This logic uses classList.toggle("active") to control visibility.
Overall, the combination of **custom CSS** and **vanilla JavaScript** allowed me to deliver a fully functional responsive navigation menu while adhering to modern web design practices.
If you're interested in exploring a project where I utilized **Bootstrap** to create a responsive and visually appealing webpage, you can check out **TOYTOPIA** by clicking the link below. This project highlights my ability to efficiently implement modern frameworks for clean, user-friendly designs. Visit TOYTOPIA.
Favicon Genaration Explanation
Initially, my <section> tag was missing a proper heading, and the W3C validator suggested adding an h tag for better structure. I followed this advice to make the code valid and semantic.
Additionally, I implemented a **favicon** for this project as a best practice to enhance user experience. I generated it using the tool at
Favicon Generator, which I found to be incredibly useful.
In CNIT 132, we explored essential web development techniques and tools that are critical for building professional websites:
- Optimized webpage performance using SEO best practices for search engines.
- Implemented favicons to enhance website branding, using tools like Favicon Generator
- Validated HTML and CSS code using the W3C Validator to ensure proper structure and standards compliance.
- Effectively organized and deployed projects on the Hills server and explored GitHub Pages for project hosting.
- Incorporated responsive design with CSS Flexbox and Grid layouts to create adaptable web pages.
- Streamlined image implementation with proper file paths and responsive loading techniques.
- Enhanced user experience through modern features like Hamburger Menus for mobile navigation.
- Structured and maintained clean file directories for efficient server-side organization.
- Deployed projects effectively, ensuring accessibility and scalability across devices.
To ensure our project is properly accessible, we need to upload all files, including the image of the old boat, to the Hills server within the public_html folder. Additionally, validating our code using the W3C Validator is essential to guarantee compliance with HTML and CSS standards.