Skip to content
Submitted 3 months ago

QR code component

JonDoesFrontEnd•30
@JonDoesFrontEnd
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'm proud of that I made something with css, and that I used figma for the first time.

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

The body element not filling the entire sceen. I solved that by setting the height of the body to 100vh.

I can see now that the I probably didn't account for the padding when setting the box size...

Also - working with fonts I find a bit difficult.

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

I'd love some feedback about best-practices, especially when it comes to css!

Community feedback

  • ricardoychino•190
    @ricardoychinoPosted 3 months ago

    Hi, great job with the solution.

    I just wanted to leave some tips:

    • Instead of fixing the height of body to 100vh, is better to set the min-height to 100vh. This makes the layout more dynamic and kind of ready for future changes
    • You can use line-height with 1.4 instead of 140%, for example. Not exactly a best-practice, but is more common this way and it is a bit cleaner
    • Inside a flexbox, margins "pushes" spaces as possible, so to center .card-container inside body, you could:
    body {
  display: flex;
}
.card-container {
  margin: auto; /* This pushes spaces in all four directions and centers the element inside the parent */
}
    • This is something I personally think is a better practice, but nothing wrong if you don't want to: using box-sizing: border-box in whole stylesheet
    Marked as helpful
    0
    JonDoesFrontEnd•30
    @JonDoesFrontEndPosted 3 months ago

    @ricardoychino Thanks a lot for the tips! I did not know about the auto keyword - that's definitely going to come in handy.

    1
  • Ifehj•30
    @IfehjPosted 3 months ago

    looks pretty good on various screen types.

    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