PRINT
PDF
WORD
CSV
EXCEL
Moocable is learner-supported. When you buy through links on our site, we may earn an affiliate commission.
CSS for JavaScript Developers
22nd July, 2024
Last date to join: 29th July, 2024
I've gotten through the first 2 modules of CSS for JavaScript Developers, but the lessons got more difficult and I fell out of the habit of doing the lessons. If anyone's interested we'd work through the modules at the same time and keep each-other accountable. We'd most likely do 1 module every week. If the price of the course is an issue please feel free to join anyway, I may be able to help out.
Advanced-beginner
English
Description
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.
Syllabus
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.
Module 0 Fundamentals
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 1 Rendering 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 2 Rendering 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 3 Modern 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 4 Flexbox
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 5 Responsive 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 6 Typography 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 7 CSS 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 8 Animation 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 9 Little 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…
CSS for JavaScript Developers
Online Courses 
Independent
Exclusively Paid 
Beginner 
Paid Certificate Get notified about new study groups every week!
CSS for JavaScript Developers
22nd July, 2024
Last date to join: 29th July, 2024
Affiliate notice
I've gotten through the first 2 modules of CSS for JavaScript Developers, but the lessons got more difficult and I fell out of the habit of doing the lessons. If anyone's interested we'd work through the modules at the same time and keep each-other accountable. We'd most likely do 1 module every week. If the price of the course is an issue please feel free to join anyway, I may be able to help out.
Advanced-beginner
English
-
TypeOnline Courses
-
ProviderIndependent
-
PricingExclusively Paid
-
DifficultyBeginner
-
CertificatePaid Certificate
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.
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.
Module 0 Fundamentals
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 1 Rendering 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 2 Rendering 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 3 Modern 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 4 Flexbox
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 5 Responsive 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 6 Typography 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 7 CSS 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 8 Animation 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 9 Little 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…
Learning is better with Cohorts
Active hands-on learning
Build assignments each week
Feedback loop
Submit your assignment, and receive feedback from your peers. Stuck on a problem?
Learn with a cohort of peers
Join a group of like-minded people who want to learn and grow alongside you
Frequently asked questions
Yes. Our study groups (all of them) are free to join
You join the group and study the MOOC together on a schedule. The exact dates, deadlines, are created by the host
This depends on the host of your group. Some groups have weekly video calls for accountability + doubt solving.
Moocable is a community where you can find study partners, mentors, or people to collaborate on projects. It's designed for people who want to upskill, but struggle with self-learning. Users often post about their skills, goals, and what they're looking to learn or work on, and others can respond to form partnerships or groups. You can join our community
29th July, 2024
Get notified about new study groups every week!
Loading...
Saving...
Loading...