Product Card Component

Hey there! 👋 Here are some tips to help improve your code:

• Your whole content is supposed to be wrapped in a main html element

More Info:📚 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main#:~:text=The%20HTML%20element%20represents,central%20functionality%20of%20an%20application.

• The image’s doesn’t have an alt tag description, this needs to be improved upon ⚠️. It improves accessibility for screen readers

More Info:📚 https://www.w3.org/WAI/tutorials/images/

• The HTML <picture> element allows you to display different pictures for different devices or screen sizes. ⚠️. The picture element will facilitate this.

Here is an example of how it works: EXAMPLE

Syntax:
  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:📚 https://www.w3schools.com/html/html_images_picture.asp

• 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:📚https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#:~:text=The%20HTML%20element%20represents,been%20added%20to%20the%20document.

• The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

if you found this helpful kindly mark this feedback helpful and an upvote thanks

Happy Coding!