Product preview card using relative spaces

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 is best to use the Picture element and not the background-image property, as it will to use different images during different breakpoints.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

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

  • • Your "button" was created with the incorrect element. It should be created using the Button element. So that when the user clicks on the button (with the help of JS) it should add the product to the cart.

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

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  P

  Franci Melink•400

  @francimelinkPosted almost 2 years ago

  @vcarames Thank you very much.

  Very helpful and instructive. Next time I will try to use those advices snd suggestions.

  0