← Back to Home

Week 05 - CSS Layout & Positioning

Reference files for the live-coding demos, in teaching order. Open any example and use View Source (right-click → View Page Source) to read the code — then rebuild it yourself.

▶  Open the Interactive Slides

1. Positioning Demo

static, relative, absolute, fixed, sticky

2. Flexbox Layout

Flex container and item properties

3. CSS Grid

Grid-based page layouts

4. Holy Grail Layout

Classic page layout with Grid

Tip: don't copy-paste. Type the code yourself, break it on purpose, then fix it. Use DevTools (F12) to inspect what's happening.