Design comparison
Community feedback
- @Islandstone89Posted 2 months ago
HTML:
-
Don't include words like "image" or "photo" in alt text. 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
-
I would change the heading to a
<h2>
- a page should only have one<h1>
, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components. -
.attribution
should be a<footer>
, and you should use<p>
for the text inside. It needs to be outside of<main>
, as both are distinct semantic landmarks.
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.
-
Outfit is a sans-serif font, so remember to specify the correct fallback font:
font-family: 'Outfit', sans-serif;
. -
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. Also, addflex-direction: column
andgap: 2rem
. -
Remove the margin on the card, it is not needed, since you're using Flexbox to center the card both horizontally and vertically.
-
On the card, remove
max-width: 100%
andwidth: 100%
- it is a block element, meaning it takes up the full width by default. -
The card does need a
max-width
, so it doesn't stretch too wide on larger screens. However, this should be in rem - around20rem
works well. -
Remember that all font sizes must be set in rem instead of
px
. -
I would decrease the font size of the heading a little.
-
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
The color of the paragraph has poor contrast, so I would change it to a darker color.
-
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. -
On the image, change
width
tomax-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. -
As the design doesn't change, there is no need for any media queries. When you do need them, they should be in
rem
orem
, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.
0 -
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