Design comparison
Community feedback
- @Islandstone89Posted 8 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
to a<main>
.
CSS:
-
Remember to include a good CSS Reset at the beginning.
-
As the card container is centered using Flexbox on the
body
, you don't needmargin: 0 auto
on.container
. -
max-width
should be on the card container,.card
. -
font-size
must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
Remove
font-weight: 400
onbody
, as that is the default value. -
Ideally, you want to do mobile styling first, and use media queries(they should not be in px, but in rem) for larger screens.
Marked as helpful0@ayushyadavzPosted 8 months ago@Islandstone89 Review my latest challenge which I've done called Stats preview card.
0 - Every webpage needs a
- @SouhailM07Posted 8 months ago
Hello Developer , I can improve your project if you want.
1@SouhailM07Posted 8 months ago@AayushYadavz Done , if you like your new project , you can follow me on github for more , by the way your live demo in front end mentor is not working .
0@SouhailM07Posted 8 months ago@AayushYadavz i know , but you need to change it here in order for others to view it .
0@ayushyadavzPosted 8 months ago@SouhailM07 bro it's working I have clicked on view code then I got redirected to my repo
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