Product Preview Card

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • The image’s alt tag description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.

  More Info:📚

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

  • This component requires the use of two images 🎑 at different breakpoints. The picture element will facilitate this.

  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.

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

  Happy Coding!🎄🎁

  Marked as helpful

  1

  ---

  

  Tyler•40

  @Tyler430Posted almost 2 years ago

  @vcarames Hey!! Would you mind explaining about the 2 picture breakpoints? And where can I find what the solution is suppose to have in the code without seeing the source?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Tyler430

  Regarding the first question:

  This challenges uses two images at two different breakpoints; one mobile and one for desktop view.

  The reason this is done, is to save on bandwidth and make it easier when the component is viewed on a mobile device which are not as powerful as a desktop computer.

  The picture element allows the browser to choose the proper image to display depending on the size of the screen the component is being displayed on.

  Regarding the second question:

  This where your skill and knowledge comes into play. As a Web Developer you are responsible to know the most efficient approach to solve a problem.

  Marked as helpful

  1

  

  Tyler•40

  @Tyler430Posted almost 2 years ago

  @vcarames Oh I see, would the best approach be to change the image using @media queries? Thanks for your helpful info!

  Thanks!

  • Tyler F.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Tyler430

  The picture element will let the browser choice which image is displayed; no media query needed for the images.

  Marked as helpful

  1