Product preview card component

Hey, well done on completing the project!

The easiest way to make the img responsive would be to use the <picture> HTML element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

<picture>
  <source media="(min-width:750px)" srcset="images/image-product-mobile.jpg">

  <img src="images/image-product-desktop.jpg" alt="">
</picture>

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

You can find more information: here - w3schools and here - MDN

Let me know how you get on!

I would say use minmax() property, but I would advise you to understand media queries as they are still, in my opinion, the best way to do it. I noticed that you styled each h tags, try to avoid in doing so, instead take a look at the design first and check the similarities each element has, e.g your h5 and p has the same font that could've been shorten into one code. Use em, rem, % instead of px for responsiveness. Regarding h tags, use them in order so use h1 first then use h2, I'd avoid having an h1 then using h4. You're on the right track, I'd suggest take a look at the design first, note down what you can tackle in one code, search up on google of what you don't know. Keep up the good work and happy coding! Lmk, if you have any more question.