Product Card made with HTML and CSS

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

• Since the images in this component adds value and serve a purpose (displaying the product) it needs to be accessible. The image needs to be applied using the picture element and not the background-image property, as it will not only let you use different images during different breakpoints it will let apply an alt tag description to image stating what the image is.

Syntax:

  <picture>
    <source media="(min-width: xxx)" srcset="image-path">
    <img src="default-image-path" alt="">
  </picture>

• More Info 📚: picture element

• Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

• More Info 📚: del element

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

Happy coding!

Learn More about semantic HTML