@Islandstone89
Posted
HTML:
-
Remove the empty
<h1>. -
You're using way too many
<div>elements. There is only a need for one<div>, which holds the card content. I would simplify the HTML structure to this:
<main>
<div class="card">
<img>
<h2>Improve your front-end skills by building projects</h2>
<p>Scan the QR code to visit Frontend Mentor and take your
coding skills to the next level</p>
</div>
</main>
- A better alt text would be "QR code leading to the Frontend Mentor website."
CSS:
-
It is best practice to write CSS in a separate file, often called
style.css. Create one in the same folder as theindex.html, and link to it in the<head>:<link rel="stylesheet" href="style.css">. -
Including a CSS Reset at the top is good practice.
-
The blue
background-colorshould be set on thebody. -
Set the
font-familyonbody, and remove it elsewhere. The children ofbodywill inherit the font. -
I would recommend adding
1remofpaddingon thebody, to ensure the card doesn't touch the edges on small screens. -
To center the card horizontally and vertically, I would use Flexbox on the body:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
-
max-widthon the card should be in rem. Around20remwill work fine. -
font-sizemust 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-spacingmust also not be inpx. You can useem, where1emequals the element's font size. -
Since all of the text should be centered, you only need to set
text-align: centeron the body, and remove it elsewhere. The children will inherit the value. -
On the image, add
display: blockandmax-width: 100%- the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container.max-width: 100%makes the image shrink to fit inside its container.
Marked as helpful
