Home / CSS
17 chaptersFoundations → advanced → projectsProgress sync when signed in

CSS: complete course

From selectors and the box model to responsive systems, Grid, animation, architecture, modern features and production UI. Every chapter ends with practical projects so you build while you learn.

0%course progress
0/17chapters done
Start course
1CSS foundations and the cascade~10 min

What you are learning

1 CSS foundations and the cascade ~10 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
body { margin: 0; }
.card { padding: 1rem; background: #111827; color: white; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
2Selectors deeply~12 min

What you are learning

2 Selectors deeply ~12 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.card { color: white; }
.card > h2 { margin: 0; }
input:focus-visible { outline: 2px solid cyan; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
3Box model and sizing~14 min

What you are learning

3 Box model and sizing ~14 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.box { width: 300px; padding: 20px; border: 5px solid white; margin: 10px; box-sizing: border-box; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
4Units, colors and backgrounds~16 min

What you are learning

4 Units, colors and backgrounds ~16 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.hero { min-height: 50vh; background: linear-gradient(135deg, #111827, #4c1d95); color: white; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
5Typography and visual hierarchy~18 min

What you are learning

5 Typography and visual hierarchy ~18 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
body { font-family: system-ui, sans-serif; line-height: 1.6; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
6Flexbox~20 min

What you are learning

6 Flexbox ~20 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.nav { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
7Grid~22 min

What you are learning

7 Grid ~22 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
8Responsive design~24 min

What you are learning

8 Responsive design ~24 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .layout { grid-template-columns: 1fr; } }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
9Positioning, stacking and overflow~26 min

What you are learning

9 Positioning, stacking and overflow ~26 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.dialog { position: fixed; inset: 10% 10% auto; z-index: 10; }
.page { overflow-x: clip; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
10Transitions and animations~28 min

What you are learning

10 Transitions and animations ~28 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.button { transition: transform .2s ease, opacity .2s ease; }
.button:hover { transform: translateY(-2px); }
@keyframes pulse { to { opacity: .5; } }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
11CSS architecture~30 min

What you are learning

11 CSS architecture ~30 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
:root { --space: 1rem; --surface: #111827; }
.card { padding: var(--space); background: var(--surface); }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
12Modern layout and functions~32 min

What you are learning

12 Modern layout and functions ~32 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.shell { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
13Forms, states and accessibility~34 min

What you are learning

13 Forms, states and accessibility ~34 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
input, button { font: inherit; }
input:invalid { border-color: crimson; }
button:focus-visible { outline: 3px solid #7dd3fc; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
14Advanced visual effects~36 min

What you are learning

14 Advanced visual effects ~36 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.glass { background: rgb(20 25 45 / .72); backdrop-filter: blur(16px); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 20px 60px rgb(0 0 0 / .25); }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
15CSS performance and debugging~38 min

What you are learning

15 CSS performance and debugging ~38 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.card { contain: layout paint; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
16Production responsive systems~40 min

What you are learning

16 Production responsive systems ~40 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.app { width: min(100% - 2rem, 1280px); margin-inline: auto; }
@media (min-width: 900px) { .app { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; } }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topNext chapter
17Capstone: high-end responsive interface~42 min

What you are learning

17 Capstone: high-end responsive interface ~42 min is a core part of CSS. Learn the vocabulary, syntax, execution or data model, why the feature exists, how it interacts with earlier concepts, and the mistakes that cause real programs to fail.

How it works

Practice the smallest useful version first, then change inputs, combine it with earlier concepts, and inspect what happens when assumptions are wrong. Production code favors clear, testable solutions over clever tricks.

Practical example

css
.panel { padding: clamp(1rem, 3vw, 3rem); border-radius: 24px; background: #111827; color: #e5e7eb; }

Practice: Change one part of the example, predict the result, run it when supported, then deliberately make one small mistake and fix it.

Projects

Do these after the explanation. Do not copy the example unchanged; build the projects from memory and use the reference only when stuck.

  1. Build a focused CSS mini-project
  2. Build a second project combining this chapter with earlier concepts
  3. Rebuild the project without copying the example
Back to topFinish course
Orbit Code · Detailed programming course · Progress can be synced when signed in · · Contact: xyroworkonly@gmail.com
Curriculum note: This course is written as original instructional material informed by current official documentation and reference material. It is not a copy of any documentation.