Every file, every lesson
Download a file, open it in vscode.dev, and start changing things. Nothing here expires — old lessons stay up so you can keep tinkering.
One file, nothing else needed. Download it, open it in vscode.dev, and it already works — then start breaking it.
The excuse generator from the slides, as a complete working page. Every line is commented for someone who has barely coded, and the three remix challenges are waiting at the bottom of the file.
⬇ Download the generatorDNS, a drag-and-drop puzzle and build time on the Class 3 files. Grab those below if you still need them.
Make a folder first — call it something like
my-project — then download all three files into it.
They have to sit together, or your page will load with no styling.
The skeleton of your project. A header, one example card and a footer, with a checklist at the top telling you what to change first.
⬇ Download index.htmlAll the looks. Four colour variables sit at the very top — change those four lines and the whole site changes colour.
⬇ Download style.cssThe moving parts. One button that proves all three files are talking to each other, plus ideas for what to try next.
⬇ Download script.jsYour first webpage. A heading, a paragraph, a list, a styled box and a button that runs real JavaScript. Every part is commented so you always know what you are looking at.
⬇ Download starterHacker Mode. Five missions that get harder as you go, with hints but no hand-holding. Nobody is going to explain these to you — that is the point.
⬇ Download Hacker ModeThis one was all hands and screwdrivers — we took a real laptop apart and found the CPU, the RAM and the storage. No files needed.
Go to vscode.dev. For a single file (Class 2, Class 5) choose
Open File. For a project folder (Class 3) choose
Open Folder — opening the files one at a time breaks
the link between them.
Change anything you like, then press Ctrl + S (or Cmd + S) to save.
Open the file in a browser tab and hit refresh. Your changes appear. Repeat forever.