Used Flex box and Media Queries for Completion of this Challenge

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @shubham7522 👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
  • Try to use semantic tags in your code. Click here for more information..
  • You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.

  Example:

  <picture>
     <source media="(max-width: 375px)" srcset="./images/image-product-mobile.jpg">
     <img src="./images/image-product-desktop.jpg" alt="your_alt_text">
  </picture>
  

  • Improve alternative texts by adding descriptive text to the alt attribute of the product image. The alt attribute enables screen readers to read the information about on-page images and will be displayed instead if an image file cannot load.
  • The cart icon is for decoration purposes only, so it can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img class="cart-img" src="images/icon-cart.svg" alt aria-hidden="true">
  

  • You could use the <del> tag to display the old price:

  <del class="old-price">$169.99</del>
  

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  0