CSS can be fun. I promise.

For a lot of front-end developers, CSS is the most frustrating part of their work.

When you make a mistake in Typescript, you get a helpful tooltip telling you exactly what you did wrong. In CSS, by contrast, you're left in the dark, without any clues about why you're not getting the result you expected.

These constant bewildering surprises take us out of flow state, and shake our confidence. No wonder so many of us don't enjoy writing CSS!

Despite all appearances, though, CSS is actually a deeply consistent and robust language. It feels unpredictable because there are complex systems involved, systems that are totally invisible to us.

CSS is an implicit language.

It doesn't matter how many years you spend practicing CSS—if you don't learn how its underlying systems work, your mental model will always be incomplete.

Think about how most of us learn CSS: we learn how individual properties work, instead of focusing on how layout algorithms use those properties as inputs. We learn “cool tricks” for specific situations, instead of concepts that can be applied broadly to any situation.

It's like trying to solve a puzzle when you're missing pieces. Except it's even worse, since we blame ourselves!

Nobody is born with CSS skills.

We assume that we're missing some sort of “CSS gene”, that we're just not good at this stuff. And it's the most unfair self-criticism in the world. If you learn the rules of CSS, you can be good at it too!

Becoming proficient with CSS is game-changing. All of a sudden, the most frustrating part of your job becomes fun! As JS developers, we spend so much energy trying to avoid writing CSS, when we could be embracing it, and using it to build world-class user interfaces.

So how do you learn the rules of CSS? Well, you can spend countless hours spelunking through MDN documentation and CSSWG specifications, and then spend a few years practicing. That's what I did. It was undeniably effective—the end result is incredibly worthwhile—but the journey was long and arduous.

I want to help expedite that process for you. Over the past year, I've been packaging up all that knowledge and experience into a comprehensive self-paced online course.

I call it…

Learn more in this short video

Coming soon.

This course is under active development. It will be released in Early Access on March 10th, 2021.

You can subscribe to receive periodic updates about this course! I send behind-the-scenes updates every few weeks, and subscribers will be the first to know when CSS for JavaScript Developers goes on sale. 😄

:

No spam, no nonsense. You can unsubscribe at any time.

Hi, I'm Josh!

Believe it or not, the very first non-trivial web application I built was an online education platform! My friend worked as a tutor, and he wanted a way to assign math problems to his students. I built it with PHP, MySQL, and jQuery. It was a dog's breakfast, but it worked.

I abandoned that project when I discovered Khan Academy, a world-renowned non-profit on a mission to provide a free, world-class education online. Years later, I would join as a software engineer, to help build that platform! I got to work alongside some of the smartest pedagogical minds in the world, and I learned a whole lot about how to create effective educational content.

I've spent the last couple years working in senior engineering roles at organizations like DigitalOcean and Gatsby Inc., building tools to help developers get their ideas off the ground.

For the past few years, I've also taught part-time for Journey Education, developing curriculum and leading web-development courses at Concordia University.

It's been almost a decade since I built my first educational platform. I've learned a lot about education since then, and it's high time I do something with that knowledge and experience.

CSS for JavaScript Developers is the culmination of my career, and I genuinely believe it'll be profoundly useful. I'm so excited to help you on your journey with CSS!

Josh W. Comeau
Instructor, CSS for JavaScript Developers

TheCurriculum

This curriculum teaches everything you need to know to build modern, polished web experiences. It's a no-fluff distillation of the skills I've learned over 15 years.

130
Lessons
40
Hours of
content

Module 0Fundamentals

This module fills in any gaps you may have, and ensures we're all working from the same solid foundation.

  • How browsers consume CSS
  • Syntax and terminology
  • Basics of colors, units, typography

Module 1Rendering Logic I

We pop the hood and see how the browser renders items in flow layout

  • Inheritance and the cascade
  • The Box Model in depth
  • The need-to-know quirks about Flow layout

Module 2Rendering Logic II

We continue our exploration of the browser's layout modes by examining positioned layout.

  • Understanding relative, absolute, fixed, and sticky positions
  • Avoiding the z-index wars
  • Managing overflow, hidden content

Module 3Modern Component Architecture

How does CSS fit into modern JS webapps? In this module, we learn how to take advantage of the JavaScript ecosystem.

  • Using tooling to solve specificity challenges without naming conventions
  • How to build a component library from scratch
  • How to use CSS-in-JS effectively

Module 4Flexbox

Flexbox brought an incredibly powerful layout algorithm to the web. We learn how to make the most of it.

  • Understanding grow, shrink, and basis
  • A dozen common layouts with Flexbox
  • Responsiveness without media queries

Module 5Responsive and Functional CSS

CSS has become a really dynamic language! We'll see how to use modern CSS features to build resilient layouts

  • Building amazing mobile/tablet experiences
  • Dynamic CSS with vw/vh, calc, min/max/clamp…
  • The awesome power of CSS Variables

Module 6Typography

The most important part of any webapp is the text! We'll learn to wrangle typography on the web.

  • Text rendering quirks
  • Web font best practices
  • Variable fonts and the future of typography

Module 7CSS Grid

CSS Grid is a revolutionary layout system for the web. We'll see how to use it responsibly, to create next-level user interfaces

  • When to use CSS Grid vs. Flexbox
  • Understanding the layout algorithm at a deep level
  • How to provide fallbacks for older browsers

Module 8Animation and Interaction

Animation is a vital part of all web applications. We'll learn how to build beautiful, lush animations.

  • Transition and animations from first principles
  • How to design animations
  • Animation performance

Module 9Little Big Details

In this jumbo-sized module, we'll cover a bunch of tips and tricks to create standout experiences on the web.

  • Aesthetics with gradients, box-shadows, clipping, and filters
  • Tackling notoriously-tricky UIs, like nested click targets
  • Things I've learned to build next-level user experiences

Module 0Fundamentals

This module fills in any gaps you may have, and ensures we're all working from the same solid foundation.

  • How browsers consume CSS
  • Syntax and terminology
  • Basics of colors, units, typography

Module 1Rendering Logic I

We pop the hood and see how the browser renders items in flow layout

  • Inheritance and the cascade
  • The Box Model in depth
  • The need-to-know quirks about Flow layout

Module 2Rendering Logic II

We continue our exploration of the browser's layout modes by examining positioned layout.

  • Understanding relative, absolute, fixed, and sticky positions
  • Avoiding the z-index wars
  • Managing overflow, hidden content

Module 3Modern Component Architecture

How does CSS fit into modern JS webapps? In this module, we learn how to take advantage of the JavaScript ecosystem.

  • Using tooling to solve specificity challenges without naming conventions
  • How to build a component library from scratch
  • How to use CSS-in-JS effectively

Module 4Flexbox

Flexbox brought an incredibly powerful layout algorithm to the web. We learn how to make the most of it.

  • Understanding grow, shrink, and basis
  • A dozen common layouts with Flexbox
  • Responsiveness without media queries

Module 5Responsive and Functional CSS

CSS has become a really dynamic language! We'll see how to use modern CSS features to build resilient layouts

  • Building amazing mobile/tablet experiences
  • Dynamic CSS with vw/vh, calc, min/max/clamp…
  • The awesome power of CSS Variables

Module 6Typography

The most important part of any webapp is the text! We'll learn to wrangle typography on the web.

  • Text rendering quirks
  • Web font best practices
  • Variable fonts and the future of typography

Module 7CSS Grid

CSS Grid is a revolutionary layout system for the web. We'll see how to use it responsibly, to create next-level user interfaces

  • When to use CSS Grid vs. Flexbox
  • Understanding the layout algorithm at a deep level
  • How to provide fallbacks for older browsers

Module 8Animation and Interaction

Animation is a vital part of all web applications. We'll learn how to build beautiful, lush animations.

  • Transition and animations from first principles
  • How to design animations
  • Animation performance

Module 9Little Big Details

In this jumbo-sized module, we'll cover a bunch of tips and tricks to create standout experiences on the web.

  • Aesthetics with gradients, box-shadows, clipping, and filters
  • Tackling notoriously-tricky UIs, like nested click targets
  • Things I've learned to build next-level user experiences
And so much more…

This curriculum barely scratches the surface.
Here are some other nifty things included in the course:

  • Weekly office hours, on a rotating schedule so that everyone can join regardless of timezone.
  • A Discord community, with an enforced Code of Conduct so that everyone feels welcome.
  • A strong focus on accessibility — instead of an "accessibility module", it's weaved into every module.
  • Learn how to structure our CSS at scale, avoiding the explosion of complexity that typically comes with large projects.
  • Working with legacy browsers: how to support IE while still being able to write modern, enjoyable CSS.
  • The fundamentals that will supercharge your ability to work with CSS frameworks like Tailwind.
  • Building a design from a mockup using Figma (a popular, free-to-use design tool).
  • How to use the browser devtools to effectively debug CSS bugs.
  • No BEM or SMACSS — we'll see how modern tooling provides the same benefits but without the friction.
  • Understanding hidden-but-vital mechanisms like stacking contexts and containing blocks.
  • Understanding CSS performance, knowing where the bottlenecks are.
  • Building fluid, adaptive interfaces without media queries.
  • How to use styled-components effectively.
  • How to develop a design intuition.
  • Using optical alignment to create next-level polished interfaces.
  • The rich world of selectors, and how to use combined selectors for optimal results.
  • How to write meaningful semantic HTML.
  • Building beautiful and accessible form controls.
  • Understanding how the browser applies CSS through inline styles, the <style> tag, and external stylesheets.
  • Mini-games that help you build deep intuitions for complex mechanics.
  • Everything you need to know about margins (there's a surprising amount!)
  • Knowing when and how to use global styles in a component-focused application.
  • Managing overflow text with an ellipsis, both single-line and multi-line.
  • Using a CSS Reset to start with a cross-browser blank canvas.
  • Building whimsical effects like a folding envelope.
  • Using CSS variables for color themes, dynamic calculations, and more.
  • Learn bleeding-edge CSS features, and how to use them responsibly with progressive enhancement.

Coming soon.

This course is under active development. It will be released in Early Access on March 10th, 2021.

You can subscribe to receive periodic updates about this course! I send behind-the-scenes updates every few weeks, and subscribers will be the first to know when CSS for JavaScript Developers goes on sale. 😄

:

No spam, no nonsense. You can unsubscribe at any time.

Frequently Asked Questions

What's the launch plan?

This course will launch in “Early Access” on March 10, 2021 at 12:00pm EST.

If you're familiar with Steam's “Early Access” program, the idea is similar. You'll gain instant access to the course in its current state, and receive incremental updates as we go. Initially, 5 of the course's 10 modules will be available.

One of the neat things about Early Access is that you'll have a lot of influence over the direction of the course. Your feedback will help shape the final product. I'll be happy to help however I can to make sure you're having a great experience.

It can also be thought of as Beta access. You may run into some bugs, and the product might not feel totally polished yet.

When the course launches in Early Access, registrations will only stay open for 5 days.

A full launch is planned for Summer 2021.

What will the course cost?

I haven't made a final decision on pricing, but I'm currently planning on setting the Early Access price somewhere between $100-$200.

By preordering, you'll gain instant access to the first 5 modules, but you'll also be purchasing the highest tier available, including all of the soon-to-be-released content and bonuses. You'll also gain access to weekly Office Hours.

I expect that this premium tier will cost >$350 when the course is complete, so the Early Access price will be deeply discounted.

I live outside the US, do you support Purchasing Power Parity?

I recognize that the cost of this course can be disproportionately significant depending on where in the world you live.

It's not something I can support for Early Access — I've been hustling to get this course shipped, and most of my time and attention has gone into the course itself. It's absolutely on the roadmap, though! I hope to launch in the summer with full PPP support.

What if I don't like the course?

If you're not happy with the course, for any reason, you can reach out by email in the first 30 days and I'll refund your purchase, no questions asked.

(Actually, I will ask why you weren't happy, since that feedback will help me make the course better! But you'll get a refund no matter what.)

Is this course accessible?

This course is not yet as accessible as I want it to be.

In terms of navigation, the course platform and all of its exercises, minigames, and interactive elements should be controllable through a keyboard alone, no mouse required. As it happens, the early days of the course development were done exclusively through dictation and eye-tracking, no mouse or keyboard.

In terms of color, all text and UI elements should have AA-level contrast or higher. I've also done my best to support colorblind folks, by never communicating anything exclusively through color/hue.

In terms of videos: I do not yet have any captions for videos included in the course, nor do I have text-based alternatives. This is absolutely something I plan to support, but I also recognize that I will likely need to re-record many of the videos in my course, as I iterate based on feedback, and I don't yet have the budget to pay for transcription. I hope to have full closed-caption support by Summer 2021.

For folks with little or no eyesight, I've struggled to imagine how I could build a quality course on CSS, given CSS' visual nature. I'm sad to say that it's a challenge I have not yet solved.

I already feel pretty comfortable with CSS! Will I still learn a lot in this course?

Absolutely!

I've been writing CSS since 2006, and I felt pretty darn comfortable with the language. Creating this course, though, has taught me just how much I was missing. I've learned a ton throughout this process, and all of those learnings are in the course. Unless you're a top-level CSS expert, I think you'll still get a lot out of the course.

(To be clear, though, the course's primary objective is to help developers who do feel frustrated by the language. You may find yourself skipping the occasional lesson because you already know what it covers.)

Is this course beginner-friendly?

This course is not intended for absolute beginners. If you've never written any CSS before, this isn't the right course for you.

That said, I don't assume very much experience. If you've been building web applications for a few months, or have just graduated from a coding bootcamp, this course is perfect for you.

Here are some things I assume you know:

  • You understand CSS syntax like p { color: red; }
  • You've used a JS framework like React
  • You know how to use a terminal to run Node/NPM projects


Knowledge of Git is beneficial, but not required.

Is this course only for React developers?

Definitely not! Though I do expect you to have at least some experience with a component-based JavaScript framework (Angular, Vue, Svelte…).

Certain modules and workshops do use React, since I want to explain the concepts in "real-world" situations. All of the React-specific stuff comes preloaded, though. You won't have to mess with props or state or any advanced React features. You will need to write some JSX, but I'm confident you won't struggle with it if you're familiar with another framework.

Is there a Slack or Discord group?

Yes! We're using Discord for our online community. I hope and expect that it will be a vibrant place to discuss the course materials. You'll be invited to join the community after purchasing the course. This is available during the Early Access period.

The community is moderated according to our Code of Conduct.

What if I get stuck? Can I ask questions?

Absolutely, 1000% yes!

This course uses Discord as our community platform. There is a #help channel specifically for questions related to the material (or CSS in general).

I'll also be hosting weekly Office Hours, so if you'd like to ask your question in person, you can join these calls and I'll be glad to help you out. The specific time of day rotates every week (between 9AM EST and 4PM EST), so hopefully this resource will be available no matter where in the world you live.

You're welcome to message me directly on Discord as well, though I can't guarantee a prompt response.

Is this course right for me?

This course is built for JavaScript developers who wish they found CSS less frustrating.

Here are some examples of the kinds of students I think would benefit the most from CSS for JavaScript Developers:

  • React/Angular/Vue/Svelte developers who feel their productivity hit a wall when they have to take on a CSS task.
  • Recent graduates (Bootcamp or college) looking to level-up their skills as they embark on their new careers.
  • Full-stack / Backend devs who want to invest more in their front-end skillset.
  • Early-career devs hoping to get better and faster at building top-notch user interfaces.
  • Experienced front-end developers who feel OK with CSS, but still find themselves getting tripped up by it from time to time.
  • Developers looking to modernize their outdated CSS knowledge.

CSS for JavaScript Developers might not be a good fit for you if you fit one of the following categories:

  • You're brand-new to front-end development, and are still picking up the fundamentals of CSS and JavaScript.
  • You've never worked with a component-based JS framework like React, Vue, Angular, Ember, Svelte…
  • You're hoping to learn design skills. This course does cover some design principles, but it's primarily about using CSS to implement pre-existing designs.
  • You're not serious about learning CSS. If you're mostly looking for a few quick tips and neat tricks, you can find those on Twitter for free!
I have a question not listed here!

I can be reached at support@joshwcomeau.com! Feel free to send any questions you have.