Design comparison
Solution retrospective
I took some help from chatgpt , I think I need to learn these concepts more and it will be helpful for me in future
Community feedback
- @Islandstone89Posted 3 months ago
HTML:
-
There are 2
src
attributes on the image. I assume you meant to usealt
for the second one. All images must have thealt
attribute. If the image is decorative, the alt text should be empty:alt=""
. This image has meaning, so it needs a short description. The alt text should be written naturally, without using-
between the words. 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 -
I would remove the
id
from the<footer>
. It is common to use classes instead. This article explains when should you use anid
. -
<main>
and<footer>
are separate top-level landmarks, meaning one cannot be inside another. Move the footer outside of the main, so they become siblings, both being direct children of thebody
.
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
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
Remove all widths.
-
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
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. -
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. -
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
To create the space between the image and the edge of the card, set
padding
on all 4 sides of the card:padding: 16px
. -
On the image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container. Remove the margin, the space around is created by the padding on the card. You can add a bit ofmargin-bottom
, though. -
Remove
position: absolute
on the footer. Addgap: 2rem
onbody
to create some space between the main and the footer. -
Remove
margin-left
andmargin-right
on the<h1>
, it is not needed because the card itself haspadding
. Quick tip: if you ever want to set the same value formargin-left
andmargin-right
, you can use the shorthandmargin-inline
.
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