Skip to content
Submitted 7 months ago

flexbox solution

Joseph Reyes•440
@JreyIV
Preview site (opens in new tab)View code (opens in new tab)
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 don't know if my code is the cleanest version or if there are unnecessary things in there that I can take out

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

Flexbox is still hard at times. I also didn't know how to see the exact padding and spacing between items or font sizes and whatnot. I'm not too familiar with figma. I eyed it and guessed on the padding so it's definitely not perfect

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

How do you use figma to make it more pixel perfect (or at least close to)

Community feedback

  • yinnie•280
    @wcyin9Posted 7 months ago

    Hi! Your solution looks very clean and great! It looks almost identical to the design in terms of structure, very great job!

    To help you with Figma, all the information about the margin/padding you need is located on the right side of the screen.

    1. in Figma, open up the QR code design. Click on any text. You might need to double click (or ctrl + left click) to select the text layer if it's within a group.
    2. on the right side below the words "Layer", you should see Ag body or Ag heading (in this specific example)
    3. Click on Ag body or Ag heading and you will see more options appear below it. Hover over the one that is highlighted, and a setting icon will appear on the right
    4. click on the setting icon, and in "Properties" section, you will see the padding, line height, and font size used.

    It would be easier to show if I can post screenshots here, but I hope that helped a bit. There's also tutorial videos for Figma online, I will link one of them here

    Marked as helpful
    0
  • Davisnz•150
    @DavisnzPosted 7 months ago

    Hello!

    If you want to take your Flexbox knowledge to the next level then I'd highly recommend you this game: https://mastery.games/flexboxzombies/

    It helped a lot.

    0

Please log in to post a comment

Log in with GitHub

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