javascript · beginner
The DOM & Browser Events
Learn to read and change a live web page with JavaScript: select elements, update content, create and remove nodes, and respond to user actions with events.
A practical, beginner-first course on the Document Object Model. You will learn what the DOM actually is, how to find and change elements, how to create and remove nodes safely, and how browser events (clicks, input, submit) work end to end, including bubbling, delegation, and default browser behaviour. Ends with building a small interactive UI component from scratch.
DOM Fundamentals & Selecting Elements
Understand what the DOM is and learn every core way to find elements on a page.
- What the DOM Really IsLevel 1 · Complete beginner · Pass the quick check to continue10m
- Selecting ElementsFinish the lesson and pass the quick check in "What the DOM Really Is" to unlock this lesson.14m
- Changing Text and AttributesFinish the lesson, Pass the quick check and pass the coding challenge in "Selecting Elements" to unlock this lesson.14m
Creating Elements & Handling Events
Build and remove elements dynamically, then make pages interactive by responding to events.
- Creating and Removing ElementsFinish the lesson and pass the quick check in "Changing Text and Attributes" to unlock this lesson.14m
- Events and Event ListenersFinish the lesson, Pass the quick check and pass the coding challenge in "Creating and Removing Elements" to unlock this lesson.14m
- The Event Object and Default BehaviourFinish the lesson, Pass the quick check and pass the coding challenge in "Events and Event Listeners" to unlock this lesson.14m
- Event Delegation and BubblingFinish the lesson, Pass the quick check and pass the coding challenge in "Events and Event Listeners" to unlock this lesson.12m
Forms & Building Real Components
Handle form input properly and combine everything into a small interactive UI component.
- Forms and Input HandlingFinish the lesson, Pass the quick check and pass the coding challenge in "Events and Event Listeners" to unlock this lesson.12m
- Interactive To-Do & Filter WidgetComplete "Forms and Input Handling" to unlock this project.~6h
- Building a Small Interactive ComponentFinish the project "Interactive To-Do & Filter Widget" to unlock this lesson.15m