Responsive meet landing page using html and css

What are you most proud of, and what would you do differently next time?

In this project, I improved on how to implement responsive design principles effectively. I worked with different screen sizes using CSS media queries, ensuring the layout adapts seamlessly across mobile, tablet, and desktop devices. This also helped me improve my CSS skills in handling flexbox and grid layout systems, especially when creating components like the portrait section and buttons.

I also gained more practice with semantic HTML. For example, I used elements like <main>, <section>, <footer>, and <h1> to improve the structure and accessibility of the webpage. This helped ensure better readability for both humans and screen readers, making the content more accessible.

Additionally, I worked with custom fonts and enhanced typography to make the page more visually appealing while maintaining readability. The use of reusable CSS classes for typography and layout allowed me to keep the styles consistent across the page, while also making the code more maintainable.

What challenges did you encounter, and how did you overcome them?

One challenge I faced was ensuring the design was responsive across all screen sizes. Particularly, the layout of the hero section and the grid of portraits on different screen widths required lots of adjustments. I had to test my media queries multiple times and adjust the grid template to ensure it displayed well on tablets and desktops.

Another struggle was optimizing the use of semantic HTML in a way that kept the page structure both functional and visually organized. I had to pay attention to not only the visual hierarchy but also how I could use tags effectively for accessibility without sacrificing the design.

To overcome these, I referred to the project brief frequently and cross-checked my layout in different browser tools, like Chrome's developer tools, to make sure everything looked good on various devices.