Submitted 2 months ago

Product Preview Card

Stephanie Dennehy• 220

@Stephanie-Dennehy

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?

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

@jamesbarnett

Posted 2 months ago

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

Logical, consistent naming of variables/classes/etc.
Your markup is strong semantically. You used a main tag and included the all important h1.
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! :)

Stephanie Dennehy• 220

@Stephanie-Dennehy

Posted 2 months ago

@jamesbarnett

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

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