Learn HTML, CSS and JavaScript
Twenty-one lessons, each one a working example you can take apart. Edit the code on the left and the preview updates as you type. Nothing can break — every lesson has a reset button.
The track 0 of 21 done
HTML · 1 of 21
Loading…
Try this
HTML
CSS
JavaScript
Result
Console
How to use this
Change things and see what breaks. That is the whole method. Every lesson starts from code that already works, so you are never debugging from nothing — delete a line, change a number, and watch what moves. Reset puts it back.
The console is your instrument.
console.log() anything you are unsure about. When
JavaScript goes wrong it will tell you, in the panel under the
preview, on which line.
Tab inserts two spaces inside the editors rather than jumping to the next control. Press Escape first if you want to tab away. Your work is saved as you type, per lesson, in this browser.
The preview adds two lines of its own CSS — a little padding and a system font — so the examples are not painful to read. Everything else you see is exactly your code.