Responsive product-preview card using flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

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

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

  • Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, inside the del element you will want to 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:📚

  Del Element

  • Never do this as it creates accessibility issues for users and it is outdated.

  html {
    font-size: 10px;
  }
  

  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  Josh Comeau Reset

  Eric Meyer Reset

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag and <h4> with <p> to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  Add the alt attribute to the img tag alt = " " the alt value is the description of the image.

  Use rem or em as unit for the max-width values and min-height values for more on this watch this https://youtu.be/N5wpD9Ov_To Hope am helpful HAPPY CODING

  Marked as helpful

  0
• 

  Nikola D•1,510

  @NikolaD93Posted almost 2 years ago

  Hello 👋 The design is beautiful, well done! 🙌 I have 2 suggestions for you:

  1. Provide alt tag to into img tag. There you should describe what the image is about.
  2. Put a button in a <button></button> tag. Don't use div with a class.

  Hope this was helpful for you, if it was mark it as helpful 🙏

  Have a nice one! 🎉✌

  Marked as helpful

  0