Skip to content
Submitted 4 months ago

Product Preview Card

Gabriel Nascimento•60
@GabrielNP96
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'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•140
    @f1r3placePosted 4 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
    0
    Gabriel Nascimento•60
    @GabrielNP96Posted 4 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.

    0

Please log in to post a comment

Log in with GitHub

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