@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 the "main" section of a page. Change.content
to a<main>
. -
Always include the
alt
attribute on images. Since the image and icon are both decorative, both need empty alt text:alt=""
. -
Headings should always be in order, so you cannot go from a
<h2>
to a<h5>
. Change it to a<h3>
.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
Remove
width: 100%
on.content
- it is a block element, which means it takes up the full with by default. -
max-width
on the card must be in rem. -
Remove the margin on the card.
-
To center the card horizontally and vertically, use Flexbox on the body:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
-
font-size
must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
On the image, remove
width
and changemax-width
to100%
. Also, adddisplay: block
. -
Media queries should be in rem, and you usually do mobile styles as the default.