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

Using Flexbox to create a card with barcode

@holgerflick

Desktop design screenshot for the QR code 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 would try to approach this using Grid instead of Flexbox.
  • the task states all measurements in px. In real world, I would most likely flip to rem and em.

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

  • I was uncertain about margin sizes
  • This example made me aware when having a pixel-template that if you calculate the pixels you need to be aware of the box model that padding and margin play a role.
  • I did not do the math to 100% match the pixel sizes of the Figma template
  • Adding the wide space at the bottom - I just eye balled it

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

  • Figuring out the measurements of the different parts. With Figma I could select different objects in the template. With JPEG, I would use an image tool and look at the size of the different areas. However, is it really necessary to create a representation that is true to the pixel-size. I think as long as it behaves the same considering later tasks will include responsive designs, it does not need to match "by the pixel".
  • I used Chrome on Mac as a browser and the fonts look a bit different than in the Figma template. Do you recommend another browser for comparison? I double checked font weights and colors.

Community feedback

P
Jan 290

@Jan-Dev0

Posted

Your code is well-structured, but consider using semantic elements like <main> for the main content or a <footer> instead of a <div> to improve accessibility. Additionally, it's good practice to include a global reset and set box-sizing: border-box on all elements to ensure consistent styling across browsers.

1
Mutsa 10

@mutsamusa

Posted

In my opinion pixel-size does matter, esp. if you'd be coding for a client.

I however must admit I didn't think to actually calculate the design file's sizes and also pretty much eye-balled spaces and pxs.

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