CSS In Depth ❤️ ❤️ ❤️ 🤍
Table of Contents
CSS In Depth is a great book. It is aimed at false beginners and aims to give you a fundamental understanding of how CSS works. On top of this it delves into best practices from the start. For example there is a lot of discussion on why relative units (rem and em) are superior to absolute units (e.g px) in most cases.
I no longer have to google 90% of the time! #
When I was new to CSS around 6 months ago I needed a good solid curriculum that would teach me the basics. I exclusively used CSS In Depth for around 2 months - in which time I got to grips with margins, paddings, flexbox and grid.
90% of the time I don’t need to use stackoverflow anymore. When I want to change certain styling I can figure it out from the tools I have available. The ability to quickly spin up a reactive webpage without needing any third party tools or guidance is really the biggest benefit I got from this book.
Full of realistic examples #
Every chapter has a webpage that needs to be stylised. The book shows off the final product and shows how to slowly get there. The author does a superb job at detailing every design decision and really showcases problem solving in CSS. The best part is that the author will often showcase multiple solutions to the same problem. He then discusses why certain approaches are better than others.
If you slowly work through the examples then you’ll learn a lot for sure.
Emphasis on best practices #
CSS has a lot of free reign in how you do things. For example, you can use relative units for sizing (em or rem) or absolute units. While freedom is great it might mean that newbies will pick up bad habits if they aren’t careful.
This book is opinionated. That means the author really pushes what he believes to be best practices - and since he’s the expert I’m okay with that!
For example, you should always design mobile first. This is because a mobile screen has more constraints so is harder to design for. When you move from mobile to desktop you will suddenly have all this extra real estate and you will find it really easy to move things around.
If you style for desktop first you may add lots of components. When you then design for mobile you will find yourself removing a lot of the components you added. It’s always easier to add than it is to remove.
Could do with a few practice problems #
While the examples are great it would be nice to have a few practice problems that the reader could solve after each chapter. Something that would flex those CSS muscles. If you are looking for practice problems then I can recommend frontend mentor.