QR Code Component Solution Using Flexbox & BEM

Hey, well done!

A few tips :)

HTML:

• The card heading would likely not be the main heading on a page, hence I would change it to a <h2>.

CSS:

• Including a CSS Reset at the top is good practice.

• I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

• I would move the properties on .container to body.

• Remove the width and height on the card. It is not recommended to set fixed sizes in px, as we want our components to respond to different screens.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

• font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

• I would place font-family on the body, and remove it elsewhere. The children of the body will inherit the font.