Submitted about 2 months ago

Product Preview Card

Gabriel Nascimento• 60

@GabrielNP96

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I'm happy to see the results, especially since I used a mobile-first approach. However, I would research more about using images on the web before doing this project again or a similar one.

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

Well, I definitely didn't encounter major difficulties. I only had some trouble using the font from Google Fonts, but in the end, I downloaded them and used @font-face.

Community feedback

f1r3• 120

@f1r3place

Posted about 2 months ago

hi there! congrats on completing the challenge!

here's some feedback:

for dynamic images (different ones on desktop and mobile) use the <picture> element. you can read more about it here
the proper fonts couldn't be loaded, for some reason.
also, when using @font-face i recommend using local in the src section, so that if the user has the font already they don't need to download it
i love how you did the switch with the flex on the main element!
in general your code is very compact, which makes it easy to read (appreciate that!)

that's about it. good luck on your next challenges!

Marked as helpful

Gabriel Nascimento• 60

@GabrielNP96

Posted about 2 months ago

@f1r3place

I'm glad for the feedback. I'll be more attentive in the next project and do my best to avoid the same mistakes. I'm happy to hear that you liked my work.

Please log in to post a comment

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