CSS custom properties, Google icons and Typograhy

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

I am most proud of how the design turned out to be responsive and visually clean. I especially liked the way I managed to style the images and ensure they adjusted seamlessly to different screen sizes. Additionally, I enjoyed working with custom fonts and ensuring that the layout remained consistent across various devices.

Next time, I would focus more on organizing my CSS better. I noticed that some styles could be refactored to make the code more efficient and reusable. For example, I could use more variables and group similar CSS rules to reduce redundancy.

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

One challenge I faced was aligning the content for both mobile and desktop views, as the layout broke in certain scenarios. It was particularly tricky when trying to balance spacing and typography size across different screens. I overcame this by diving deeper into media queries and testing the layout frequently in different viewport sizes. Another challenge was keeping the page structure semantic and accessible, which required some trial and error to ensure everything was properly marked up with semantic HTML.

What specific areas of your project would you like help with?

I would love feedback on how to optimize my CSS structure for larger projects. Specifically:

How can I make better use of CSS variables to manage color schemes and font sizes more efficiently?

Is there a better way to structure my media queries for a smoother mobile-to-desktop transition?

Additionally, any advice on improving the performance of images (e.g., loading them in an optimized format or handling them better for different screen resolutions) would be greatly appreciated!