Submitted 3 months ago

Using Flexbox to create a card with barcode

Dr. Holger Flick•10

@holgerflick

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

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

Jan•290
@Jan-Dev0Posted 3 months ago
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
@mutsamusaPosted 3 months ago
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

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