🎨 CSS

Make web pages look right on every screen: colours, spacing, layout and responsive design.

1. Getting started with CSS
What CSS does, how a rule is built, and the three places you can write it.
2. Selectors
Pick exactly the elements you want by tag, class, id, position or state.
3. Colours and units
Hex, rgb and hsl colours, plus when to use px, rem, % and viewport units.
4. The box model
Every element is a box of content, padding, border and margin.
5. Text and fonts
Readable type: font stacks, size, line height and line length.
6. Display and position
Block, inline, relative, absolute, fixed and sticky explained.
7. Flexbox
Line items up in a row or column and share the space between them.
8. CSS Grid
Lay a page out in rows and columns at the same time.
9. Responsive design
Build for phones first, then adapt for larger screens.
10. Transitions and animation
Smooth hover effects and keyframe animation, used with restraint.
11. CSS quick reference
The properties you will use every day, on one page.

Finished? Go deeper in the CSS learning path and earn a free certificate.