product preview card component

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey there, nice solution! If you want to improve your code, make sure sure to use footer tag for your attribution div.

  You can read more about semantic html here: https://www.w3schools.com/html/html5_semantic_elements.asp

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  Marked as helpful

  0
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY TAOFEEQ!

  I couldn't help but notice that your solution has a problem with centering, a quick fix for this would be the give the body a height of 100vh height:100vh then a display of grid display:grid and then using the code place-items:center

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

  HAPPY CODING!

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues.

  To center a content on a page, add min-height:100vh; display: flex; align-items-center: justify-content: center; to the body. Instead of giving .content a margin value

  In the media query change the width of .content to 80% or 90%

  Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful HAPPY CODING

  Marked as helpful

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 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/

  • 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!🎄🎁

  0