CSS
17 lessons on styling, the cascade, sizing, Flexbox, Grid, responsive layouts, RTL and motion, with interactive playgrounds and a product-card project.
Every chapter is an island. Finish its lessons, beat its challenge, and sail on ⛵
Island 1
Styling foundations
- What is CSS?The shape of a rule: a selector and properties.6 min3 🎮
- Cascade and specificityUnderstand why one declaration wins.8 min2 🎮
- Selectors and element statesElement relationships, hover and focus-visible.8 min1 🎮
- Colours and textColour formats, font size and family.7 min2 🎮
Island 2
Boxes and sizing
Island 3
Layout and responsiveness
- FlexboxLine items up and spread them in two lines.9 min3 🎮
- CSS GridRows and columns made easy for whole-page layouts.8 min2 🎮
- Positioning and stackingrelative, absolute, fixed and sticky.8 min1 🎮
- Responsive designOne page that looks right on phones and computers.8 min2 🎮
- Container-based responsivenessA card adapting to its available space.8 min1 🎮
Island 4
Design values, direction and motion
- CSS custom properties and functionsShared values, fallbacks and calculated sizes.8 min1 🎮
- Logical properties for RTL and LTRUse inline and block instead of assuming left and right.8 min1 🎮
- CSS transitions and transformsAnimate state changes while respecting reduced motion.8 min1 🎮
- Keyframes and bounded animationSequence motion without requiring hover.8 min2 🎮
- Project: a product cardCombine colour, spacing and Flexbox in a polished card.10 min1 🎮