Product preview card component

Community feedback

• 

  Marzia Jalili•4,110

  @MarziaJaliliPosted 3 months ago

  Happy New Year!!!

  Some changes you can make to the HTML file:

  • As far as I know dude, there is no need to wrapp the card in more than one element.

  Instead of having these two div elements: <div class="main-container"> and <div class="card">, you could simply have one article element.

  • use the picture element rather than having two images.

  The picture element is very handy when it comes to multiple images for different screen sizes. It gives you the ability to set different media attributes which can declare the screen size for each source element nested inside.

  You can take the code below as an example:

  <picture>
    <source srcset="(path of the image)"  media="(max-width: 30em)"/>
    <source srcset="(path of the image)"  media="(min-width: 31em)"/>
    <img src="(path of the image)" alt="image"/>
  </picture>
  

  the src attribute in the img will be the fallback source of the image if the other sources are not found.

  • Also, for the perfume, it will be better to use the <span> instead of a <p> element.

  • For improving the accessibility of the web use the <button> element instead of <div class="add-to-cart-btn">.

  You can get rid of the default styles of button, which I guess in this case will only be the border, by the line below:

  border: none;
  

  Hope it answers your question😁😁

  0