product-preview-card-component-main

Community feedback

• 

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted 12 months ago

  Hi Mitrandir, great job!

  I have some suggestions for improvement that might help you.

  • Instead of having one image that is scaled up or down based on the viewport width, you can use <picture> tag. It gives you more flexibility in specifying image resources.

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

  • You can use <main> and <section> tags for a better accesibility. The <main> tag specifies the main content of a document. The <section> tag defines a section in a document.

  • You forgot to add cursor: pointer; on hover button. The rest looks well.

  I hope these are helpful to you.

  Marked as helpful

  0