Design comparison
SolutionDesign
Community feedback
- @StroudyPosted 2 months ago
Good morning, Great solution you have done a lot of things right here but a few things I noticed,
- Missing a
<meta>
description tag for SEO purposes - It is best practice to have a
<main>
tag inside your body highlighting the main section. - Missing an
alt=""
description for accessibility is a must check this out Write helpful Alt Text to describe images, - Having an aspect ratio on your images will increase performance to reduce layout shifts and improve CLS,
- You should add a
font-display: swap;
property to your@font-face
, Leverage the font-display CSS feature to ensure that text is user-visible while web fonts are loading, Increasing performance. - Using
max-width: 100%
ormin-width: 100%
is way more responsive then justwidth:100%
, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail. - Another great resource for px to rem converter.
- You should avoid using
px
as it is an absolute unit and not a responsive unit likerem
orem
, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels. - Line height is usually unitless instead of
line-height: 150%;
should useline-height: 1.5;
this means it is 1.5 x the font-size, unitless value ensures that the line height will scale proportionately.
Hope some of this was helpful, keep growing, keep coding!
Marked as helpful0 - Missing a
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