CSS properties for a QR-CODE component

You did a pretty good job.

i see you used both "display: flex" and "position: absolute" i would advise to only use "position" if it is absolutely necessary. In my opinion you could remove the (position, top, left and transform in .qrcode) and try playing with padding (and margin) around objects.

Starting with "display: flex" is good practice. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

position can be helpfull when you want to move things more independently/fixed from the rest of the code and or make objects interactive. Maybe the following website helps you a little further in your understanding about position: https://css-tricks.com/almanac/properties/p/position/

Hi LLL0908, great job, here are some feedback

• On your body element you have a typo should be display: flex not felx, I guess that's why you had to use position: absolute and transform: translate on your .qrcode to center it, you can delete those lines. Also add a min-height: 100vh, flex-direction: column on your body.
• All content should be wrapped within landmarks. Wrap a main tag around your qrcode and a footer for the attribution.
• Your .qrcode should have a max-width in rem not width. Try as much as possible to avoid setting fixed widths and heights on elements, use max-width or min-height if you have to.
• Consider using a modern CSS reset at the start of the styles in every project. Like this one modern css reset.

For me, that's realy nice work. U have good proportion, but u can add biggest margin-top on your .container.