Skip to content
Submitted 12 months ago

Using Flexbox to create a card with barcode

Dr. Holger Flick•10
@holgerflick
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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.
Code

Please log in to post a comment

Log in

Community feedback

  • P
    Jan•290
    @Jan-Dev0

    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.

  • Mutsa•10
    @mutsamusa

    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.

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