Design comparison
Solution retrospective
My first project using grid! It was fun! I would like to know if I am using the grid in the most effective way.
What challenges did you encounter, and how did you overcome them?Everything, because it was my first contact with grid
Community feedback
- @geomydasPosted about 1 month ago
Hi @EllyMarc, your code and solution looks good but it has some few problems. Don't worry as these issues are really quick and easy to fix. Don't be demotivated by this since most people have done the same issues you did (including me!)
My Tips and Feedback
-
Consider self hosting your fonts instead of importing it from Google Fonts. Using Google Fonts is slower and it also violates GDPR laws which is bad for privacy. This isn't really an issue for sites like this but lawsuits could happen on larger, bigger enterprise websites. I use this handy tool to help me self host my own fonts.
-
Use a CSS reset. What it does is that it basically makes your CSS more consistent across browsers. You don't have to do anything since you just have to copy and paste it inside your CSS and you are done. I reccomend using Josh Comeau's or Andy Bell's CSS reset as that is what most people use. If you ask me what CSS reset do I use, I prefer using Josh's one.
-
Never ever set typography-related properties in px. Line-height, font-size, letter-spacing and the like. See why
-
No need to set useless CSS properties Using
width: 100%
is useless since thebody
element is already a block level element which takes up all of the space possible. -
Use the rem unit in place of px. You would typically use the
px
unit for smaller stuff such as borders, outlines, shadows and the like. Use therem
unit for the rest. Usingpx
doesn't scale with the user's set font-size inside the browser's setting nor zooming in. -
Never ever set fixed-widths! Using
width: 620px
on the main element makes it not responsive. Widths don't shrink nor grow unless you use a fluid units likevw
,vh
or%
. What you need ismax-width: 38.75rem
paired withwidth: 100%
as it is centered by flex in the body and will only take up the space it needs in this case. 1 rem = 16px btw. You should use thefr
unit on grid also instead ofpx
units. -
Don't overuse nesting in CSS! It makes your code harder to read and it also increases the specificity which makes the styles harder to override. You can mitigate this by using a naming convention such as BEM. The only thing with BEM is that you will need to apply a class to every element which is often verbose. You would only use nesting for media queries and pseudo-classes & pseudo-elements such as
:hover
,:focus
,::after
and etc. You can learn more about nesting here. It's about Sass but it still applies to native CSS. -
Colocate media queries in the selector itself. For example:
instead of this .element { background: red; } @media (min-width: 400px) { .element { background: blue } } do this .element { background:red @media (min-width: 400px) { background: blue } }
-
Code it mobile-first instead of desktop-first. Self-explanatory. When you code your website, start on mobile first instead of desktop. So that means you will be using
min-width
inside your media queries. The reason why you should go mobile-first is because there are typically less styles to override on the media queries leading to less CSS. There are some exceptions for this though such as hamburger menus.
That is all. Don't be ashamed by this since most people have done the same mistakes as you did before. Don't be overwhelmed also and treat this as like a checkbox and do them 1 by 1. Do all of the things I said and update your CSS before moving on to the next challenge. Have a nice day and have fun coding!
Marked as helpful0@EllyMarcPosted about 1 month ago@geomydas I will stop the addiction of using px and about Google Fonts I just used what the activity recommended, is it still a problem? It's the first time I've been told to make the code mobile-first instead of desktop-first , it's an interesting order and I'll definitely try it :) Thanks for the tips, I'll do some research to put them into practice!
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