Solution of Product preview card component using Flexbox and Grid

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.

  • Only one source ⚠️ is needed inside the picture 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

  • NEVER ❌ do this as it creates accessibility issues for users and it is outdated, instead download a px to rem/ em converter in your code editor.

  html {
    font-size: 62.5%;
  }
  

  More Info:📚

  Should I change the default HTML font-size to 62.5%?

  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