CSS Syllabus
The iwantcoding.com CSS syllabus is the recommended order to go through the tutorial. Stick to it on a first pass; jump around once you've mastered the fundamentals.
The path
- Foundations — Introduction, Syntax, Selectors, How To.
- Visuals — Colors, Backgrounds, Borders, Margins, Padding.
- Box model — Box Model, Box Sizing, Height/Width, Max-width.
- Typography — Text, Fonts, Web Fonts, Text Effects.
- Layout — Display, Position, Float, Z-index, Overflow.
- Modern layout — Flexbox (intro, container, items), Grid (intro, container, items).
- Selectors deep-dive — Combinators, Attribute selectors, Pseudo-classes, Pseudo-elements.
- Reusability — Variables, Specificity, !important.
- Responsive — Media Queries, RWD intro, RWD images, RWD videos.
- Advanced visuals — Gradients, Shadows, Transitions, 2D/3D Transforms, Animations.
- Components — Buttons, Navigation Bar, Dropdowns, Forms, Tooltips, Pagination, Image Gallery.
- Capstone — Website Layout, build a small site (Website challenge).
Pace
| Pace | Time to finish |
|---|---|
| Casual evenings | 4–6 weeks |
| Daily, 1 hour | 2–3 weeks |
| Sprint (full-time) | 3–5 days |
Tip: Don't read the whole syllabus first. Read one section, do its exercise and quiz, then move on. Forward momentum > perfect order.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Syllabus</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
What is the first major section of the CSS syllabus?
Answer (one word):
You always start from the ____.
Discussion
Loading…