Design comparison
Community feedback
- @Islandstone89Posted 9 months ago
HTML:
-
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 Jessica Randall" would be read like this: "image, image of Jessica Randall".
-
Headings must always be in order, so you should never go from a
<h2>
straight to a<h5>
. Also, "London, United Kingdom" should be a<p>
. -
The social links are not headings. Change them into links.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>
of the HTML than using@import
. -
It's good practice to include a CSS Reset at the top.
-
max-width
on the card should be in rem. -
Change the
font-size
on.about
frompx
to rem.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. -
Since all the text has the same font, you should place the
font-family
on thebody
, and remove it elsewhere.
0 -
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