product-preview-card-component-main CSS FLEXBOX

Hello there 👋. Good job on completing the challenge !

• In this challenge, where you're working on a component rather than a complete webpage, there may not be many opportunities to use many semantic HTML elements. However, it's essential to consider some suggestions:

  I'd like to point out that you've missed one significant semantic landmark in your solution: the <main> element. The <main> element is used to indicate the main content of a document, and it's a crucial part of semantic HTML. All your content, including the section, should be placed inside the <main> element to better represent the structure of a webpage.

• The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use the <img> tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.

• 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>

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

Happy coding!

You've done a great job! One thing I'd suggest is adding the breakpoint at max-width: 768px instead so that the product-image doesn't slide under your product-description.