Product Preview Card Component

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• The <img> tag should be used when the image is a crucial part of the content and its meaning is crucial to understand the context, while the background-image property should be used as a decorative element that enhance the design of the website.

  In my opinion, the product image is important content and not just decoration like an icon, it gives more context about the product being discussed throughout the component. The <img> tag is the most appropriate.

HTML 📄:

• Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

• The <h1> is the most important heading on the page, In this challenge the perfumer's name can be considered like the title of the page, so it should be the <h1>

• You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here 📘.

• You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

  Example: <del><span class="sr-only">Old price: </span>$169.99</del>

Alt text 📷:

• The alt attribute should not contain underscores or hyphens, it must be human readable and understandable.

• The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

  If you want to learn more about the alt attribute, you can read this article. 📘.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!