Skip to content
Submitted 8 months ago

Product preview card component

#sass/scss
thamu-acn•200
@thamu-acn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to load different image files based on device size. I want to explore more image and picture related properties. I was also able to mix flexbox and grid layouts.

What challenges did you encounter, and how did you overcome them?

Switch from one column for mobile to two columns on desktops. I set grid display on the card wrapper based on media query.

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Steven Stroud•11,910
    @Stroudy

    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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord