Overview

This document outlines the challenges, lessons learned, and key takeaways from building a responsive landing page. The goal was to create a functional landing page while improving my understanding of HTML, CSS, and JavaScript. AI tools like ChatGPT, Deepseek, and Claude were used to guide the process and troubleshoot issues.

Challenges

1. Hamburger Menu Implementation

• Issue: Initially, I struggled to build the hamburger menu from scratch without relying on pre-built code. I used Youtube Videos and AI to guide me through the process, but I mistakenly placed CSS styles for the nav links outside the media query braces, distorting smaller screens.
• Solution: After identifying the error, I moved the styles into the appropriate media query, ensuring proper responsiveness.

2. Mobile View Styling

• Issue: I forgot to style the mobile view of the banner section, which disrupted the UI. The banner layout used display: flex and space-between, causing alignment issues on mobile.
• Solution: AI helped me identify the problem and recommended a better approach for vertical alignment on mobile devices.

3. Transition and Responsiveness

• Issue: The banner transition looked distorted due to inconsistent widths and CSS styling. ChatGPT recommended using overflow: hidden and fixed widths to prevent layout shifts.
• I implemented these changes and added min-width and max-width properties for the images, but there are still issues that need troubleshooting.

4. Mobile Responsiveness

• Issue: I overlooked mobile responsiveness for some sections, resulting in a bad mobile experience.
• Next Steps: I plan to revisit the mobile styling to ensure a better experience across devices.

Lessons Learned

1. Hamburger Menu Knowledge

• I now understand the steps and thought process required to create a responsive hamburger menu. While I may not remember all the syntax, the conceptual knowledge is valuable.