@Islandstone89
Posted
Hi there. Let's go through your code, and see how we can improve your solution.
HTML:
-
You need a
<main>
, this is important for accessibility. Replace the<div>
with a<main>
, and give it a class like.card
. -
The reason the image is not showing, is because you have an incorrect file reference. The image is located on the same level as the
index.html
, hence you don't need to write/images/
in front of the image file name. Write it like this instead:src="image-qr-code.png"
-
The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).
CSS:
-
It's good practice to include a CSS Reset at the top.
-
Good job on adding a
max-width
on the card, however, it needs to be in rem. -
size
is not a property, I assume you meantfont-size
. Font-size must never be in px. Use rem instead. -
To center the card horizontally and vertically, you can use Grid or Flexbox. Both of them affect the children of its selector, so you always want to set it on the parent of whatever you want to center. Here, we need to set it on the
body
.
Grid:
display: grid;
place-content: center;
min-height: 100vh;
Flexbox:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;