Product card

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here is some feedback to further improve your code:

  • The section element is being used incorrectly ⚠️ and not needed for this challenge.

  • It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.

  • Since the images in this component add 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: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  • Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.

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

  • 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 s element and inside it you will add a span element with an visually-hidden class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  More Info:📚

  The Strikethrough Element

  If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  Happy Coding! 👾

  Marked as helpful

  0
• 

  Max•60

  @maxlopzbPosted almost 2 years ago

  Thank you for the detailed feedback!

  0