First Submission - Results Summary Component - HTML and CSS only
Design comparison
Solution retrospective
I'm a true beginner when it comes to HTML and CSS. My CSS code feels very messy and all over the place. Are there any tips that you could give me in order to improve on this or any glaring problems you see in my code. I appreciate any help I can get.
Community feedback
- @brsmit1993Posted 12 months ago
If you're looking to organize your CSS better the two best pieces of advice I could give would be 1. Learn sass as soon as you can. Once you're comfortable with CSS learning how to use SASS will save you tons of headaches when it comes to organizing CSS the second thing would be to look into naming /organizing methods like BEM. BEM even if not followed perfectly just understanding the theory behind why / how people follow it will likely be a big help as well.
https://www.toptal.com/css/introduction-to-bem-methodology
Marked as helpful0 - @Zy8712Posted 12 months ago
Your site looks pretty good. Main things I'd add/change:
- center your component using flexbox instead of assigning margins to it. Right now you center you component using
margin-top: 10vh
. A better way of doing it would be to make the parent component center the box for you. In this case, the parent container is thebody
. So assigning something like this to your body should center it:
body{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; }
- if you want to reduce the amount of lines in your css you should combine things like
margin-top
,margin-left
,margin-right
, andmargin-bottom
all undermargin
. - if you want to learn other ways of writing clean readable styling code, I suggest you to learn SASS/SCSS once you've mastered a bunch of the basics in css
Hope you find this feedback useful 👍
Marked as helpful0 - center your component using flexbox instead of assigning margins to it. Right now you center you component using
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