The all-new interactive learning experience designed to help JavaScript developers become confident with CSS.The all-new learning experience designed to help JS devs become confident with CSS.
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…
Trusted by developers at
As a educator myself who's made it my life's work to effectively help people learn and retain what they're learning, I'm extremely impressed by Josh's approach to teaching. It's abundantly clear that Josh knows what he's doing. Students will come away from this course with the skills they need to be more productive at CSS, paying back their investment many times over.
I had seriously high expectations for Josh’s CSS course. And honestly? It's exceeded them.
Even the first module is providing clarity on concepts I've used for years but never learned in detail. Mental models are essential, and I may finally have one for CSS.
Train multiple devs at your organization with Team Licenses. Receive a discount when you buy at least 4 copies, and manage them through our custom Team Administrator dashboard.
What I love about the way Josh teaches is that he’ll do whatever it takes to make sure a concept is clearly understood and that you’re building an accurate and helpful mental model. Josh will literally invent new tools from scratch if it will help a concept stick, even if it’s 10x more work for him.
When I’m learning something from Josh, I know it’s being taught the best way it possibly could be. There’s no person I’d trust more to really install CSS into my brain.
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
This is a complete exploration of all the CSS knowledge that modern frontend devs need to know, over a decade worth of knowledge packed in here with the same care and delight that Josh is famous for on his blog.
Josh’s blog is pure gold if you want to learn CSS. This course has all the polish you’d expect from Josh, plus the structure to make sure you're getting the complete picture.
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 and Images
The most important part of any webapp is the content! We'll learn how to wrangle text and media.
Responsive image optimization
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
Optimizing the usability around scrolling / focus
The details and polish 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 and Images
The most important part of any webapp is the content! We'll learn how to wrangle text and media.
Responsive image optimization
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
Optimizing the usability around scrolling / focus
The details and polish to build next-level user experiences
And so much more…
This curriculum barely scratches the surface. Here are some other important things included in the course:
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 squash CSS bugs effectively.
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, hypothetical sizes, and containing blocks.
Building fluid, adaptive interfaces without media queries.
How to use styled-components effectively.
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.
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.
How to design animations that serve a purpose and don't annoy the user.
Using CSS variables for color themes, dynamic calculations, and more.
How to use web fonts responsibly, ensuring the best experience for all users.
Learn bleeding-edge CSS features, and how to use them responsibly with progressive enhancement.
How to make shadows that look and feel real, based on physics and the natural world.
With Nifty Bonuses
The Ultimate Tier comes with exclusive extras:
The Video Archive
Have you ever stumbled on a particularly tricky layout or animation, and wondered how it works?
The Video Archive is a collection of in-depth build walkthroughs and explanations. Often, when a student has a question around how to build an unconventional layout, I'll record a video for the archive showing how I would implement it.
The Resource Treasure Trove
Over the years, I've amassed a fortune of tools.
The Resource Treasure Trove is a curated collection of my favourites. I share my favourite tools, generators, packages, and resources, with detailed guides for each one, showing exactly how I get the most out of it.
Using CSS and knowing CSS are two very different things. I've been using CSS for years, but I didn't know it well. This course is awesome - I've already learned a ton, and I can't wait to keep going!
Josh is one of the brightest authorities on CSS out there, bringing both deep technical insights and a fantastic amount of whimsy to all his work. I highly recommend checking his course out if you're looking to level up!
Do you support Purchasing Power Parity (PPP) / regional licenses?
Yes! If you visit this page from a country with significantly lower purchasing power, you should see a box that allows you to select a regional license at a lower price.
If you don't see the box and you're using a VPN, please try disconnecting the VPN.
What does “for JavaScript developers” mean?
This course is specifically built for folks who use a component-based JS framework like React, Angular, or Vue.
This affects things in a number of ways:
We focus on the subset of CSS that matters most to JS developers. For example, we don't cover naming methodologies like BEM because modern frameworks have tools that manage scoping for us.
As JS developers, we have concerns that other CSS developers don't have: things like working with CSS-in-JS, or building component libraries from scratch. We cover them in this course!
We look at real-world examples, CSS being used in the context of React applications.
I use your familiarity with JS to help make it easier to learn CSS! For example, if you understand how the spread operator (...) works, you already understand how the cascade works! I explain the similarities in the course.
I wanted to make a CSS course specifically for JS developers because I know how frustrating CSS can be for us! I struggled with it myself for years and years.
You don't need to be a JavaScript expert, but I do assume that you have some experience with a JS framework like React/Angular/Vue.
If you haven't used a JS framework, you'll still learn a lot about CSS fundamentals in this course, though some of the workshops will be more challenging.
How do I convince my manager to buy this course for me?
Employers want to invest in resources that help their team deliver better results more quickly. I believe CSS for JavaScript Developers is an incredibly worthwhile investment.
If you work as a software developer and aren't sure how to get your employer to put this course on the company card, I created a letter template you can use to help persuade them to pick up a copy for you.
Can I purchase multiple licenses, for my team or group?
Absolutely! You can order multiple licenses on the Teams order page.
Depending on the number of licenses you purchase, a 10-20% discount will be applied automatically (requires at least 4 licenses to qualify).
You'll also gain access to the Teams Administration dashboard. This feature is under active development, but it will soon allow you to easily add and manage licenses.
Is there a student discount?
There is indeed!
If you're actively enrolled in an educational program, you can receive 20% off the full cost of the course (the “Ultimate” package). This discount can't be combined with any other discounts, but it can be combined with regional licenses.
This discount is intended for full-time or part-time students, including coding bootcamps like General Assembly.
To receive a unique coupon code, shoot an email to support@joshwcomeau.com with proof of enrolment.
Is this a subscription? Does the license expire?
Nope! It's a one-time purchase. When you buy CSS for JavaScript Developers, you'll always have access to the course. Not only that, but you'll get all updates and improvements for free. I plan on improving this course quite a lot over the next couple years!
Are there assignments and projects? Or is this mostly a video course?
I believe that in order to learn something, you need to get your hands dirty. This course offers a ton of opportunities to practice the concepts we learn!
Throughout each module, there are exercises, small challenges, and interactive demos. Most modules end in a workshop, a larger project where we can apply the skills we've learned in a broader, more-realistic context.
That said, there are over 170 bite-sized videos in the course as well. The general format is that each lesson will mix written and video content to explain the concept, and then there are opportunities for practice and experimentation, leading up to the workshop at the end of the module.
Can I upgrade later if I buy a lower tier now?
Yes — if you purchase either the "Basic" or the "Pro" package, you'll be able to upgrade your purchase to the "Ultimate" package later on.
The upgrade cost will be the difference between what you paid originally and the current full cost of the Ultimate package.
Please note that the price of the course likely will rise in the future, and so it may cost more if you wait to upgrade.
What if I don't like the course? Is there a refund policy?
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 don't have to answer it. The refund is unconditional.)
Is this course accessible?
I've done my best to build an accessible product, but it's an area of constant improvement.
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.
All videos include closed-captions in English.
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 heard from so many developers now who have said something along the lines of “I've been writing CSS for 10+ years, and I've aleady learned so much.”
CSS is an incredibly rich language, and this course aims to give you a deeper understanding. Even if you've used CSS for a long time, there are mechanisms that can only be learned through research, and that knowledge has direct tangible improvements on the writing experience.
I'd recommend checking out these two blog posts. They're repackaged from the course. If you learn something from them, I expect you'll get a lot out of this course:
This course is not intended for absolute beginners. If you've never written any CSS before, this isn't the right course for you.
I also assume that you have some experience with a JS framework like React. You definitely don't need to be an expert, but you should be comfortable with the idea of components, and passing data between them (eg. through props).
That said, if you've been building web applications for a couple 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 (I do review this one briefly in the course though!)
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 context”, in real-world situations. All of the React-specific stuff comes preloaded, though. You won't have to mess with 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.
I created a 15-minute lesson specifically to help non-React developers learn "just enough React" to complete the workshops in this course.
Is there a Slack or Discord group?
Yes! We're using Discord for our online community. The community is already vibrant and mature, because of our Early Access period. Lots of great discussion happens there every day!
The community is moderated according to our Code of Conduct.
What if I get stuck? Can I ask questions?
Absolutely!
This course uses Discord as our community platform. There is a #help channel specifically for questions related to the material (or CSS in general). There are also specific channels for each module.
I've been spending a lot of time answering questions on Discord, but I've been thrilled to see that the community has been really active as well.
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 people 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!
Do you offer a certificate of completion?
Yep! Anyone who completes the course will be able to save a .pdf with their name on it, showing that they've completed the CSS for JavaScript Developers course.
This can be useful to claim reimbursement from your employer, to share on social media, or to just feel great about your accomplishment!
What about a receipt, so I can be reimbursed?
Right after purchasing, you'll be emailed a receipt/invoice from Paddle. You'll be able to add whatever name and address is necessary to facilitate a reimbursement.
You can also add your VAT number, to have any VAT charges reimbursed.
How long will it take to complete the course?
It's hard to say! There is a lot of content, but it's structured in such a way that it's easy to skip stuff that you already know.
Based on early feedback, most modules will take between 2 and 6 hours to complete, depending on how "thoroughly" you aim to complete them. There are 10 modules, so I expect on average it will take 40 hours to complete.
This course will get you working with CSS right away, in a friendly and fun way. I’ve been an engineer for 6+ years and this is the css course I WISH I had when I was learning CSS!
Except it's even worse, since we blame ourselves!
. 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.
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.
