Product Card Component using SASS

Hi @theadg 👋, good job for completing this challenge!

In relation to semantic tags here are some suggestions that you can consider:

• You can use <picture> tag when you need to change the image on different viewports, using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from using a media query to modify the image . More information here

Example:

<picture>
   <source media="(max-width: 750px)" srcset="./images/image-product-mobile.jpg">
   <img src="./images/image-product-desktop.jpg" alt="your_alt_text">
</picture>

In this solution you should not use the background property to set the image because this image has an important semantic meaning, use CSS background property if the image is not part of the content.

• The tag <div> is used to defines a section in an website. It is used to have a container styled with CSS, set special alignment or the content needs a special positioning.

You could use more the <p> tag, the <p> element is paragraph level content, usually text:

<p class="card--text-desc">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL</p>

• The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, the card--text-footer-price-main should not be an <h1> tag.

• You could use the <del> tag to display the old price:

<del class="card--text-footer-price-supp">$169.99</del>

Learn more about semantic tags

• Try to use more descriptive names for your classes, I suggest you learn BEM naming convention standard for CSS class names because increases the readability of front-end code, provides a modular structure, and its more easier to work with.

I hope those tips will help you.

Good Job and happy coding !