CSS Core
Grid and flexbox past the first example, custom properties, calc with relative units, and the parts of backgrounds, overflow and transitions that surprise people. Ten topics that assume you already know the cascade.
Who it is for
Works in it, has gaps.
The behaviour people get wrong after they are already productive in the language.
You will get the most out of it if you have written CSS recently enough to read it without effort, and have been surprised by it at least once. If you are picking the language up for the first time, start with CSS Essentials and come back to this one.
How long it takes
90 graded questions at roughly 45 seconds each is about 68 minutes of answering in total.
At the default five questions a day, and because the session mixes in your other courses, expect around 18 days — call it 3 weeks — to see everything once, plus a few weeks of thinning reviews after that before it is all mastered.
A question is mastered on the third correct answer, once the gap between reviews has grown past a week — so a course cannot be finished in a weekend however long you sit with it.
Question mix
- 60 multiple choice
- 10 concept cards
- 10 predict the output
- 10 put it in order
- 10 matching questions
Syllabus
What you will be asked about
-
01
Grid Tracks & Sizing
Predict how wide a grid track ends up, and which property sized it.
-
02
Grid Placement & Areas
Place an item by line, span or area, and say where it lands without running the browser.
-
03
Flexbox Beyond The Basics
Read a flex shorthand and say exactly what the three longhands become, and how the free space is shared.
-
04
Custom Properties & Their Inheritance
Predict what a custom property resolves to, and what happens when it cannot.
-
05
calc() & Relative Units
Say what a relative length resolves against, and which font-relative values compound.
-
06
Colour Spaces & Alpha
Read any colour notation and say what it computes to, and how alpha differs from opacity.
-
07
Backgrounds, Gradients & Borders
Predict what a background or border shorthand leaves behind, and which layer is painted on top.
-
08
Overflow & Scrolling
Say what an overflow value does beyond clipping, and why scrolling appears where you did not expect it.
-
09
Transitions & Transforms
Read a transform chain or a transition shorthand and say exactly what it does and when.
-
10
Media & Container Queries
Say which query a rule answers, what it measures, and when it is evaluated.
8 more topics, and all 90 questions
CSS Core is a Pro course. One subscription opens it and every other course in the catalogue, including the ones still being written.
A question from this course
Grid Tracks & Sizing
Five items, two declared columns. What sizes the third row?
<style>
.g { display: grid;
grid-template-columns: repeat(2,1fr);
grid-auto-rows: 120px; }
</style>
<div class="g"><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i></div>Show the answer
C grid-auto-rows: every row here is implicit, so all three are 120px
It is easy to read grid-auto-rows as a fallback for the rows you did not get round to declaring, kept in reserve. There is no grid-template-rows here at all, so *every* row is implicit and grid-auto-rows sizes all of them. Declare grid-template-rows: 200px and only the first row takes it; rows two and three still come from grid-auto-rows.
The rest of the track
CSS at every depth
CSS Essentials
Selectors, specificity and the cascade, then inheritance, the box model and the units everything else is built on. Ten topics where the rule you wrote is not the rule that won, and the reason is always one of the same few.
CSS Idioms & Pitfalls
The CSS written out of habit that is wrong or fragile. !important as a first resort, id selectors for styling, magic numbers instead of intrinsic sizing, z-index escalation, and shorthands that quietly reset the longhand you set above.
CSS Advanced
Containing blocks, stacking contexts, block formatting contexts and the genuinely surprising cases of margin collapsing. Then cascade layers, :is and :where, and what happens to a custom property that is invalid at computed-value time.
CSS Performance
What actually costs: which property changes trigger layout, which only paint, and which the compositor handles alone. Layout thrash, containment, critical CSS, font loading and the image sizing that causes layout shift.
CSS Interview Questions
Specificity arithmetic, the cascade in full, box-sizing, centring in every mechanism, and flexbox against grid. Ten topics built around the questions that get asked out loud and the "what colour is this, and why" that follows.
Start CSS Core
in tomorrow’s session.
Enrol and this course joins your daily five, mixed in with everything else you are studying — 90 questions spread over about 18 days rather than dropped on you at once.
Browse the catalogue