QR Code using HTML/CSS

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!

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 😁😊😉