Product Preview Card Component

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted over 1 year 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.

  • 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

  • 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

  • Your content is not fully responsive. 😢 Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

  https://web.dev/learn/design/

  • ALWAYS Implement a "Mobile First" approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect 💯 on all mobile devices.

  More Info: 📚

  Mobile First

  • For improved accessibility 📈 for your content, it is best practice ✅ to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  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

  1

  ---

  

  Tom Cieslukowski•130

  @cieslukPosted over 1 year ago

  @vcarames Thank you for the help, did not know there was a picture element. Your comment has helped a lot!

  1

  

  バレンタイン 😈•64,190

  @VCaramesPosted over 1 year ago

  @ciesluk

  Glad I could help!

  1