Product preview card component

Community feedback

• 

  P

  Steven Stroud•11,890

  @StroudyPosted 2 months ago

  Hey, Great solution! I ran Google Lighthouse and you scored 100 in all four categories, A Few things I noticed,

  • Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.
  • Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,

  I'm actively looking for something I could give my limited advice on but you smashed it, I hope you found some of this information helpful, I look forward to seeing some more from you, Happy coding! 💻✅✅✅

  Marked as helpful

  1

  ---

  

  thamu-acn•200

  @thamu-acnPosted 2 months ago

  @Stroudy Thanks for the feedback.

  I have managed to use BEM in my project after following the helpful link you shared.

  Do you mind sharing some code snippets or your solution for this particular challenge to show me how I can set width and height of the img instead of the 'max-inline-size' and 'height: 100%' that I used to make it flexible on both mobile and desktop.

  1

  

  P

  Steven Stroud•11,890

  @StroudyPosted 2 months ago

  @thamu-acn, Hey BEM is super useful, I am still getting my head around it and would rather develop good habits early rather than later. Yeah, no problem happy to help, So you set the height and width to the <img> in HTML, Doing this provides a fallback size for browsers while the image is loading, reducing layout shifts while loading.

  <img src="images/image-product-mobile.jpg" alt="Gabrielle Essence fragrance." width="686" height="480" />
  

  • Image dimension, I got this information from the image in the folder using normal file explorer, Right click, Properties, Details.

  I hope this explains it, keep asking questions and keep coding!

  0