Design comparison
Solution retrospective
mixing colours
What challenges did you encounter, and how did you overcome them?using rgba
What specific areas of your project would you like help with?css opacity
Community feedback
- @Islandstone89Posted 5 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 a page's "main" section. Wrap the card in a<main>
. I would also give the div a class:<div class="card">
. -
The alt text must also say where it leads(frontendmentor website). You should remove "image", as screen readers announce that by default. A good alt text would be "QR code leading to the Frontend Mentor website."
-
Remove the
width
attribute.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Use the style guide to find the correct
font-family
. -
Remove the margin on the card.
-
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;
-
Remove all widths in
px
. In web design, we rarely want to set fixed sizes, as we want our components to grow and shrink according to different screens. -
Remove
height: auto
, as that is the default value for images. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
On the image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container. -
I would increase the padding to around
16px
.
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