Up to this point in the module you have practiced the individual pieces of DOM work: reading the document tree, creating elements, changing styles and content, and responding to events. This topic puts those pieces together. An interactive UI control — a toggle, a tab strip, a custom dropdown, a media panel — is nothing more than a small, well-planned collection of elements that JavaScript builds, wires to event listeners, and keeps in a known state as the user interacts with it.
The work usually follows a predictable order. First you plan the structure: what elements the control needs, how they nest, and what markup roles they play. Then you construct those elements in JavaScript, attach listeners to the parts that respond to input, and decide how the control's state (open/closed, selected, disabled, current value) will be stored and reflected back in the DOM. Finally you make the control accessible — keyboard operable, with ARIA roles and states that describe it to assistive technology — and package the whole thing so it can be reused more than once on a page.
The videos below approach this from two angles. The two project videos follow a small interactive application being built from scratch, so watch how the author moves from markup and layout to the JavaScript that drives behavior, and notice where state is being tracked and where the DOM is being updated in response. The accessibility video addresses the part beginners most often skip: why a JavaScript-built control needs ARIA and semantics to be usable by everyone. While watching, keep asking yourself where each technique would land in your own control's structure, state, and event wiring.
The opening part of a beginner-oriented HTML, CSS, and JavaScript project in which an interactive TV interface is built step by step. Expect the early stages of the build: laying out the control's structure and visual design before the JavaScript behavior is layered on top.
It models the planning and structure stage of building a UI control, which is where most students struggle, and it does so at a pace aimed at beginners rather than assuming prior project experience.
Part 3 of the same interactive TV project, continuing from the earlier installments. This later stage is where a project of this kind typically focuses on the JavaScript side — wiring up controls, responding to clicks, and updating the display as the user interacts with it.
It shows the payoff stage of the same build, so you can see event listeners and runtime DOM updates applied in a real project context rather than as isolated snippets, which directly supports the state-management and runtime-modification subtopics.
A short beginner introduction to WAI-ARIA and what it is for, framed as necessary background before making buttons and similar controls accessible. In three minutes it covers the vocabulary of accessibility attributes rather than a full implementation.
It fills the gap the project videos leave open, giving you the accessibility concepts needed when your control is built entirely in JavaScript and therefore has no built-in semantics to rely on.
Taken together, the videos trace the path from DOM fundamentals to a finished control. The two project installments reinforce MO1 through MO4 in applied form: you see elements created and structured, content and styles updated as the interface changes, and event listeners attached so user input drives those updates. The ARIA video supplies the accessibility half of MO5, explaining why roles and states matter for controls that JavaScript builds at runtime. None of the videos alone delivers a reusable, encapsulated control, so use them alongside the module readings and your own practice — the project videos for structure, construction, and event handling; the accessibility video as the checklist you apply before calling a control finished.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.