Frontend Mentor | QR code component coding challenge solution

@Islandstone89

Posted about 1 month ago

HTML:

Remove role="main", that role is implied on the <main> element.
The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
"Improve your" is the heading, while "Scan the QR code" is a paragraph. As the card heading would likely not be the main heading on a page, I would make it a <h2>.
.attribution should be a <footer>, and you should use <p> for the text inside.
The footer needs to be outside of the main, so your structure should look like this:

<main>
    <div class="card">
    </div>
</main>
<footer>
</footer>

CSS:

It is best practice to write 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">.
Including a CSS Reset at the top is good practice.
Remember to specify a fallback font:font-family: 'Outfit',sans-serif;
I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.
Move the properties on .content to body. Change height to min-height, so the content has room to grow taller than the viewport without causing overflow.
Remove overflow: hidden on the card, it is not needed.
Remove all widths and heights in px.
max-width on the card must be in rem - change it to 20rem. which equals 320px.
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.
letter-spacing must also never be in px. You can use em, where 1em equals the element's font size.
Since all of the 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.
Remove font-style: normal, as that is the default value.
To create the space between the image and the edge of the card, set padding on all 4 sides of the card: padding: 1rem;.
Remove all Flexbox properties on the heading and the paragraph - Flexbox is used on elements that contain several other elements, like a <div> with an image and some text inside.
On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Also remove the margin.

QR code component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community