Design comparison
Solution retrospective
I would like to know what more I could do to improve the project. Also, what are some best structuring practices I could implement.
Community feedback
- @Islandstone89Posted 12 months ago
HTML:
-
Change .div1 to a <main>.
-
Alt text should also tell where it leads.
-
"Improve your frontend skills" is a heading, not a paragraph.
CSS:
-
Add a CSS Reset at the top - I recommend the one by Andy Bell.
-
Don't use positioning to center the card. Instead, use Flexbox on the body:
display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center;
-
Don't set fixed width on the card. You can set a max-width, to prevent the card from getting too big at larger screens.
-
Remove margin-bottom: 0px. If you did want something to have 0 margin, you would just write "0".
-
Font-size must never be in px. Use rem instead.
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