A guided tour of what happens when you press a button on a web page and the screen changes: the browser, the network, a server, an API, SQL, a database, JSON and the DOM. Every line of a small working project is explained beside the code, together with the reason for each choice.
Both editions build the same vending machine page and explain the same ideas. They differ in the language of the server, and the page itself is identical. Choose one, or read both and compare how each language expresses the same design.
The server, the database code and the setup script are written in Python, using only its standard library. Needs Python 3.10 or newer.
Everything is TypeScript on Node, including the short script in the page. Needs Node 22.18 or newer.
A split screen with the browser on the left and the server and database on the right. Press a button and follow the request through a timeline, one stage at a time. Edit the HTML, the CSS, the SQL and the server code, or upload your own files. It has three levels and offers a TypeScript server and a Python server.
Every diagram in the tutorial is also a standalone SVG file that you can use in your own worksheets and slides. Each file carries its own colours and follows the light or dark setting of the device that opens it.
