Design comparison
Community feedback
- @Kein-InternetPosted 3 months ago
Good use of semantic tags, making your code reponsive, and use of css variables, it makes your code readible and maintainable. Here's a few suggestions:
Make sure your paying attention to detail with spelling (e.g., "protein" instead of "protien") in your html markup, to ensure your code aligns as much as possible to the draft.
-
For your CSS, it would suffice to use just one breakpoint. Since you started with the mobile first-approach you can remove
@media only screen and (max-width:375px)
from your code. -
With the exception of
main{ width: 800px; background-color: var(--color-white); box-sizing: border-box; padding: 35px; border-radius: 15px; margin-top: 100px; margin-bottom: 100px; }
, you can removemain
from all of your selectors as all of the code you have developed is already inside themain
section so it's not needed. -
Use
rem
instead ofpx
when setting the margin/gap, padding, and font-size so that they accomodate the users defult broswser font-size. Doing this is necessary for making an accessible site.
Marked as helpful0 -
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