@HIGHZIKdc
Posted
looks good
@shreya27-dev
Posted
@HIGHZIKdc Hey! Thank you so much :)
@Islandstone89
Posted
Hey, good job!
Here are my suggestions - I hope you find them helpful!
HTML:
Every webpage needs a <main>
that wraps all of the content, except for <header>
and footer>
. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>
.
The alt text must also say where it leads(the frontendmentor website). Remove the word "image", as that is announced by screen readers by default. A good alt text would be "QR code leading to the Frontend Mentor website."
CSS:
Including a CSS Reset at the top is good practice.
I recommend adding 1rem
of padding
on the body
, to ensure the card doesn't touch the edges on small screens.
Remove the margin
on body
. Instead, we need to add min-height: 100svh
, so the body
takes up at least the full viewport height (don't set height
, as that will cause overflow if the content grows taller than 100vh). By default the body
is only as tall as its content - this is why the card isn't centered vertically, even though you've added align-items: center
.
max-width
on the card should be in rem. Around 20rem
will work fine.
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.
On the image, add display: block
and change width
to max-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.
Instead of .outer-container img
, it's recommended to give elements a class, and use that as a selector. The reason is that .outer-container img
is a descendant selector, which has higher specificity than a single class selector, and thus is harder to override. Specificity is a vital topic to understand, so I recommend that you do some research. Here are 2 explanations from highly regarded documentation sites:
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