For some reason, I’ve lately been thinking a lot about what it takes to break into the web design industry and learn CSS. I reckon it has something to do with Keith Grant’s post earlier this month on a CSS mental model where he talks about a “common core for CSS”:
We need common core tricks like this for CSS. Not “tricks” in the old sense (like how to fake a gradient border), but mental patterns: ways to frame the problem in our heads, so we can break problems into their constituent parts and notice recurring patterns. Those of us who deeply understand the language do this internally. We need to start working on distilling out these mental patterns we use for understanding layout and positioning and working with relative units, so that we can articulate them to others.
On this note, Rachel Andrew also wrote about how to learn CSS, but in this case, she focuses more on technical CSS specifics:
For much of CSS, you don’t need to worry about learning properties and values by heart. You can look them up when you need them. However, there are some key underpinnings of the language, without which you will struggle to make sense of it. It really is worth dedicating some time to making sure you understand these things, as it will save you a lot of time and frustration in the long run.
This ties in nicely with Andy Bell’s “CSS doesn’t suck” argument. Andy says that perhaps the reason why people attack CSS so often is because they simply don’t fundamentally understand it and thereby don’t respect why it works the way it does:
As I read these and other posts, I couldn’t stop thinking about the advice that I would give to a fledgling developer who’s interested in web design and CSS—where would I recommend that they start? There’s so much to cover that merely thinking about it gives me a headache.
Personally, I often start with the basics of HTML and slowly introduce folks to CSS properties like
font-family. But this sort of advice is generally only useful if you’re sitting right next to someone and have the time to explain everything about HTML and CSS: how to lay out a page, how to handle performance, how to think about progressive enhancement, etc. These topics alone are worthy of a month-long workshop—and that’s only the beginning!
Where to get started then? What sort of advice would help a student in the long run?
My experience in the industry probably matches that of a lot of other web designers: I didn’t go to school for this. I figured things out by myself while using referential sites like CSS-Tricks and Smashing Magazine to fill in the gaps. I would start with a project (like making a website for my high school band—and no, I will tell you the name of it), and in the process, I would haphazardly learn about typesetting, Sass, build tools, as well as accessible, hand-written markup.
Hear me out, but I don’t think the best way to get started in the web design industry is to learn the latest doodad or widget. Yes, you’ll have to get to that eventually. Or maybe not. At some point, getting a firm handle on flexbox and grid and memorizing a few properties is a good thing to do. But I want to teach web designers to fish and make sure that they can set themselves up for the future. And the best way to fish for CSS probably won’t be found in a particular book or classroom curriculum. Instead, I think it’s best to recommend something else entirely.
My advice can be summarized in just four words: Get an RSS reader.
After thinking about this, I figured out that the most useful advice I can give is to get involved with the community—and, for me, that has been via RSS. Find a ton of blogs and subscribe to them. Over time, you’ll not only learn about the craft, but have a hefty (and hopefully organized) set of resources that cover basics, tricks, standards, personal struggles, and news, among many, many other things.
This is still how I learn about web design today. RSS is the most important tool I have to help me continue learning about the web—from working with tiny CSS properties to giant frameworks. Sure, Twitter is a good place to learn from (and even connect with) heavy hitters in the web design industry quickly, but there’s no better technology than RSS to constantly keep yourself informed of how people are thinking about CSS and web development.
With that, I encourage you (yes, you) to get an RSS reader if you don’t already have one, or dust off the one you do have if it’s been a while. I use Reeder 3 on OSX and iOS and pair that with Feedbin. From there, subscribe to a ton of blogs or follow a lot of folks on Twitter to find their websites. There’s no shortage of material or sources out there!
This sounds like a silly thing to recommend but fitting yourself into the web design community is more important than learning about any cool CSS trick. You’ll be creating an environment where you can constantly learn new things for the future. And I promise that, once you start, finding people who care about web development and, ultimately, learning about CSS, isn’t as intimidating as it could be on your own.
Which websites should you subscribe to? Well, Stuart Robson made a wonderful list of all the websites that he subscribes to via RSS—you should be able to download that file and drop it straight into your RSS reader. Also, Rachel Andrew made a great list of websites a while back when she asked what’s happening in CSS? And of course our very own newsletter, This Week in Web Design and Development, is certainly a good place to start, too. Speaking of email and newsletters—Dev Tips by Umar Hansa is another great resource where I’m constantly learning new things about Chrome’s DevTools.
What websites do you like though? What’s the best resource for keeping up with CSS? Let us know in the comments below!
Might be a mistake to say ‘common core for css’ seeing as common core is outright ridiculed for it’s ‘method vs outcome’ ideology for hard skills like mathematics and technical thinking; something good css code writers need to make good code.
Also, just a note, when I teach css, I start with the box model. Font-family and color are not near as important as the box-model.
I agree, that’s actually a good place to start! I do so too. Not having the box model understood leads you to a mess haha
Hm, I agree that the box-model is very important. Actually its basic to working with any layout or doing even more basic stuff with CSS.
Obviously this is very subjective, but I have been teaching CSS for years now, and I agree with the premise of the article about starting with typography and continuing from there.
This lets people get a bit of sense about the language, before you start throwing complex concepts with with box-mode, Flexbox and now Grid.
“like making a website for my high school band—and no, I will tell you the name of it”
So what’s the name?
CSS-Ticks is a perfect place to learn css techniques. Codepen.io and scrimba aren’t bad either.
Great advice. And if you don’t want to pay for an RSS reader, you can use Feedly, which is free.
When starting to learn CSS back in the day, it was really hard for me to understand what was and what wasn’t possible with CSS.
It helped that CSS3 was not around at the time or fancy tools like pre-processors like less or sass or post-processors like postcss.
What I ended up thinking in my mind was that everything is a square – a box – and those boxes can appear either one below another, one next to another or layered, one on top of the other. When I viewed websites, even if something looked fancy, I thought that it was actually a set of boxes and I was just thinking about how can I replicate this effect using only squares and give the illusion to the user that it actually had rounded corners for example.
This mental approach helped me a lot. Suddenly, all I have to remember was the box model and a bunch of properties of those “boxes”. Then I moved on to positioning etc. and I took it from there one step at a time.
I would not even jump to layouts like flexbox or grid before I got a junior dev to try and build a layout without them, so they can then see the difference and what problems they are solving.
Biggest problem may be, that you need some basic knowledge to understand many blog posts today. It can (maybe) get very frustrating when you want to unterstand one thing and have to look up too many other things.
But in the end I totally agree with you. Reading about CSS is the best way to learn it.
Hey Chris! I’ve also started a similar list of developer blogs here:
My intention was to list every individuals’ blog as I came across it so that I could go back (even if they don’t provide RSS) and to encourage us to keep publishing to our own blogs instead of hosted options like Medium.
I hope that it can compliment Stu’d already terrific list.
Thanks for the advice. I can’t overemphasize the need for learning by doing aka reading articles. I’ve twitter for looking up awesome resources but I’ll be trying out this new method you suggested using RSS reader.