Product-preview-card-component Public responsive using flex-Media

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

I'm proud that I was able to complete the layout and styling with proper structure and make it responsive using best practices. I also explored and successfully used the <picture> tag for the first time to switch images based on screen size, which gave me more control. Next time, I would better plan my layout structure and naming conventions to make my code more maintainable.

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

The biggest challenge I faced was changing the product image for mobile screens. I initially tried solving it using media queries and background-image, which worked partially but wasn't ideal. After researching, I learned about the <picture> tag, and it turned out to be the perfect solution for responsive images. It was a great learning moment!

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

I’d appreciate feedback on:

How I structured my layout using Flexbox — could it be done better or more efficiently? Best practices for using the <picture> tag — did I implement it correctly? Any improvements I could make for accessibility or semantic HTML.