Make pages react: select elements, handle events, read input, and build the page from your data.
Your JavaScript can think. This is where it gets hands. The DOM, short for Document Object Model, is the browser's live model of the page, and JavaScript can reach into it: read it, rewrite it, restyle it, and grow it. Everything you wrote to a console in JavaScript Basics now moves real pixels.
Every practice works in two files, the way real projects do: the page in `index.html`, the behaviour in `app.js`. You select elements, wire up clicks, read what people type, build new elements from arrays, and handle clicks on elements that did not exist when the page loaded. One pattern carries the whole course: keep state in variables, render it to the page, change the state on an event, render again. Learn that loop once and every widget on the web starts making sense.
You ship four working widgets on the way, all of them classics: a click counter, a task list that grows from what you type, an image gallery driven by attributes, and a dashboard capstone that combines the lot. Finish everything and your certificate is waiting. React is two courses away, and it automates exactly the render loop you will have built here by hand.
50 Lessons • 54 Practices • 18 Quizzes • 4 Projects · ~11h Total
Not just theory. You finish this course with real work to show.
This is the same in-browser editor every lesson uses. Edit the code, hit Run.
Run code in the browser and see the result immediately. Every lesson works this way.
Stuck? Puff explains the error and nudges you forward, without giving the answer away.
Streaks, diamonds, and certificates. Your progress saves automatically, forever.
Every completed course issues a certificate with a public verification link.
Every certificate has a public verification link employers can check.
One certificate per course. Finish a program and earn its program certificate too.
LinkedIn-ready, with a PDF you can download and attach.
Your programs print to a console. This is the course where they start moving real pixels.
You want React eventually. This is the layer React automates, and knowing it is the difference.
You can write HTML and CSS all day. This is where the buttons on your pages start doing something.
JavaScript DOM is free to start, no credit card needed. Some later sections are part of Pro, and finishing every section, including the certificate, needs a Pro plan.
Yes, or its ground: variables, functions, arrays, objects, and loops. JavaScript DOM spends all of them and teaches none of them. HTML Basics helps too, because you will be reading the pages you change.
The browser's live, in-memory model of a web page. HTML describes the page once, when it loads; the DOM is the version JavaScript can read and change while the page is open. Change the DOM and the screen updates instantly.
No. Everything runs in your browser on Devpuff: two files in the editor, a live preview beside them, and a goal list that checks your page on every run.
Four working widgets: a click counter, a task list that grows from what you type, an image gallery driven from JavaScript, and a dashboard capstone that combines state, input, and generated elements.
Learn this first, on purpose. React automates the state-and-render loop that JavaScript DOM teaches by hand. Developers who skip this layer can use React; developers who know it can debug React.
Yes. Finish every item in JavaScript DOM and Devpuff issues a course certificate with a public link that anyone can verify.
How this course connects to the bigger picture, and what to explore next.
Level up your JavaScript: arrow functions, array methods, destructuring, spread, classes, and errors.
Start programming for real: variables, strings, decisions, arrays, loops, functions, and objects.
Write real web pages by hand: document structure, text, links, lists, images, semantic HTML, and forms.
Free to start, no credit card required. Write real code from the first lesson and keep your progress forever.
Start Learning Free