Design comparison
Community feedback
- @Islandstone89Posted 10 months ago
HTML:
-
Every webpage needs a
<main>
that wraps all of the content, except for<header>
andfooter>
. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change.main
into a<main>
. -
Remove the
<header>
- it should be used for content that is the same on every page, like a navigation menu and a logo. -
The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor.io).
-
You don't need to wrap the image in a
<div>
, so I would remove it. -
The paragraph text should all be in one
<p>
.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>
of the HTML than using@import
. -
It's good practice to include a CSS Reset at the top.
-
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. Do the same forfont-family
. -
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 margin on the card.
To center the card horizontally and vertically, use Flexbox on the body:
display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh;
-
Remove
min-height
from the card. -
The
max-width
of the card should be in rem - around20rem
works fine. -
Use
px
forborder-radius
on the image. -
You are correct by commenting out the media queries. As the design doesn't change, there is no need for any. When you do need them, they should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens. Since they should not be used, remove them altogether.
-
To create the space between the image and the edge of the card, set
padding
on all 4 sides of the card. -
It is common to set
display: block
on images.
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord