Product Preview Card Component

Community feedback

• Account deletedPosted over 2 years ago

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

  • To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the main element.

  More Info:📚

  MDN Main Element

  • The alt tag description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • 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, 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:📚

  Del Element

  • The attribution should be wrapped in a footer element.

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

  Happy Coding!🎄🎁

  00

  Marked as helpful
• 

  Favour•2,160

  @Nadine-Green

  Posted over 2 years ago

  HEY SOMNATH!

  CONGRATULATIONS ON COMPLETING YOUR FIRST CHALLENGE!

  Your design is nice but I see that you have some accesibily issues, I can help you with one of them, instead of using a div for the .attribution, you should instead use a semantic element like footer, doing so will not only make your page more accesibile, but you will also have one less error

  IF THIS WAS HELPFUL IN ANY WAY, DON'T HESITATE TO MARK IT AS HELPFUL :)

  HAPPY CODING!

  00

  Marked as helpful
• 

  👾 Ekaterine Mitagvaria 👾•7,860

  @catherineisonline

  Posted over 2 years ago

  Cool solution!

  To improve semantics, make sure to wrap the entire code in the main tag not including header or footer tags. It will help to remove report issues and improve accessibility as well.

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  00