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

Card Component using Flexbox

Alcandris 30

@Alcandris

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


how do you measure font sizes and margins? I find it difficult to do this with a screenshot, but I'm here to practice

Community feedback

Kenisa 90

@KenisaRenee

Posted

Hi Alcandris,

Great work on finishing this solution!

The style guide gives a little insight on font-size but I have yet to see any guidance on margins. I'm not sure there's a way to have exact measurements without using something like Figma or Sketch. I don't use either, so I line up my design as close to the original design as possible and do my best to guess the measurements from eyeing it when comparing side by side. Pixel perfection is impossible especially for those of us who don't have design services like Figma. The best suggestion I have is to get it "close enough." I like this article that goes into more detail on that. Other than that, I've learned to implement measurements that are more responsive than px like rem and em.

You're doing great and happy coding!

0

@ziin

Posted

I use Figma to measure everything, font size, weight, letter spacing, paddings, margins, etc.

You can also take a screenshot of your solution and place it over the images on Figma to check if you're in the right way.

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