Product Preview Card Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  • Use the <main> tag to wrap all the main content of the page instead of the <div class="container"> tag. With this semantic element you can improve the accessibility of your page even though this challenge is not a full page.

  • 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 in your CSS file to modify the image.

  Example:

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

  • 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. You can read more about this problem here.

  • Not all images should have alt text. The cart-icon is for decoration only, it has no additional meaning to the component, so it can be hidden for screen-readers if aria-hidden="true" is added and its alt attribute is left empty: <img src="images/icon-cart.svg" alt aria-hidden="true">

  If you want to learn more about the alt attribute, you can read this article.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding! 🎄**

  1

  ---

  

  P

  Ahmed Abdelaal•220

  @shrki416Posted almost 2 years ago

  @MelvinAguilar this is great. Exactly what I was looking for. Thanks so much for taking the time and reviewing my code. I'll make those changes. 🙂

  1