A beginner-friendly web tutorial that explains how the internet and web development work — written so a 12-year-old can follow along.
Available in Dutch and English. Open any index.html directly in your browser — no web server or build tools required.
| Language | Start here |
|---|---|
| English | en/index.html |
| Nederlands | nl/index.html |
The tutorial is split into five sections per language:
The building blocks — HTML, CSS, JavaScript The three things every webpage is made of. Includes live demos you can edit in the browser.
How the web works — HTTP/HTTPS, DNS, APIs What actually happens when you type a URL. Why HTTPS matters. How apps talk to each other.
Storing and serving data — Servers & hosting, PHP, JSON, Databases How servers process requests, how data is formatted, and how it gets stored and retrieved.
The bigger picture — Frontend/Backend, Responsive design How the two sides of a web app fit together, and how sites adapt to any screen size.
Everything together — Summary and next steps A recap of all twelve concepts, with links to go deeper.
internetbasics/
├── en/ English version
│ ├── index.html Start here (English)
│ ├── building-blocks.html HTML · CSS · JavaScript
│ ├── how-the-web-works.html HTTP/HTTPS · DNS · APIs
│ ├── backend-and-data.html PHP · JSON · Databases
│ ├── bigger-picture.html Frontend/Backend · Responsive
│ └── summary.html Everything Together
├── nl/ Dutch version (Nederlands)
│ ├── index.html Begin hier (Nederlands)
│ ├── bouwstenen.html HTML · CSS · JavaScript
│ ├── hoe-het-web-werkt.html HTTP/HTTPS · DNS · APIs
│ ├── backend-en-data.html PHP · JSON · Databases
│ ├── groot-plaatje.html Frontend/Backend · Responsive
│ └── samenvatting.html Alles samen
├── README.md
└── LICENSE
All colour combinations in the tutorial meet WCAG 2.1 AA contrast standards (minimum 4.5:1 for normal text, 3:1 for large text and non-text elements). Keyboard focus indicators are included throughout.
If you spot a contrast or accessibility issue, please open an issue or pull request.
Improvements are welcome. When adding or changing content, please keep the reading level accessible — short sentences, plain vocabulary, and concrete examples. If you update a section in one language, update the other too so they stay in sync.
See LICENSE.