Product Card Component

Community feedback

• 

  Precious Nkwor•440

  @Jeen-PreshPosted almost 2 years ago

  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!

  0