Skip to content
Submitted 2 months ago

QR Code using HTML/CSS

Victoria•80
@vcalvo25
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?

Might seem simple, but I'm mostly proud of just completing the project. I was a bit intimidated by Frontend Mentor, as my only experience with HTML/CSS was through the Responsive Web Design course by FreeCodeCamp. This was an excellent review after taking a break from HTML/CSS.

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

One challenge I encountered was to ensure that everything lined up correctly and was centered. I overcame it by editing the margins and padding quite a few times. I also watched a Youtube video to ensure I was on the right track for some parts of the project.

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

I would mostly like help with margins and padding. More specifically, when is the appropriate time to use different units of measurement such as PX, EM, REM, %, and VW/VH? I waste time on projects by going back and forth between the different units of measurement to see the difference, so I'd like to know if some units of measurement are to be used in specific scenarios than others. Thank you for the feedback!

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 2 months ago

    Hi, @vcalvo25

    I saw your solution and I have some thoughts:

    • I noticed you've used Flexbox on the body and applied align-items: center, which is great! To fully center the card, you can simply add justify-content: center to the body and safely remove margin: 0 auto from the .container. This way, the card will still be centered, and you're making better use of Flexbox for positioning.
    • As for when to use different units like px, em, rem, %, and vw/vh: px is an absolute unit, so it doesn’t change based on the environment. em and rem are relative units, where em is based on the parent’s font size, and rem is based on the root html font size. If you don't change the font-size of the html, then rem can be considered as a fixed unit, with 1rem equal to 16px by default. % is relative to the size of the parent element, and vw/vh are based on the viewport width and height.

    Examples:

    • px: font-size: 14px; (fixed size, doesn’t adapt to screen size)
    • em: font-size: 2em; (twice the size of the parent’s font size)
    • rem: font-size: 1.5rem; (1.5 times the root font size, i.e., 24px if the root font size is 16px)
    • %: width: 50%; (half the width of the parent element)
    • vw/vh: width: 80vw; (80% of the viewport width)

    I'd personally use px or rem (if I don’t change the html font-size) for elements that rarely need to change size, and I’d use the other units for responsive purposes.

    Hope this helps!

    0
  • MikDra1•6,980
    @MikDra1Posted 2 months ago

    If you want to know when to use what unit I encourage you to watch this VIDEO which is all about that.

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    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