An interactive tutorial for learning HTML, CSS, and JavaScript from scratch — designed for developers who already know a typed language (e.g. Dart/Flutter) and want to quickly pick up frontend web development.
| Page | Topic | Covers |
|---|---|---|
| 1 | HTML | Document structure, head elements, common body tags, semantic elements, canvas, void elements, manifest |
| 2 | JavaScript | Variables & types, functions, ES6+ syntax, array methods, async/await, fetch, modules, classes, error handling |
| 3 | JS × HTML | DOM tree, finding/modifying elements, events, creating/removing nodes, timers, Web Storage — with a live interactive demo |
| 4 | CSS | Selectors & specificity, box model, colors & typography, Flexbox, Grid, responsive design, transitions & animations, CSS variables |
- Side-by-side code + annotation layout — hover a code section to highlight its explanation
- Dart/Flutter developer perspective — comparisons to Dart equivalents throughout (e.g.
const≈final,Promise≈Future) - Live demo on the DOM manipulation page
- Keyboard navigation — use ← → arrow keys to switch pages
- Responsive — works on desktop, tablet, and mobile
- No dependencies — pure HTML, CSS, and JavaScript; no frameworks, no build tools
# Any static file server works:
python -m http.server 8080
# or
npx serve .Then open http://localhost:8080.