Product preview page using react.js and Sass

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some feedback for you if you want to improve your code.

  HTML 📄:

  • You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

    Example: <del><span class="sr-only">Old price: </span>$169.99</del>

  • The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use the <img> tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.

  • You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here 📘.

     <picture>
        <source media="(max-width: 460px)" srcSet={mobileImage} />
        <img src={desktopImage} alt="{your alt text goes here}" />
      </picture>
  

  • You should not use too many heights, nor heights with percentage or vh, this can cause very strange behavior on different devices.This image is how the solution looks on mobile devices in landscape view: screencapture

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0