Mastering CSS as an Advanced Beginner
CSS is an oddly polarizing programming language. For years I've said to myself, and out loud on more than one occasion, that I 'hate' CSS.
Over the years I've got to great lengths to avoid it entirely:
- Frameworks: I've used frameworks like Bootstrap to avoid needing to understand what was going on under the hood.
- Collaborators: I've had the privilege to enjoy a division of labor that relied on other people to handle CSS on my projects, most recently Evgeniy and Vojta have absolutely killed it on that front. They made this site look nice even.
- Alternative Languages: I Used Sass a lot in my work because it made CSS "feel like a real programming language" and addressed many of the typical complaints I had at the time about CSS. CSS is a real programming language and don't trust anybody that says different.
- Utility Classes: Over the past few years the idea of utility classes in CSS has become more popular. I was first introduced to this concept with the lovely Tachyons toolset, and more recent Tailwind CSS has really been killing it bringing a polished extension of this idea that people love
None of these approaches are bad, and over the years I've developed knowledge and understanding of CSS by proximity. I know the essential terminology and have a sense of what is possible if you've truly internalized CSS.
I'm an advanced begineer with deep context and knowledge around CSS, but with a fundamental lacking of the ability to solve problems with CSS.
That's enough reason to consider enhancing my CSS skills, but beyond that I'm floored by the creative expression that CSS mastery can provide. Drawing, animation, and other visual artistry using CSS is wonderful experience. Like any language, mastery of CSS can open up new doors for expression that wouldn't otherwise be possible.
I posted about my desire to get better at CSS on Twitter:
To my surprise it's one of the most popular tweets I've ever posted!
I'm not alone. A bunch of people are out there looking to improve their CSS skills and cross the chasm from advanced beginner to expert.
What's the plan?
The replies to the twitter thread are a gold mine of amazing resources for leveling up as a CSS developer. Courses, articles, books, documentation, and tutorials of every flavor and stripe have been shared. I took notes on all the recommendations that looked like they would help me.
Frankly it's a bit daunting, but my plan is to first do an honest self-assessment and try to gauge where my personal skill level is at currently. This means I will start with the remedial "hand holding" beginner level content that will be relatively quick for me to skim through, take notes, and realistically decide where my knowledge is at right now.
This process should help me discover a set of essential questions and big ideas that mastering CSS can help me understand so I will try and capture those as concepts that I can refer to and refine as I gain a deeper understanding of the CSS in a more practical way.
At the same time I will be using the W3C CSS Spec and the Mozilla Developer Network's CSS Documentation as my primary reference sources that I will use to inform the entire process. The docs are expansive and interesting (if you're into that sort of thing!) and will provide a consistent source of truth that I can reference in my notes.
From there I will move to more specific books, courses, articles, and tutorials that provide a higher level look at CSS and pave the way to mastery and expertise.
One important aspect of learning any new skill is performance tasks, or actually building shit instead of just reading books. There are a lot of resources that are focused on learning by example and after I've assessed my skills these project based approaches will start to make sense.
I'll be updating this post and sending updates to my newsletter if you'd like to sign up there's a form down there 👇