Markup without magic
A course about why a page looks the way it does. We take the flow, the box model, flex and grid down to their causes rather than recipes, and build real layouts from the «Interfaces in Figma» course.
What you will be able to do
11 modules, one project
01 How a page is built3 lessons · 2 h 16 minOpen
We start with a file and a browser. We look at how tags fold into the document tree and why semantics decide what a search engine and a screen reader will hear.
02 Selectors, the cascade and the box model3 lessons · 2 h 07 min
Where the browser gets the final value of a property: selector, specificity, inheritance. Then we work out a block's width by hand and see where padding and borders go.
03 Flow and positioning3 lessons · 2 h 06 min
Normal flow is the default state, and most oddities are explained by it. We cover margin collapsing, the four kinds of positioning and the stacking order.
04 Flexbox3 lessons · 2 h 24 min
Flexbox for rows and columns. We learn to read an element's behaviour through the axes, the free space and the three growth properties, instead of guessing values.
05 CSS Grid3 lessons · 2 h 20 min
Grid for two-dimensional layouts: a catalogue, a gallery, a complex header. We define rows and columns, name areas and build the page without extra wrappers.
06 Typography and fonts3 lessons · 2 h 06 min
We move the typeface from the design onto the page: file formats, weights, fallbacks. We cover size, line height and line length — readability depends on them.
07 Responsiveness and breakpoints3 lessons · 2 h 10 min
Breakpoints come from the design, not from a list of popular devices. Flexible sizes let you write fewer media queries and get a predictable result at any width.
08 States and transitions2 lessons · 1 h 33 min
Hover, focus, press, disabled — each one switches on by its own rules. We add transitions so the page stays fast even on a weak device.
09 Accessibility2 lessons · 1 h 42 min
We go through the page with the keyboard only, check text contrast and listen to what the screen reader says. Most of the fixes turn out to be simple once you know what to look for.
10 Forms2 lessons · 1 h 35 min
A form is where markup meets the user's data. We tie the field to its label, show errors clearly and avoid breaking the browser's built-in behaviour.
11 Assembly and publishing2 lessons · 1 h 35 min
The final module: we lay out files, fonts and images in folders, go through the pre-publish checklist and put the finished page online step by step.
What you get
Videos with timecodes and a written version: you can return to the right spot without rewatching the whole lesson.
The same files the school's designers learn on: you build a real layout, not a simplified teaching picture.
A starter template and a finished solution: compare your code with the reference and find the point where the behaviour diverged.
Markup, contrast, keyboard behaviour and responsiveness — point by point, so nothing is forgotten before you publish.
The whole first module is open
Watch the lessons of the first module and the first task. If the format does not suit you, you have lost nothing.