Design comparison
Solution retrospective
What do you think are the best practices for this project? What am I supposed to do to improve my code?
Thanks in advance for your feedback 😊
Community feedback
- @Mazz100Posted 10 months ago
@ParaPaca Hello. Well done on completing the project!
While the final solution is looking great, I have some tips that might help you.
CSS SCSS:
-
Consider using rems for sizing UI like
font-size
and width, other properties can be preference. Note: 1rem = 16px. -
Nesting elements in SCSS can very quickly get confusing and unreadable, you can separate unrelated classes like
.card
and.name-wrapper
outside ofmain
. -
I am not an expert but I feel that using the nth child thing a lot is complicating and other selectors that I don't know or even using.
-
the last 2 points I mentioned I want to highlight the readability of CSS too, I also fell for nesting too much with SCSS forgetting that CSS exists.
HTML
- The
main
element should be inside the container or wrapper because it indicates the the main content of a website, its like accessibility tip, I also get confused by it sometimes.
I hope any of this could help in any way for future projects :).
Resources that could help:
Marked as helpful1@ParaPacaPosted 10 months ago@Mazz100, hello! Thank you for your feedback! Your comment was very useful to me 😊
- You're totally right! I redefined all my px into rem. I didn't think about this possibility before as much as should, I think 😅
- Oh geez, I didn't think about it at all before! 😱 I can imagine how difficult all my previous projects were to read (thanks to everyone who figured them out). I edited my CSS where it was necessary.
- I rethought about nth-child and agreed with you, so I deleted all nth-child and added additional classes, such as card1, card2 and etc.
- I didn't know it! I will use this knowledge in my subsequent projects.
1 -
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