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
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…
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. 😄
:
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!
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.
This module fills in any gaps you may have, and ensures we're all working from the same solid foundation.
We pop the hood and see how the browser renders items in flow layout
We continue our exploration of the browser's layout modes by examining positioned layout.
How does CSS fit into modern JS webapps? In this module, we learn how to take advantage of the JavaScript ecosystem.
Flexbox brought an incredibly powerful layout algorithm to the web. We learn how to make the most of it.
CSS has become a really dynamic language! We'll see how to use modern CSS features to build resilient layouts
The most important part of any webapp is the text! We'll learn to wrangle typography on the web.
CSS Grid is a revolutionary layout system for the web. We'll see how to use it responsibly, to create next-level user interfaces
Animation is a vital part of all web applications. We'll learn how to build beautiful, lush animations.
In this jumbo-sized module, we'll cover a bunch of tips and tricks to create standout experiences on the web.
This module fills in any gaps you may have, and ensures we're all working from the same solid foundation.
We pop the hood and see how the browser renders items in flow layout
We continue our exploration of the browser's layout modes by examining positioned layout.
How does CSS fit into modern JS webapps? In this module, we learn how to take advantage of the JavaScript ecosystem.
Flexbox brought an incredibly powerful layout algorithm to the web. We learn how to make the most of it.
CSS has become a really dynamic language! We'll see how to use modern CSS features to build resilient layouts
The most important part of any webapp is the text! We'll learn to wrangle typography on the web.
CSS Grid is a revolutionary layout system for the web. We'll see how to use it responsibly, to create next-level user interfaces
Animation is a vital part of all web applications. We'll learn how to build beautiful, lush animations.
In this jumbo-sized module, we'll cover a bunch of tips and tricks to create standout experiences on the web.
This curriculum barely scratches the surface.
Here are some other nifty things included in the course:
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. 😄
:
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.
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 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.
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.)
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.
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.)
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:
p { color: red; }
Knowledge of Git is beneficial, but not required.
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.
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.
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.
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:
CSS for JavaScript Developers might not be a good fit for you if you fit one of the following categories:
I can be reached at support@joshwcomeau.com! Feel free to send any questions you have.