Product Card Design Challenge

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

I'm most proud of how closely I was able to match the original design using only HTML and CSS. It really helped me improve my layout skills, especially with Flexbox . I also kept my code organized and readable, which made the project feel more manageable as it grew.

Next time, I’d focus more on responsive design from the start, maybe using mobile-first styling. I also want to improve my use of semantic HTML and maybe start using a CSS preprocessor like SCSS to keep things even more organized.

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

One challenge I faced was matching the design without using Figma, since I had to rely mostly on the preview images and my own judgment for spacing, font sizes, and alignment. I took my time comparing the layout visually and adjusting things until they looked as close as possible.

Another challenge was structuring the layout properly with just HTML and CSS. I had to experiment a bit with Flexbox to get elements in the right position, especially when centering content or handling spacing between sections.

While I didn’t make the project mobile responsive this time, I now realize how important that is and I’d like to focus on learning responsive design in my next project.

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

I’d really appreciate help with making the layout responsive across different screen sizes — especially understanding how to use media queries effectively.

I’d also like feedback on my CSS structure and class naming to make sure I'm writing clean and maintainable code. Any tips on improving alignment and spacing without relying on guesswork would be great too!