Practice: Build from Scratch

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.

Step 1 of 5

Build, run, read the console, repeat

You have read code and fixed buggy code. Now write code from a blank line.

Each of the next four steps gives you a goal and an empty editor. The console runs your code in a tiny page that already has an empty <body> — anything you create with document.createElement can be appended to document.body.

To prove your build works, the goal asks for a specific console.log output. If your output matches, the step passes. If not, read the actual log carefully — it will tell you what your code is really doing.

Think of it this way: It is the difference between watching someone fix a tap and fixing one yourself. The first time the wrench feels awkward; by the third tap, the moves are automatic.

Tip

When in doubt, add an extra console.log to inspect a value mid-flight. Reading the actual state of the page (via document.body.innerHTML for example) is the fastest way to spot what is off.