Design comparison
Community feedback
- @Islandstone89Posted 9 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 the "main" section of a page. Change.container
into a<main>
. -
Do not use words like "photo" or "image" in alt text. Screen readers would announce your current alt text as "image, omelette photo", which we don't want.
-
Headings must always be in order, so you cannot jump directly from a
<h1>
to a<h3>
. Remember, headings are all about structure and not about how they look. You could always style a heading if needed. I would change the<h3>
to a<h2>
.
CSS:
-
On
body
, addmin-height: 100vh
. -
Remove the percentage width on the card. Instead, add a
max-width
in rem, so it doesn't get too wide on big screens. -
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. -
Media queries should be in rem, and you usually want to do the mobile styling as the default.
Marked as helpful1 -
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