Home

Mastering CSS as an Advanced Beginner

edit ✏️

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:

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.

For me, the motivation to get better at CSS is so that I can apply it as a solution where it is appropriate. There are many situations where CSS is going to be the right solution over JavaScript for performance and accessibility.

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 👇