Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive product preview card

P
gio 110

@fakegio

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • 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 am most proud of getting the finished product to be almost 100% pixel perfect. What I would do different next time is to pay closer attention to the default text styles (line height, font-weight, font-family), because that would've saved me a lot of time.

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

The figma file did not contain any spacing information, so I had to ensure I made the right spacing decisions by using the pixel perfect chrome extension, as well as just calculating the remaining space using element heights.

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

Semantics and class reusability

Community feedback

HoaCTa 110

@HoaCTa

Posted

Awesome, look perfect!!

0

@SvitlanaSuslenkova

Posted

  1. main class=card, You can add css without class here main {} . No dot!.
  2. Span Perfume. Span is used for inline elements. You have a block element here, please consider to use p or some h element.
  3. class reusability- yes in this project all the fonts were too different, it happens not so ofen.
0

Please log in to post a comment

Log in with GitHub
Discord logo

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