Responsive Product Preview Card

Hello there 👋. Good job on completing the challenge !

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

HTML 🏷️:

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

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

CSS 🎨:

• Setting the font-size to 62.5% can attract compatibility issues with third-party libraries or plugins. You can read more about this with this lectures:

  • 1. Should I change the default HTML font-size to 62.5%?.
  • 2. The Surprising Truth About Pixels and Accessibility - The 62.5% trick.
  • 3. A comment on the 62.5% trick.

  Credit to grace-snow and vanzasetia.

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

Happy coding!