Product Preview Card Solution using HTML and CSS

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

I am proud to have completed the card component with an outcome that closely aligns with design specifications. The component is fully responsive across a wide range of screen sizes, achieved through the use of media queries and relative units for various HTML elements. Additionally I implemented hover and focus states to enhance interactivity and accessibility.

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

One of the challenges I encountered was serving the appropriate image for both desktop and mobile view-ports. I resolved this by using the HTML <picture> element in combination with media queries, which allowed me to specify and deliver the correct image based on the user's screen size.

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

This project was not that complex, but would like some help that can guide me on improving on the use of media queries.