Learn CSS
Structured lessons from the basics up — follow the path below in order, at your own pace.
-
1
Level 1 — Beginner Beginner 25 lessons
Start here if you have never written CSS before. You only need basic HTML see the HTML course — work through these lessons in order, since e...
Lessons in this module
What Is CSS? Why Learn CSS? What Can You Do With CSS? Getting Set Up Setting Up Your Environment Your First Stylesheet CSS Syntax and How It Is Applied Basic Selectors Combinators Attribute Selectors The Cascade, Specificity, and Inheritance Colors Units and Values Fonts and Typography Styling Text The Box Model Margins, Padding, and Borders Sizing Elements The display Property Backgrounds, Gradients, and Shadows Styling Links and Interactive States Styling Lists and Tables Styling Forms Introduction to Flexbox Comments and Style -
2
Beginner Projects Beginner 1 lesson
Build these on your own using what you learned in Level 1. Start from clean, semantic HTML see HTML /languages/html , keep all styles in an...
-
3
Level 2 — Intermediate Intermediate 18 lessons
These lessons cover specificity in depth, Flexbox and Grid in depth, positioning and stacking, responsive design with media queries, contain...
Lessons in this module
Specificity in Depth Flexbox in Depth CSS Grid Basics CSS Grid in Depth Positioning Stacking and z-index Responsive Design and Media Queries Container Queries Custom Properties Math Functions and Fluid Sizing Pseudo-Elements Advanced Pseudo-Classes and :has() Transforms Transitions Keyframe Animations Web Fonts Images, Filters, and Blend Modes Overflow and Scrolling -
4
Intermediate Projects Intermediate 1 lesson
Build these using Grid, positioning, responsive design, custom properties, and animation from Level 2. 1. Responsive Landing Page A landing...
-
5
Level 3 — Advanced Advanced 14 lessons
These lessons cover the full cascade, cascade layers, native nesting, modern color functions, scoping, CSS architecture with BEM, utility fi...
Lessons in this module
The Cascade in Depth Cascade Layers CSS Nesting Modern Color Scoping Styles CSS Architecture and BEM Utility-First CSS and Tailwind Sass and Preprocessors PostCSS and Build Tools CSS Performance Accessibility and CSS Anchor Positioning, Popovers, and View Transitions Feature Queries and Progressive Enhancement Testing and Debugging CSS -
6
Advanced Projects Advanced 1 lesson
Build these using cascade layers, modern color, architecture, build tools, and the performance and accessibility techniques from Level 3. 1....
-
7
What You Should Know Now — and What's Next 1 lesson
What You Should Know Now How CSS rules, selectors, and declarations work, and how the cascade, specificity, and inheritance decide which val...