Design comparison
SolutionDesign
Solution retrospective
Please check my code & design and provide feedback. I have struggled in defining the font wight & color. I think I need to structure the code more better.
Community feedback
- @hyde-brendanPosted almost 3 years ago
Hey, great job with this! A few comments that should hopefully help you out:
- For the Document should have one main landmark and All page content must be contained by landmarks warnings, there's a couple of HTML elements that are treated as the "main landmark", including
header
,nav
,main
, andfooter
. For this particular page I would just wrap all your content in a<main>
element to resolve that issue. - The Page must contain a level-one heading warning can also be easily resolved by changing your
<h2>
into a<h1>
. - The Images must have alternate text error is for accessibility reasons with people viewing the page with a screen reader. Since the card images are mainly decorative, you can just add an empty alt attribute (i.e.
alt=""
) to the<img>
elements. - Including the header in the grid is interesting, but I would remove the top-most row and set the header padding to adjust, currently there's a large amount of whitespace at the top.
- It's not required, but
clamp()
is a very neat function that can be used withfont-size
to have more dynamic font size changes based on the screen size. You can use it to make the same header increase in size when you're on the desktop view as opposed to the mobile view.
Hope this helps!
Marked as helpful1 - For the Document should have one main landmark and All page content must be contained by landmarks warnings, there's a couple of HTML elements that are treated as the "main landmark", including
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