Web Dev Academy Core languages · CSS Tool 2 / 64
Core languages

CSS

Styling and layout. But CSS is far more than colours — it can animate, build 3D, react to state and lay out entire pages, all with no JavaScript.

Demo 01

Interactive tabs — pure CSS

Hidden radio buttons + the :checked selector make fully working tabs without a single line of JavaScript. Click them.

CSS controls colour, type and spacing — the look of everything.
Flexbox and Grid arrange elements into responsive layouts.
Transitions and keyframes bring the page to life.
Demo 02

Animation with @keyframes

CSS animates on its own with @keyframes + animation. A spinning gradient ring and a flowing colour bar — both looping forever, no JS.

Demo 03

3D flip on hover

perspective + transform: rotateY() + backface-visibility create real 3D. Hover the card.

Hover me
👋 Backside!
Demo 04

Switch layouts with :checked

The same boxes, re-arranged from Flexbox to Grid — toggled purely with CSS.

1
2
3
4
5
6
7
8
Demo 05

The :has() parent selector

Modern CSS can style a parent based on its children. Tick the box — the whole card turns green via label:has(input:checked).

Demo 06

Smooth transitions

A simple transition turns an instant change into a smooth one. Hover the card to see it lift.

Hover me
i
Built with only CSS — all interactivity above (tabs, layout switch, flip card, the green-on-check card) uses CSS selectors like :checked, :hover and :has() with no JavaScript at all. Only HTML provides the structure for the CSS to style.

↑ All 64 tools