Syllabus & Study Plan
What the CSS course covers, what you'll be able to do by the end, and a suggested seven-week schedule with a checkpoint each week. Go at your own pace — CSS rewards experimenting, so leave time to play in the editors.
Who this course is for
People who know basic HTML and want to make pages look good, developers who copy CSS from the internet without being sure why it works, and anyone who learned CSS years ago and wants to catch up with modern layout, colour and selector features.
Prerequisites
Comfort with HTML elements, attributes, classes and page structure. If that's new, start with the HTML course.
Learning outcomes
By the end of the course you will be able to:
- Attach CSS to a page and target any element with the right selector.
- Predict which rule wins using the cascade, specificity, inheritance and layers.
- Choose suitable units and colour formats, and build a design system with custom properties.
- Control boxes, spacing, borders, shadows, overflow and typography, including web fonts.
- Build any common layout with Flexbox and Grid, and position elements precisely.
- Make designs responsive with fluid values, media queries and container queries.
- Add transforms, transitions, keyframe and scroll-driven animations that respect user preferences.
- Use modern features —
:has(), nesting,@layer,@scope,light-dark()— confidently. - Write CSS that is accessible, maintainable and fast, and organise it for a real project.
Course outline
| Part | Lessons | Focus |
|---|---|---|
| 1. Getting Started | 01–08 | Syntax, selectors, cascade, inheritance |
| 2. Values & Colour | 09–14 | Units, colours, backgrounds, gradients, variables, functions |
| 3. Boxes & Text | 15–22 | Box model, borders, shadows, typography, fonts, lists and tables |
| 4. Layout | 23–35 | Positioning, Flexbox, Grid, responsive design, container queries |
| 5. Visual Effects | 36–42 | Transforms, transitions, animations, filters, clipping, scrolling |
| 6. Modern CSS & Good Practice | 43–50 | Modern selectors, nesting, layers, themes, forms, accessibility, architecture, project |
Seven-week study plan
Plan on three to four hours a week, including time experimenting in the live editors.
Week 1 — How CSS works
Checkpoint: style a plain article page using only an external stylesheet. Use at least five kinds of selector, and explain in a comment why one rule beats another.
Week 2 — Values and colour
Checkpoint: create a :root block of design tokens (colours, spacing, font sizes) and restyle your article page using only those tokens, with a fluid heading size.
Week 3 — Boxes and text
Checkpoint: build a set of cards with consistent spacing, rounded corners and shadows, a web font with good fallbacks, and a striped, readable data table.
Week 4 — Layout I: flow, positioning and Flexbox
Checkpoint: build a sticky header with a Flexbox navigation bar, a badge positioned on a card's corner, and a media object (image beside text).
Week 5 — Layout II: Grid and responsive design
Checkpoint: lay out a full page with named grid areas that collapses to one column on phones, plus a card component that changes layout with a container query.
Week 6 — Visual effects
Checkpoint: add hover transitions, a loading animation, a scroll-snapping image carousel and a cropped hero image — with all motion disabled under prefers-reduced-motion.
Week 7 — Modern CSS and the final project
Final project: complete the landing page with at least three of its challenges, organised in cascade layers, with a working dark mode. Check it with Stylelint and Lighthouse, then take the quiz and aim for 25 out of 30 or better.
Faster tracks
- Two-week intensive (about 12 hours a week): Parts 1–3 in week one, Parts 4–6 in week two.
- Already write CSS? Take the quiz first, then focus on lessons 07, 13–14, 29–34, 38, 43–46 and 48, which cover modern features and the areas most often misunderstood.
Practice resources
- Playground — a blank editor for experiments.
- Exercises — 37 fill-in-the-blank tasks and four styling challenges.
- Quiz — 30 questions with explanations.