Andres Rios• 20
@rivers07-maker
Submitted
Looking for feeback to improve the design and code for this Challenge!!
P
AFONSO DE ALMEIDA MAIA
@Afonso-Maia
All comments
- P
@Afonso-Maia
Posted
hey there about your questions without too much details:
em's and rem's are for when you want to keep things relative and make it easy to propagate changes. if you know that your margins, paddings and widths are not gonna change then there is no point in using them, but if you want the flexibility to change down the line then they are usefull. Example: You finished coding your site and found out that everything looks kinda small, but you want to keep the proportions that you have, if you used rems you just have to increase the <html> font size and everything change accordingly.
A usefull trick to make calculations easier is to set the html font size to 62.5%, that makes it 10 px, so if you want 28px margin thats 2.8rem, a lot easier to reason about. And why not set the font size to 10px directly you may ask, thats because it makes zooming in not work anymore since the font will stay at 10px regardless of zoom level, while at a percentage it changes with user imput.
About the mobile first thing, the idea is that you code the mobile layout first, since its usualy simpler, then use media queries to add the stuff of the bigger layouts, that more offten than not have more stuff. That usualy makes it so its easier to reason about in your code. Example: you have a section that has 1 column layout in the mobile version and 2 columns in the desktop. Its a lot easier to just code the stuff for the single column and then add the second column in the media query and move things around to where they should be than to make the two columns first then override pretty much everything to force them to go single column in the media query.
Hope it helps, keep up the good work and happy coding.
Marked as helpful
0
