Skip to content
Submitted 4 months ago

Product Preview Card

Stephanie Dennehy•220
@Stephanie-Dennehy
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?

This was the first project I have completed with a mobile-first approach. All my other projects have started from a desktop approach and then adapted to mobile.

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

My biggest challenge was getting the spacing right when the layout changed. I just used some trial and error with the sizes until I got it the way I wanted.

What specific areas of your project would you like help with?

I don't think there is anything I need help with. But I will always take any comments or suggestions for my code. :-)

Community feedback

  • Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Great job on your solution! Here are some things I particularly liked:

    1. Logical, consistent naming of variables/classes/etc.
    2. Your markup is strong semantically. You used a main tag and included the all important h1.
    3. Renders correctly on all screen sizes. Nice and responsive!

    One small thing you could improve is in your card-subtitle. Notice how the original design has increased letter spacing. For more details, see https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

    Hope this helps. Happy coding! :)

    0
    Stephanie Dennehy•220
    @Stephanie-DennehyPosted 4 months ago

    @jamesbarnett

    Thanks for pointing that out. I will definitely take a look!

    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