@Islandstone89
Posted
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>
. -
It is common to use a
class
instead of anid
. -
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 website).
CSS:
-
Including a CSS Reset at the top is good practice.
-
Use the style guide to find the correct
font-family
. -
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
To center the card horizontally and vertically, add the following on
body
:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-
On the card, remove
height
,width
,position
,margin
andinset
. -
max-width
should be in rem. Change it to around20rem
. -
On the image, add
display: block
and changewidth
tomax-width: 100%
- the max-width prevents it from overflowing its container.