Connect JavaScript to the browser. Select elements, respond to events, and build interactive web pages.
Learn how the <script> tag connects JavaScript to your HTML page — and why where you place it matters more than you think.
Learn how to split your JavaScript into organized, reusable files using the modern module system.
Meet the DOM — the browser's live representation of your HTML — and learn how to reach in and grab any element with JavaScript.
Once you've selected an element, learn how to read its content, change its text, update attributes, and even create brand-new elements from scratch.
Learn how to change an element's appearance by toggling CSS classes with JavaScript — the clean, maintainable way to handle dynamic styles.
Make your page react to clicks, typing, scrolling, and more — events are how JavaScript knows the user did something.
Discover how events travel up the DOM tree and how to use this behavior to efficiently handle events on many elements with a single listener.
Put it all together by building a fully interactive FAQ page with expandable answers, a live search filter, and a dark mode toggle.
Build a fully functional to-do list app from scratch — create, complete, delete, and save tasks — using only HTML, CSS, and vanilla JavaScript.
Build a visual color picker with RGB sliders, live preview, hex code display, and a copy-to-clipboard feature — all with vanilla JavaScript.
Read short DOM scripts and predict exactly what each console.log will print. Reading code is half of writing code — train your eyes before your fingers.
Each step has DOM code that almost works — but one specific bug stops it. Spot the bug, type the fix into the blank, and learn the kinds of mistakes every developer hits.
Stack everything you have learned about the DOM into small, end-to-end builds. Each step gives you an empty editor and a goal — you write the code, run it, and read the console to confirm it worked.
