3 ms·
I have done a lot of backend and front-end coding over the years I've found CSS is complex just due to the sheer depth of detail, but not hard once you get th
by mattlondon 8y ago
I have done a lot of backend and front-end coding over the years
I've found CSS is complex just due to the sheer depth of detail, but not hard once you get the hang of the basics.
The key areas that will probably help you the most are flexbox and grids. These are modern things that will make your life in CSS 10x easier and more productive. With flexbox and grid it becomes trivial to do "hard" things like centering div's, full-height divs, footers etc etc. Use flexbox for laying things out in one dimension (e.g. "I want these related <things> to appear in a row/column") and use grid for doing two dimensional layouts (e.g. "I want a bar across the top and bottom and then two columns in the middle"). Mix and match flexbox and grid (e.g. use flexbox inside of a grid area) and you've got 90% of the CSS done in my experience.
This guide for flexbox is awesome and spells it all out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (although their site's visual design is the worst type of hideous garbage IMO, but I can forgive them that for the content)
The last 10% is fiddling around with colours and margins and font sizes etc. I'm no designer and rely on the UX and Visual Designer to tell me what colours/fonts/margins/etc to use, but regardless there is actually something very very satisfying about nailing the CSS and seeing something ugly transform into something really nice right before your eyes.
Also a final top tip is to get familiar with your dev tools in your browser of choice. Doing "real time" edits in the browser (in CSS but also DOM & JS too) then updating the code in your IDE is something I do frequently.