Product Preview Card Component

Community feedback

• 

  Jeremy Mendoza•100

  @JeremyMenPosted over 2 years ago

  Hey Carmen,

  these are my advices:

  • Try to use more meaningful HTML tags. You could have used <figure> tag which is perfect when you deal with images + some text related to it.
  • about your CSS, I can see many positive things: you have followed BEM methodology, reset the browser's default values and used variables. Cheers for that! Next time I suggest you to use rem/em while setting the size of any element.

  Keep up the good work!

  Jeremy

  Marked as helpful

  0
• 

  Cagri Kizilkan•210

  @cgrkzlknPosted over 2 years ago

  Great job! I have a suggestion to improve your code:

  • Instead of using 2 img tags on your HTML, you can use a picture tag to switch between desktop and mobile images. It doesn't even require CSS, only HTML:

  <picture class="image-wrapper">
    <source
      srcset="./images/image-product-desktop.jpg"
      media="(min-width: 768px)"
    />
    <img src="./images/image-product-mobile.jpg" alt="Frasco Perfume"/>
  </picture>
  

  Marked as helpful

  0
• 

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  Hi @Carmenyo

  Nice work with the component, here are my suggestions on how to improve it:

  • Add a border-radius to the main component
  • Mesure spacing more precisely using Figma or Adobe XD
  • Try centering the component using flex( if you're unfamiliar with flex check this tutorial)
  • The component size is fixed, you only need to change its layout flow ( from column to row)

  Keep it up & happy coding...

  Marked as helpful

  0