DOM & Browser: Build Real Web Pages
How the browser turns code into pixels, then the DOM, events and delegation, forms and validation, components with dialog and ARIA, state-driven rendering, fetch with loading and error states, storage, routing, observers, animation, canvas and SVG, performance, accessibility and front-end security. Finish with an Expense Tracker, a product search app and Web Components. Every page is a live mockup you can edit.
Syllabus
7 skill areas. Free lessons are open to read now.
0
Start here
How the browser turns HTML, CSS and JavaScript into pixels.
1 lesson · 45 minModule 0
Start here
How the browser turns HTML, CSS and JavaScript into pixels.
1
The DOM
The DOM tree, selecting, changing, creating and removing elements.
3 lessons · 3 hrModule 1
The DOM
The DOM tree, selecting, changing, creating and removing elements.
- 1.1 The DOM tree and selecting elements50 min · lesson, lab and quiz Free preview
- 1.2 Changing content, attributes, classes and styles55 min · lesson, lab and quiz Enrolled students
- 1.3 Creating, inserting and removing elements55 min · lesson, lab and quiz Enrolled students
2
Events
Listeners, propagation and delegation, keyboard, pointer and custom events.
3 lessons · 3 hrModule 2
Events
Listeners, propagation and delegation, keyboard, pointer and custom events.
- 2.1 Events and listeners60 min · lesson, lab and quiz Enrolled students
- 2.2 Propagation and event delegation60 min · lesson, lab and quiz Enrolled students
- 2.3 Keyboard, mouse, pointer and custom events65 min · lesson, lab and quiz Enrolled students
3
Forms and UI components
Forms and validation, dialogs, tabs and menus, state-driven rendering.
3 lessons · 4 hrModule 3
Forms and UI components
Forms and validation, dialogs, tabs and menus, state-driven rendering.
- 3.1 Forms and validation70 min · lesson, lab and quiz Enrolled students
- 3.2 Building UI components70 min · lesson, lab and quiz Enrolled students
- 3.3 State-driven rendering70 min · lesson, lab and quiz Enrolled students
4
Browser APIs
Fetch into the page, storage, URLs and routing, observers, animation, canvas and SVG, more web APIs.
7 lessons · 7 hrModule 4
Browser APIs
Fetch into the page, storage, URLs and routing, observers, animation, canvas and SVG, more web APIs.
- 4.1 Fetching data into the page75 min · lesson, lab and quiz Enrolled students
- 4.2 Browser storage70 min · lesson, lab and quiz Enrolled students
- 4.3 URLs, history and a tiny router60 min · lesson, lab and quiz Enrolled students
- 4.4 Observers: Intersection, Resize and Mutation60 min · lesson, lab and quiz Enrolled students
- 4.5 Timers and animation60 min · lesson, lab and quiz Enrolled students
- 4.6 Canvas and SVG graphics60 min · lesson, lab and quiz Enrolled students
- 4.7 More web platform APIs60 min · lesson, lab and quiz Enrolled students
5
Performance, accessibility and security
Rendering performance, accessible interactive UI and front-end security.
3 lessons · 3 hrModule 5
Performance, accessibility and security
Rendering performance, accessible interactive UI and front-end security.
- 5.1 Rendering performance65 min · lesson, lab and quiz Enrolled students
- 5.2 Accessible interactive UI65 min · lesson, lab and quiz Enrolled students
- 5.3 Front-end security70 min · lesson, lab and quiz Enrolled students
6
Projects and beyond
Expense Tracker, Ralfiz Store search, Web Components and the path to frameworks.
4 lessons · 7 hrModule 6
Projects and beyond
Expense Tracker, Ralfiz Store search, Web Components and the path to frameworks.
- 6.1 Project: Expense Tracker120 min · lesson, lab and quiz Enrolled students
- 6.2 Project: Ralfiz Store product search150 min · lesson, lab and quiz Enrolled students
- 6.3 Web Components80 min · lesson, lab and quiz Enrolled students
- 6.4 From vanilla JS to frameworks70 min · lesson, lab and quiz Enrolled students
Enrol in DOM
Get in touch and your trainer will set up your student login. After JavaScript.
Other courses
Written for evergreen browsers in September 2026. Live pages run in a sandboxed frame; storage is emulated there so it survives a rerun. Where a feature is new, the lesson says so: check MDN compatibility tables before relying on it. See the official documentation.