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
Stop wrestling
with CSS.
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.
Taught by Josh W Comeau
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…
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.
Learn more in this short video
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.
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.
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
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.
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
Lessons40
Hours ofcontent
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.
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!
Frequently Asked Questions
I live outside the US, do you support Purchasing Power Parity (PPP)?
When this course launches in full, I plan on supporting regional pricing, also known as Purchasing Power Parity (PPP).
I'm still doing research, but my expectation is that the cost may be reduced by up to 75%, depending on where in the world you reside.
What will this course cost?
CSS for JavaScript Developers is a premium course.
Exact pricing is not 100% decided, but I expect to offer packages that range from US$129 to US$349 or so, for folks in the US.
This course will use region-based pricing, so the exact amount will vary depending on your location.
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 interactive exercises, small challenges, and interactive demos. At the end of each module (starting from Module 1), there is a larger project, where we apply the concepts in a broader, realistic context.
That said, there are over 75 bite-sized videos in the first 5 modules alone! Videos and articles allow us to dive deep into the theory and show off specific techniques. They can also be a fun change of pace! In this course, we bounce constantly from passive to active.
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 don't have to answer it. The refund is unconditional.)
Is this course accessible?
Accessibility is a broad topic. 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 will support closed-captions (though this isn't available yet, for Early Access students). I hope to also offer transcripts.
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:
Is this course beginner-friendly?
It depends on what you mean by "beginner" 😅
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, you don't need heaps of 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 (I do review this one briefly in the course)
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 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.
I created a 15-minute lesson specifically to help non-React developers learn enough of the syntax to complete the workshops in this course.
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). There are also specific channels for each module.
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!
Do you offer team licenses?
In the future, I plan on building team features into my platform, so that companies can use this course to train their development team.
Unfortunately, I don't support anything like that right now. My hope is that by the end of 2021, I'll have something ready in this space.
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 necesssary 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.
I have a question not listed here!
I can be reached at support@joshwcomeau.com! Feel free to send any questions you have.
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!
Josh is basically the best teacher I have ever encountered online. And I manage a team of teachers for a living!