Welcome to My CNIT 132A - Advanced HTML & CSS Home Page
On my CNIT 132A page, accessing the content is straightforward. You can use the menu on the left to navigate to the CNIT 132A Assignments section and explore the details of the projects I completed throughout the course. Additionally, you can reach my
Contact information through the same menu, making it easy to get in touch with me. My page is fully compliant with Responsive Web Design (RWD) principles. On mobile devices, the menu transforms into a hamburger format and remains visible
at all times, even as users scroll down the page.
In this project, we emphasized creating a seamless and user-friendly navigation experience. The design ensures that users on both mobile and desktop devices can
interact effortlessly with the menu and access any section of the page. Furthermore, the responsive nature of the design guarantees optimal functionality across various screen sizes.
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.
Our Page's Responsive Web Design Implementation
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.