Product Preview Card Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @mikhael7 👋, good job completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • Instead of using <section> to wrap all the main content, use <main> tag to improve the accessibility of the website.

  • Setting a defined height for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can use min-height.

  • Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops. You can set the max-width at 32.5rem.

  • I recommend adjusting the breakpoint. On devices between 800px and 475px wide your image is completely distorted

  • Not all images should have alt text. 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 src="./images/icon-cart.svg" alt aria-hidden="true" width="fit-content" class="icon-cart">
  

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2

  ---

  

  Mikhael•120

  @mikhael7Posted about 2 years ago

  @MelvinAguilar Hi 👋, thank you for your feedback and suggestion, i will fix and remember it 😁

  1