Product preview card component using Flexbox (Responsive)

Congratulations on completing the challenge! You're right that you only learn by doing it yourself! Keep up the good work!

Congrats man! Feel tips, you can the picture element and change the image based on the media query.

  <picture>
        <source srcset="/images/image-product-desktop.jpg" media="(min-width: 600px)" />
        <img src="/images/image-product-mobile.jpg" alt="perfume ilustrasion">
   </picture>

In the example above the mobile image will be used until the screen get bigger than 600px and then the image is replaced with the image in the source element.

The last tip is to use the before or after pseudo classes to place a svg image on a element.

<button class="add-to-cart">Add to Cart</button>

And then in the css file

button::before {
    content: url(/images/icon-cart.svg);
}

Before means that it will place a content (SVG image in this case) before the first child of the element (my text in this case) The result will be same as if I had put my SVG file/tag in my html but it makes my html more cleaner cause SVG tends to be very big.

My last tip is to look at someone else code after you finished your to get more insights on how to make things better, I do that and learn lots things that I can apply in my next challenge.

Congrats again and happy code!