Frontend Mentor | QR code component with HTML CSS and Flexbox coding challenge solution

@Islandstone89

Posted 9 months ago

HTML:

Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Make .card a <main>.
You don't need any divs, so remove those.
The alt text also needs to say where it leads (frontendmentor.io).
"Improve your" is a heading - make it a <h1>. Do not use the <b> tag to get bold text.
.attribution should be a <footer>.
The footer text needs to be wrapped in a <p>.

CSS:

It is best practice to write the CSS in a separate file, often called style.css. Create one in the same folder as the index.html, and link to it in the <head>: ``<link rel="stylesheet" href="style.css">`
It's good practice to include a CSS Reset at the top.
Only declare font-family on body once. It should be written like this: font-family: "Outfit", sans-serif;
height on body should be min-height - this way, the content will not get cut off if it grows beneath the viewport.
Move box-sizing: border-box from the image to the * - we want this to apply to all elements, as it makes for easier calculation.
font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.
Remove the fixed width and height on the card. Except for icons, you rarely want to set fixed dimensions(especially heights), as this easily creates issues with responsiveness.
Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.
Since all text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.
On the image, add display: block and replace width with max-width: 100% - the max-width prevents it from overflowing its container.

QR code component with HTML CSS and Flexbox