From f6d1ca72243ad6a14abd9e210257a9aec3aa7aed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?=
 <145539062+KrilinZ@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:10:35 +0200
Subject: [PATCH 1/4] docs(readme): rewrite for clarity, SEO and AI answer
 engines

---
 README.md | 254 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 201 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index 7f4948c..499a22f 100644
--- a/README.md
+++ b/README.md
@@ -1,92 +1,240 @@
 <!-- hide -->
-# Learn The DOM Interactively
+<div align="center">
 
-<a href="https://www.4geeksacademy.co"><img height="280" align="right" src="https://raw.githubusercontent.com/4GeeksAcademy/javascript-dom-tutorial-exercises/b2f552e68f3e7ba7a2bc7176e1273a5df32ccb8f/.breathecode/assets/badge.svg"></a>
+# Learn how to manipulate The DOM with JS
 
-> By [@alesanchezr](https://twitter.com/alesanchezr) and [other contributors](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/graphs/contributors) at [4Geeks Academy](https://4geeksacademy.co/)
+[![certified by 4Geeks Academy](https://img.shields.io/badge/certified%20by-4Geeks%20Academy-2563eb)](https://4geeks.com/en/interactive-exercise/the-dom-exercises)
+[![autograded with LearnPack](https://img.shields.io/badge/autograded-LearnPack-2563eb)](https://github.com/learnpack/learnpack)
+[![open in Codespaces](https://img.shields.io/badge/open%20in-Codespaces-fb5a1f)](https://codespaces.new/?repo=4GeeksAcademy/javascript-dom-tutorial-exercises)
 
-![last commit](https://img.shields.io/github/last-commit/4geeksacademy/javascript-dom-tutorial-exercises)
-[![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://breatheco.de)
-[![build by developers](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy)
+![Cover image of the tutorial: the text "Learn The DOM interactive" next to the yellow JavaScript hexagon logo](https://raw.githubusercontent.com/4GeeksAcademy/javascript-dom-tutorial-exercises/HEAD/preview.png)
 
-This tutorial is part of a bigger group of tutorials about web development, this repository focuses only on The DOM.
+</div>
 
-*Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/blob/master/README.es.md) :es:*
+*These instructions are [also available in 🇪🇸 Spanish](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/blob/HEAD/README.es.md).*
 <!-- endhide -->
 
-## You will learn the following concepts:
+This interactive tutorial teaches DOM manipulation with vanilla JavaScript across 15 exercise folders: one intro plus 14 auto-graded challenges. You practice `querySelector`, `createElement`, `appendChild`, `innerHTML`, `removeChild`, `childNodes` and `addEventListener`, finishing with a working to-do list. Every graded exercise ships an `index.html`, a `styles.css`, an `index.js`, a bilingual README and a Jest test file. Estimated time: 6 hours. Difficulty: easy.
 
-1. How to select elements from your website.
+<!-- hide -->
+## 📋 About this tutorial
+
++ **Difficulty:** easy — it is the fourth step of the recommended path listed further down.
+
++ **Estimated duration:** 6 hours.
+
++ **Exercises:** 15 folders inside `exercises/` — `00-Welcome` (reading only) plus 14 exercises with automatic tests.
+
++ **Technologies:** vanilla JavaScript, HTML and CSS. No frameworks, no build step, no `npm install` inside the exercises.
+
++ **Grading:** `isolated` — each exercise is graded on its own with Jest running on jsdom.
+
++ **Languages:** every exercise has both `README.md` (English) and `README.es.md` (Spanish).
+
++ **Solutions:** each of the 14 graded exercises includes a `solution.hide.js` reference file.
+<!-- endhide -->
+
+## 🎯 What will you learn?
+
+The DOM (Document Object Model) is the bridge between the HTML you write and the JavaScript that changes it while the page is running. By the end of these exercises you will be able to:
+
++ Select any element on a page with [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and read its properties, such as `id`.
+
++ Change CSS from JavaScript through the `element.style` object (`background`, `float`, and any other property).
+
++ Create new tags with [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and insert them with [`appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild).
+
++ Build HTML as a string and inject it with [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) or `document.write`.
+
++ Delete elements with `removeChild`, and understand why `childNodes` and `children` do not return the same thing.
+
++ React to the user with [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for `click`, `change` and keyboard events, updating the page without any refresh.
+
+If you want the theory behind it first, read [What is the DOM: Document Object Model](https://4geeks.com/lesson/what-is-dom-define-dom).
+
+## 👀 What will you build?
+
+`exercises/00-Welcome` is a short introduction with no test. The other 14 folders are graded exercises, each one a tiny website you have to finish:
+
++ **`01` Hello World** — write the JavaScript that fires an `alert` saying `Hello World`.
+
++ **`02` Select DOM Element** — select the `<h1>` with `querySelector` and alert its `id`.
+
++ **`03` Change Div Background** — turn the background of `#myDiv` from green to `yellow`.
+
++ **`04` Move DOM Element** — move the `#wulu` div by setting its `float` CSS property to `right` from JavaScript.
+
++ **`05` Create DOM Element (1)** — create a `<p>` with a yellow background and the text "Hello World", then append it to the body.
+
++ **`06` Create DOM Element (2)** — insert an `<img>` into the `<body>` using the `innerHTML` property.
+
++ **`07` Create DOM list of li** — fill a variable so the body renders a `<ul>` with exactly three `<li>` items.
+
++ **`08.1` Remove DOM Element** — remove the second `<li>` by calling `removeChild` from its `parentNode`.
+
++ **`08.2` Remove DOM Element** — do the same, but reaching the item through the `childNodes` collection of `#parentLi`.
+
++ **`09` Render on Click** — create a yellow `<div>` with "Hello World" and append it to the body when `#superDuperButton` is clicked.
+
++ **`10` Add li on Click** — add a brand new `<li>` to `#myList` on every click of the button.
+
++ **`11` Dynamic HTML String** — concatenate the current year, taken from `new Date().getFullYear()`, into a string printed with `document.write`.
+
++ **`12` Add Options to the Select** — loop over an array of 7 countries, build one `<option>` per country, append them to `#mySelect` and alert the country the user picks on the `change` event.
+
++ **`13` Todo List** — the final project: the HTML and the CSS are already written, and you add the JavaScript that appends a task when the user presses Enter and removes a task when the trash icon is clicked.
+
+The exercises run inside LearnPack, so you edit the file, press run, and see the result next to the instructions:
+
+![Animated demo of the "Add Options to the Select" exercise running inside the LearnPack interface, showing the run button and the country dropdown that JavaScript fills in](https://raw.githubusercontent.com/4GeeksAcademy/javascript-dom-tutorial-exercises/HEAD/.learn/assets/13-1.gif)
+
+## 🎓 What do you need before starting?
+
+You do not need any previous DOM knowledge, but this tutorial assumes you already know:
 
-2. Manipulate them with JavaScript (change styles, add event listeners).
++ **Basic HTML**: tags, attributes, and above all the `id` attribute, because almost every exercise selects elements by id.
 
-3. Remove elements programmatically.
++ **Basic CSS**: properties such as `background`, `float` and `color`, since you will be setting them from JavaScript instead of from a stylesheet.
 
-4. Change your entire website without a refresh.
++ **Basic JavaScript**: variables, strings, string concatenation, `for` loops and functions. Exercise `12` needs a loop and exercise `13` needs functions.
+
+Events are introduced gently here, so exercises `09`, `10`, `12` and `13` are also a good first contact with `addEventListener`.
+
+## ✅ How does the automatic grading work?
+
+14 of the 15 folders contain a `tests.js` file, so you get instant feedback on almost everything you write. Grading is `isolated`: each exercise is checked on its own, with [Jest](https://jestjs.io/) running the page in a simulated browser (jsdom), and `@testing-library/dom` firing real clicks, `change` events and key presses in exercises `09`, `10`, `12` and `13`.
+
+The tests check three different kinds of things, and it helps a lot to know which is which:
+
++ **The result in the DOM.** For example, exercise `07` counts that `ul > li` returns exactly 3 elements, and exercise `10` checks that `#myList` has 4 children after the click.
+
++ **The functions you called.** Several exercises mock `document.querySelector` or `document.createElement` and count the calls: exercise `12` requires exactly 7 calls to `createElement`, and exercises `09` and `10` require exactly one.
+
++ **Your source code, read as text.** Exercise `06` searches your file for the literal `body.innerHTML`, exercise `08.2` searches for `childNodes`, `removeChild` and the index `[3]`, and exercise `11` uses regular expressions to confirm you wrote `new Date()` and `.getFullYear()`.
+
+Because of that third category, a solution that looks perfect in the browser can still fail. The tests are strict on purpose: treat a red test as a hint about the technique the exercise wants you to practice, not as a verdict on your code.
+
+If you get stuck, every graded exercise ships a `solution.hide.js` file with a working reference solution.
+
+## 💡 What mistakes should you avoid?
+
+These are the traps that make people fail an exercise even when the page looks right on screen:
+
++ **Swapping `querySelector` for `getElementById` in exercise `02`.** That test replaces `document.querySelector` with a mock and asserts it was called once with `#theTitle`, so `getElementById` fails it. Note that exercises `09` and `10` are the opposite case: their starter code already uses `getElementById` for the button, and that is fine.
+
++ **Adding an extra `querySelector` call.** Exercises `03`, `04` and `08.2` assert that `document.querySelector` was called exactly once. In `03` and `04` the starter file already contains that call, so querying the element again turns the test red; in `08.2` you write that single call yourself.
+
++ **Using the wrong index in exercise `08.2`.** Removing `children[1]` gives the same visual result, but the test greps your code for `[3]`, which is the position of the second `<li>` inside `childNodes` once the whitespace text nodes are counted.
+
++ **Changing the code marked as untouchable.** In exercise `07` the last line is commented as "Do not modify after this line": you only assign the `listString` variable. In exercise `13` the hint is explicit — you edit `index.js` only, never the HTML or the CSS.
+
++ **Hardcoding the year in exercise `11`.** Writing `2026` passes visually but fails: the test requires `new Date()` and `.getFullYear()` in your source, exactly one `document.write(myString)` call, and the original text of `myString` kept at the front.
+
++ **Miscounting the options in exercise `12`.** The array has 7 countries, so `createElement` must run 7 times, but `#mySelect` ends up with 8 children because the "Select your country" `<option>` is already in the HTML.
+
++ **Creating the element outside the listener in exercises `09` and `10`.** `createElement` has to run when the click happens, not when the file loads, or the call count check fails.
+
+## ❓ Frequently asked questions
+
+### Do I need to know JavaScript before starting this DOM tutorial?
+
+Yes, the basics. You should be comfortable with variables, strings, concatenation, functions and `for` loops before exercise `12`. If any of that sounds new, do the [JavaScript beginner tutorial](https://4geeks.com/en/interactive-exercise/javascript-beginner-exercises) first and come back.
+
+### What is the difference between `createElement` and `innerHTML`?
+
+Both add HTML to the page and this tutorial makes you practice both. `createElement` builds a real DOM node you can configure in JavaScript before inserting it with `appendChild`, which is what exercise `05` asks for. `innerHTML` replaces the whole content of an element with an HTML string, which is what exercises `06` and `07` ask for. Strings are quicker to write, nodes are safer and easier to keep a reference to.
+
+### Why does my exercise fail if the website looks correct?
+
+Because some tests read your source file as text instead of only looking at the result. Exercise `06` looks for the literal `body.innerHTML`, exercise `08.2` looks for `childNodes` and `[3]`, and exercises `11`, `12` and `13` use regular expressions on your code. Match the technique the instructions describe and the test will pass.
+
+### How long does it take to finish the 14 exercises?
+
+The tutorial is rated at about 6 hours in total and its difficulty is marked as easy. Since grading is isolated, you can stop after any exercise and pick it up later without losing progress.
+
+### Can I run these exercises without installing anything?
+
+Yes. Opening the repository in GitHub Codespaces gives you a ready container with Node.js 22, Jest and the LearnPack DOM plugin already installed, and LearnPack starts on its own. Installing locally is only worth it if you prefer working offline.
+
+### Is this tutorial free, and who owns the code I write?
+
+Getting access costs nothing and the JavaScript you write in the exercises is yours. The tutorial content itself is not open source: the [LICENSE.md](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/blob/HEAD/LICENSE.md) reserves all intellectual property rights and does not allow republishing, selling or redistributing the material.
 
 <!-- hide -->
+## 📚 Related tutorials
 
-### I strongly recommend doing the tutorials in this order:
+This tutorial is one step of a longer web development series. The recommended order is:
 
-1. [Introduction to HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course)
-2. [Introduction to CSS](https://github.com/4GeeksAcademy/css-tutorial-exercises-course)
-3. [Introduction to JavaScript](https://github.com/4GeeksAcademy/javascript-beginner-exercises-tutorial)
-4. [Introduction to The DOM](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises) ← You are here now 🔥
-5. [Using events & The DOM](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises)
-6. [Object Oriented Programming](https://github.com/4GeeksAcademy/object-oriented-javascript-tutorial-exercises)
+1. [Introduction to HTML](https://4geeks.com/en/interactive-exercise/html-exercises)
+2. [Introduction to CSS](https://4geeks.com/en/interactive-exercise/css-exercises)
+3. [Introduction to JavaScript](https://4geeks.com/en/interactive-exercise/javascript-beginner-exercises)
+4. [Introduction to The DOM](https://4geeks.com/en/interactive-exercise/the-dom-exercises) ← you are here 🔥
+5. [Using events and The DOM](https://4geeks.com/en/interactive-exercise/javascript-events-exercises)
+6. [Object Oriented Programming in JavaScript](https://4geeks.com/en/interactive-exercise/object-oriented-programing-in-javascript)
 
-## One click installation (recommended):
+## 🚀 How to start
 
-You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/javascript-dom-tutorial-exercises) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises).
+The fastest way is the one-click option, no local setup required.
 
-> Once you have VSCode open, the LearnPack exercises should start automatically. If exercises don't run automatically, you can try typing on your terminal: `$ learnpack start`
+1. Open the repository in [GitHub Codespaces](https://codespaces.new/?repo=4GeeksAcademy/javascript-dom-tutorial-exercises) and wait for the container to build.
 
-## Local Installation
+2. LearnPack should start by itself once VSCode is ready. If it does not, run it from the terminal:
 
-Clone the repository in your local environment and follow the steps below:
+    ```bash
+    learnpack start
+    ```
 
-1) Make sure you have [learnpack](https://github.com/learnpack/learnpack-cli), `node.js` version v14+, and jest v27 installed. This is the command to install the learnpack-cli and jest:
+3. Read the instructions on the left, edit `index.js`, press the build button to preview the website, and press the test button to grade the exercise.
 
-```bash
-$ npm i @learnpack/learnpack@2.1.20 jest@27.0.6 -g
-```
+> 💡 The exercises are numbered on purpose. Doing them in order matters, because each one builds on the function introduced by the previous one.
 
-2) Clone or download this repository. Once you finish downloading, you will find a new folder with a subdirectory "exercises" that contains all the exercises within.
+## 💻 Local installation
 
-3) Install the learnpack plugin to test and compile vanillajs:
+If you prefer to work on your own machine:
 
-```bash
-$ learnpack plugins:install learnpack-dom
-```
+1. Install Node.js 22 (the version used by the container and by the repository CI), and then LearnPack, Jest and the DOM plugin globally:
 
-4) Start the tutorial/exercises by running the following command from the root of the project:
+    ```bash
+    npm i -g jest@29.7.0 jest-environment-jsdom@29.7.0 @learnpack/learnpack@5.0.348
+    learnpack plugins:install @learnpack/dom@1.1.7
+    ```
 
-```bash
-$ learnpack start
-```
+2. Clone the repository and move into the folder it creates:
 
-<!-- endhide -->
+    ```bash
+    git clone https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises.git
+    cd javascript-dom-tutorial-exercises
+    ```
+
+3. Start the tutorial from the root of the project:
+
+    ```bash
+    learnpack start
+    ```
 
-## How are the exercises organized?
+## 📚 How the exercises are organized
 
-Each exercise is a small vanillajs website containing the following files:
+Every graded exercise lives in its own folder inside [`exercises/`](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/tree/HEAD/exercises) and is a small standalone website:
 
-1. **index.js:** represents the entry JavaScript file that will be executed when the website loads.
-1. **index.html:** represents the HTML entry for the website.
-1. **style.css:** your website styles, they have to be imported from the index.html
-2. **README.md:** contains exercise instructions.
-3. **test.js:** you don't have to open this file, it contains the testing script for the exercise.
++ **`index.html`** — the HTML of the page. It already contains the elements you have to select, and the `<script>` tag that loads your JavaScript.
 
-> Note: The exercises have automatic grading, but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion, or you may get frustrated.
++ **`index.js`** — the file you edit. Some exercises give you a starter line that you should keep.
 
-## Contributors
++ **`styles.css`** — the styles of the page, imported from the HTML.
 
-Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
++ **`README.md`** and **`README.es.md`** — the instructions, in English and Spanish.
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 🤓, (build-tutorial) ✅, (documentation) 📖
++ **`tests.js`** — the grading script. You do not need to open it, but reading it is the fastest way to understand why an exercise is failing.
 
-2. [Paolo (plucodev)](https://github.com/plucodev), contribution: (bug reports) 🐛, (coder) 💻, (translation) 🌎
++ **`solution.hide.js`** — a reference solution, hidden by LearnPack until you want it.
 
-This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!
+Found a bug or something out of date? Open an issue at [learnpack/learnpack](https://github.com/learnpack/learnpack/issues/new).
 
-This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and  [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).
+## 🤝 Contributors
+
++ [Alejandro Sánchez (@alesanchezr)](https://github.com/alesanchezr) — code 💻, idea 🤔, tests ⚠️, tutorial 📖.
+
++ [Paolo (@plucodev)](https://github.com/plucodev) — bug reports 🐛, code 💻, translation 🌎.
+
+Thanks to [everyone else who has contributed](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/graphs/contributors). This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification, and contributions of any kind are welcome.
+<!-- endhide -->

From 1c0ae55bec617fc76ccffa6f52bfb635e02b80cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?=
 <145539062+KrilinZ@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:10:37 +0200
Subject: [PATCH 2/4] docs(readme): rewrite for clarity, SEO and AI answer
 engines

---
 README.es.md | 254 ++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 201 insertions(+), 53 deletions(-)

diff --git a/README.es.md b/README.es.md
index 47f0475..559efd2 100644
--- a/README.es.md
+++ b/README.es.md
@@ -1,90 +1,238 @@
 <!-- hide -->
-# Aprende sobre El DOM (Interactivo)
+<div align="center">
 
-<a href="https://www.4geeksacademy.co"><img height="280" align="right" src="https://raw.githubusercontent.com/4GeeksAcademy/javascript-dom-tutorial-exercises/b2f552e68f3e7ba7a2bc7176e1273a5df32ccb8f/.breathecode/assets/badge.svg"></a>
+# Aprende cómo manipular el DOM con JavaScript
 
-> Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/graphs/contributors) en [4Geeks Academy](https://4geeksacademy.co/)
+[![certificado por 4Geeks Academy](https://img.shields.io/badge/certified%20by-4Geeks%20Academy-2563eb)](https://4geeks.com/es/interactive-exercise/the-dom-exercises-es)
+[![autocorregido con LearnPack](https://img.shields.io/badge/autograded-LearnPack-2563eb)](https://github.com/learnpack/learnpack)
+[![abrir en Codespaces](https://img.shields.io/badge/open%20in-Codespaces-fb5a1f)](https://codespaces.new/?repo=4GeeksAcademy/javascript-dom-tutorial-exercises)
 
-![last commit](https://img.shields.io/github/last-commit/4geeksacademy/javascript-dom-tutorial-exercises)
-[![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://breatheco.de)
-[![build by developers](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy)
+![Imagen de portada del tutorial: el texto "Learn The DOM interactive" junto al logo hexagonal amarillo de JavaScript](https://raw.githubusercontent.com/4GeeksAcademy/javascript-dom-tutorial-exercises/HEAD/preview.png)
 
-Este tutorial es parte de un grupo de tutoriales sobre desarrollo web, este repositorio se enfoca solo en el DOM. 
+</div>
+
+*Estas instrucciones [también están disponibles en 🇺🇸 inglés](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/blob/HEAD/README.md).*
+<!-- endhide -->
+
+Este tutorial interactivo enseña a manipular el DOM con JavaScript puro a lo largo de 15 carpetas de ejercicios: una introducción y 14 retos autocorregidos. Practicarás `querySelector`, `createElement`, `appendChild`, `innerHTML`, `removeChild`, `childNodes` y `addEventListener`, y terminarás construyendo una lista de tareas funcional. Cada ejercicio corregido trae su `index.html`, su `styles.css`, su `index.js`, un README bilingüe y un archivo de tests de Jest. Duración estimada: 6 horas. Dificultad: fácil.
+
+<!-- hide -->
+## 📋 Ficha del tutorial
+
++ **Dificultad:** fácil — es el cuarto paso de la ruta recomendada que aparece más abajo.
+
++ **Duración estimada:** 6 horas.
+
++ **Ejercicios:** 15 carpetas dentro de `exercises/` — `00-Welcome` (solo lectura) y 14 ejercicios con tests automáticos.
+
++ **Tecnologías:** JavaScript puro (sin frameworks), HTML y CSS. No hay build ni `npm install` dentro de los ejercicios.
+
++ **Corrección:** `isolated` — cada ejercicio se corrige por separado, con Jest ejecutándose sobre jsdom.
+
++ **Idiomas:** todos los ejercicios tienen `README.md` (inglés) y `README.es.md` (español).
+
++ **Soluciones:** los 14 ejercicios corregidos incluyen un archivo `solution.hide.js` de referencia.
 <!-- endhide -->
 
-### Aprenderás los siguientes conceptos:
+## 🎯 ¿Qué vas a aprender?
+
+El DOM (Document Object Model) es el puente entre el HTML que escribes y el JavaScript que lo modifica mientras la página está en marcha. Al terminar estos ejercicios sabrás:
+
++ Seleccionar cualquier elemento de la página con [`document.querySelector`](https://developer.mozilla.org/es/docs/Web/API/Document/querySelector) y leer sus propiedades, como el `id`.
+
++ Cambiar el CSS desde JavaScript a través del objeto `element.style` (`background`, `float` y cualquier otra propiedad).
+
++ Crear etiquetas nuevas con [`document.createElement`](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) e insertarlas con [`appendChild`](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild).
+
++ Montar HTML como texto e inyectarlo con [`innerHTML`](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) o con `document.write`.
+
++ Borrar elementos con `removeChild` y entender por qué `childNodes` y `children` no devuelven lo mismo.
+
++ Responder al usuario con [`addEventListener`](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) para eventos de `click`, `change` y teclado, actualizando la página sin recargarla.
+
+## 👀 ¿Qué vas a construir?
+
+`exercises/00-Welcome` es una introducción corta y sin test. Las otras 14 carpetas son ejercicios corregidos, cada uno una web diminuta que tienes que terminar:
+
++ **`01` Hello World** — escribe el JavaScript que lanza un `alert` con el texto `Hello World`.
+
++ **`02` Select DOM Element** — selecciona el `<h1>` con `querySelector` y muestra su `id` en un alert.
+
++ **`03` Change Div Background** — cambia el fondo de `#myDiv`, que empieza en verde, a `yellow`.
+
++ **`04` Move DOM Element** — mueve el div `#wulu` poniendo su propiedad CSS `float` en `right` desde JavaScript.
+
++ **`05` Create DOM Element (1)** — crea un `<p>` con fondo amarillo y el texto "Hello World", y añádelo al body.
+
++ **`06` Create DOM Element (2)** — mete una etiqueta `<img>` dentro del `<body>` usando la propiedad `innerHTML`.
+
++ **`07` Create DOM list of li** — rellena una variable para que el body muestre un `<ul>` con exactamente tres `<li>`.
+
++ **`08.1` Remove DOM Element** — elimina el segundo `<li>` llamando a `removeChild` desde su `parentNode`.
+
++ **`08.2` Remove DOM Element** — haz lo mismo, pero llegando al elemento a través de la colección `childNodes` de `#parentLi`.
+
++ **`09` Render on Click** — crea un `<div>` amarillo con "Hello World" y añádelo al body cuando se hace clic en `#superDuperButton`.
+
++ **`10` Add li on Click** — añade un `<li>` nuevo a `#myList` en cada clic del botón.
+
++ **`11` Dynamic HTML String** — concatena el año actual, sacado de `new Date().getFullYear()`, dentro del texto que se imprime con `document.write`.
+
++ **`12` Add Options to the Select** — recorre un array de 7 países, crea un `<option>` por cada uno, añádelos a `#mySelect` y muestra en un alert el país que elija el usuario en el evento `change`.
+
++ **`13` Todo List** — el proyecto final: el HTML y el CSS ya están hechos y tú escribes el JavaScript que añade una tarea al pulsar Enter y la borra al hacer clic en el icono de la papelera.
+
+Los ejercicios corren dentro de LearnPack, así que editas el archivo, le das a ejecutar y ves el resultado al lado de las instrucciones:
+
+![Demostración animada del ejercicio "Add Options to the Select" dentro de la interfaz de LearnPack, con el botón de ejecutar y el desplegable de países que rellena el JavaScript](https://raw.githubusercontent.com/4GeeksAcademy/javascript-dom-tutorial-exercises/HEAD/.learn/assets/13-1.gif)
+
+## 🎓 ¿Qué necesitas saber antes de empezar?
+
+No hace falta saber nada de DOM, pero sí se da por hecho que ya manejas:
 
-1. Aprenderás cómo seleccionar elementos de su sitio web.
++ **HTML básico**: etiquetas, atributos y sobre todo el atributo `id`, porque casi todos los ejercicios seleccionan elementos por su id.
 
-2. Manipularlos con JavaScript (cambiar estilos, agregar detectores de eventos).
++ **CSS básico**: propiedades como `background`, `float` o `color`, que aquí vas a aplicar desde JavaScript en vez de desde la hoja de estilos.
 
-3. Eliminar elementos mediante programación.
++ **JavaScript básico**: variables, strings, concatenación, bucles `for` y funciones. El ejercicio `12` necesita un bucle y el `13` necesita funciones.
 
-4. Cambiar todo tu sitio web sin refrescar la página.
+Los eventos se introducen poco a poco, así que los ejercicios `09`, `10`, `12` y `13` te sirven también como primer contacto con `addEventListener`.
+
+## ✅ ¿Cómo funciona la corrección automática?
+
+14 de las 15 carpetas tienen un archivo `tests.js`, así que recibes feedback inmediato en casi todo lo que escribes. La corrección es `isolated`: cada ejercicio se evalúa por su cuenta con [Jest](https://jestjs.io/), que ejecuta la página en un navegador simulado (jsdom), y con `@testing-library/dom` disparando clics, eventos `change` y pulsaciones de tecla reales en los ejercicios `09`, `10`, `12` y `13`.
+
+Los tests comprueban tres cosas distintas, y viene muy bien saber cuál es cuál:
+
++ **El resultado en el DOM.** Por ejemplo, el ejercicio `07` cuenta que `ul > li` devuelva exactamente 3 elementos, y el `10` comprueba que `#myList` tenga 4 hijos después del clic.
+
++ **Las funciones que llamaste.** Varios ejercicios sustituyen `document.querySelector` o `document.createElement` por un mock y cuentan las llamadas: el ejercicio `12` exige exactamente 7 llamadas a `createElement`, y el `09` y el `10` exigen exactamente una.
+
++ **Tu código fuente, leído como texto.** El ejercicio `06` busca en tu archivo el literal `body.innerHTML`, el `08.2` busca `childNodes`, `removeChild` y el índice `[3]`, y el `11` usa expresiones regulares para confirmar que escribiste `new Date()` y `.getFullYear()`.
+
+Por culpa de esa tercera categoría, una solución que se ve perfecta en el navegador puede seguir fallando. Los tests son estrictos a propósito: toma un test en rojo como una pista sobre la técnica que el ejercicio quiere que practiques, no como una sentencia sobre tu código.
+
+Si te atascas, cada ejercicio corregido incluye un `solution.hide.js` con una solución de referencia que funciona.
+
+## 💡 ¿Qué errores conviene evitar?
+
+Estas son las trampas que hacen fallar un ejercicio aunque la página se vea bien en pantalla:
+
++ **Cambiar `querySelector` por `getElementById` en el ejercicio `02`.** Ese test sustituye `document.querySelector` por un mock y comprueba que se llamó una vez con `#theTitle`, así que con `getElementById` no pasa. Ojo, los ejercicios `09` y `10` son el caso contrario: su código de partida ya usa `getElementById` para el botón, y ahí está bien.
+
++ **Añadir una llamada extra a `querySelector`.** Los ejercicios `03`, `04` y `08.2` comprueban que `document.querySelector` se llamó exactamente una vez. En el `03` y el `04` el archivo de partida ya trae esa llamada, así que si vuelves a buscar el elemento el test se pone en rojo; en el `08.2` esa única llamada la escribes tú.
+
++ **Usar el índice equivocado en el ejercicio `08.2`.** Borrar `children[1]` da el mismo resultado visual, pero el test busca `[3]` en tu código, que es la posición del segundo `<li>` dentro de `childNodes` cuando se cuentan también los nodos de texto de los espacios.
+
++ **Tocar el código marcado como intocable.** En el ejercicio `07` la última línea lleva el comentario "Do not modify after this line": tú solo asignas la variable `listString`. En el `13` la pista es explícita: se edita únicamente `index.js`, nunca el HTML ni el CSS.
+
++ **Escribir el año a mano en el ejercicio `11`.** Poner `2026` funciona a la vista pero falla: el test exige `new Date()` y `.getFullYear()` en tu código, exactamente una llamada a `document.write(myString)` y que se conserve el texto original de `myString` al principio.
+
++ **Contar mal las opciones del ejercicio `12`.** El array tiene 7 países, así que `createElement` debe ejecutarse 7 veces, pero `#mySelect` acaba con 8 hijos porque el `<option>` de "Select your country" ya venía en el HTML.
+
++ **Crear el elemento fuera del listener en los ejercicios `09` y `10`.** `createElement` tiene que ejecutarse cuando ocurre el clic, no cuando se carga el archivo, o el recuento de llamadas falla.
+
+## ❓ Preguntas frecuentes
+
+### ¿Necesito saber JavaScript antes de empezar con el DOM?
+
+Sí, lo básico. Conviene que te muevas con soltura entre variables, strings, concatenación, funciones y bucles `for` antes de llegar al ejercicio `12`. Si algo de eso te suena a chino, haz primero el [tutorial de JavaScript para principiantes](https://4geeks.com/es/interactive-exercise/ejercicios-javascript-para-principiantes) y vuelve.
+
+### ¿Cuál es la diferencia entre `createElement` e `innerHTML`?
+
+Las dos añaden HTML a la página y aquí practicas ambas. `createElement` crea un nodo real del DOM que puedes configurar desde JavaScript antes de insertarlo con `appendChild`, que es lo que pide el ejercicio `05`. `innerHTML` reemplaza todo el contenido de un elemento con una cadena de texto HTML, que es lo que piden el `06` y el `07`. La cadena se escribe más rápido; el nodo es más seguro y más fácil de guardar en una variable.
+
+### ¿Por qué falla mi ejercicio si la web se ve correcta?
+
+Porque algunos tests leen tu archivo como texto, no solo el resultado. El ejercicio `06` busca el literal `body.innerHTML`, el `08.2` busca `childNodes` y `[3]`, y el `11`, el `12` y el `13` aplican expresiones regulares sobre tu código. Si usas la técnica que describen las instrucciones, el test pasa.
+
+### ¿Cuánto se tarda en terminar los 14 ejercicios?
+
+El tutorial está estimado en unas 6 horas en total y su dificultad está marcada como fácil. Como la corrección es aislada, puedes parar después de cualquier ejercicio y retomarlo más tarde sin perder lo avanzado.
+
+### ¿Puedo hacer los ejercicios sin instalar nada?
+
+Sí. Al abrir el repositorio en GitHub Codespaces te montas un contenedor con Node.js 22, Jest y el plugin DOM de LearnPack ya instalados, y LearnPack arranca solo. Instalarlo en local solo compensa si prefieres trabajar sin conexión.
+
+### ¿Es gratis y de quién es el código que escribo?
+
+Acceder no cuesta nada y el JavaScript que escribes en los ejercicios es tuyo. El contenido del tutorial, en cambio, no es de código abierto: el [LICENSE.md](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/blob/HEAD/LICENSE.md) se reserva todos los derechos de propiedad intelectual y no permite republicar, vender ni redistribuir el material.
 
 <!-- hide -->
+## 📚 Tutoriales relacionados
 
-### Te recomiendo hacer los tutoriales en este orden:
+Este tutorial es un paso de una serie más larga de desarrollo web. El orden recomendado es:
 
-1. [Introducción a HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course)
-2. [Introducción a CSS](https://github.com/4GeeksAcademy/css-tutorial-exercises-course)
-3. [Introducción a JavaScript](https://github.com/4GeeksAcademy/javascript-beginner-exercises-tutorial)
-4. [Introducción al DOM](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises) ← Estás aquí 🔥
-5. [Uso de eventos & El DOM](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises)
-6. [Programación Orientada a Objetos](https://github.com/4GeeksAcademy/object-oriented-javascript-tutorial-exercises)
+1. [Introducción a HTML](https://4geeks.com/es/interactive-exercise/html-exercises-es)
+2. [Introducción a CSS](https://4geeks.com/es/interactive-exercise/css-exercises-es)
+3. [Introducción a JavaScript](https://4geeks.com/es/interactive-exercise/ejercicios-javascript-para-principiantes)
+4. [Introducción al DOM](https://4geeks.com/es/interactive-exercise/the-dom-exercises-es) ← estás aquí 🔥
+5. [Eventos y el DOM](https://4geeks.com/es/interactive-exercise/javascript-events-exercises-es)
+6. [Programación Orientada a Objetos en JavaScript](https://4geeks.com/es/interactive-exercise/object-oriented-programing-in-javascript-es)
 
-## Instalación en un clic (recomendado)
+## 🚀 Cómo empezar
 
-Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/javascript-dom-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises.git).
+Lo más rápido es la opción de un clic, sin instalar nada en tu equipo.
 
-> Una vez ya tengas abirto VSCode los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start`
+1. Abre el repositorio en [GitHub Codespaces](https://codespaces.new/?repo=4GeeksAcademy/javascript-dom-tutorial-exercises) y espera a que se construya el contenedor.
 
-## Instalación local
+2. LearnPack debería arrancar solo en cuanto VSCode esté listo. Si no lo hace, lánzalo desde la terminal:
 
-Clona el repositorio en tu ambiente local y sigue los siguientes pasos:
+    ```bash
+    learnpack start
+    ```
 
-1) Asegúrate de tener instalado [learnpack](https://github.com/learnpack/learnpack-cli), `node.js` version v14+ y jest v27. Este es el comando para instalar learnpack-cli y jest:
+3. Lee las instrucciones de la izquierda, edita `index.js`, pulsa el botón de compilar para ver la web y pulsa el de test para corregir el ejercicio.
 
-```bash
-$ npm i @learnpack/learnpack@2.1.20 jest@27.0.6 -g
-```
+> 💡 Los ejercicios están numerados a propósito. Hacerlos en orden importa, porque cada uno se apoya en la función que introdujo el anterior.
 
-2) Clona o descarga este repositorio. Una vez que termines de descargar, encontrarás una nueva carpeta con un subdirectorio "exercises" que contiene todos los ejercicios dentro.
+## 💻 Instalación local
 
-3) Instala el plugin de learnpack para probar y compilar vanillajs:
+Si prefieres trabajar en tu propia máquina:
 
-```bash
-$ learnpack plugins:install learnpack-dom
-```
+1. Instala Node.js 22 (la versión que usan el contenedor y la CI del repositorio) y después LearnPack, Jest y el plugin del DOM de forma global:
 
-4) Inicializa el tutorial ejecutando el siguiente comando en la raíz del proyecto:
+    ```bash
+    npm i -g jest@29.7.0 jest-environment-jsdom@29.7.0 @learnpack/learnpack@5.0.348
+    learnpack plugins:install @learnpack/dom@1.1.7
+    ```
 
-```bash
-$ learnpack start
-```
+2. Clona el repositorio y entra en la carpeta que crea:
 
-<!-- endhide -->
+    ```bash
+    git clone https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises.git
+    cd javascript-dom-tutorial-exercises
+    ```
+
+3. Arranca el tutorial desde la raíz del proyecto:
+
+    ```bash
+    learnpack start
+    ```
+
+## 📚 Cómo están organizados los ejercicios
 
-## ¿Cómo están organizados los ejercicios?
+Cada ejercicio corregido vive en su propia carpeta dentro de [`exercises/`](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/tree/HEAD/exercises) y es una web pequeña e independiente:
 
-Cada ejercicio es un pequeño sitio web de vanillajs que contiene los siguientes archivos:
++ **`index.html`** — el HTML de la página. Ya trae los elementos que tienes que seleccionar y la etiqueta `<script>` que carga tu JavaScript.
 
-1. **index.js:** representa el archivo JavaScript de entrada que se ejecutará cuando se cargue el sitio web.
-1. **index.html:** representa la entrada HTML para el sitio web.
-1. **style.css:** los estilos de tu sitio web, deben importarse desde index.html
-2. **README.md:** contiene las instrucciones de los ejercicios.
-3. **test.js:** no tienes que abrir este archivo, contiene el script de test para el ejercicio.
++ **`index.js`** — el archivo que editas. Algunos ejercicios te dan una línea de partida que conviene conservar.
 
-> Nota: Estos ejercicios tienen calificación automática. Los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte.
++ **`styles.css`** — los estilos de la página, importados desde el HTML.
 
-## Colaboradores
- 
-Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
++ **`README.md`** y **`README.es.md`** — las instrucciones, en inglés y en español.
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 🤓, (build-tutorial) ✅ (documentación) 📖
++ **`tests.js`** — el script de corrección. No necesitas abrirlo, pero leerlo es la forma más rápida de entender por qué falla un ejercicio.
 
-2. [Paolo (plucodev)](https://github.com/plucodev), contribución: (bug reports) 🐛, (programador) 💻, (traducción) 🌎
++ **`solution.hide.js`** — una solución de referencia, que LearnPack mantiene oculta hasta que la pides.
 
-Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
+¿Has encontrado un fallo o algo desactualizado? Abre un issue en [learnpack/learnpack](https://github.com/learnpack/learnpack/issues/new).
 
-Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
+## 🤝 Colaboradores
+
++ [Alejandro Sánchez (@alesanchezr)](https://github.com/alesanchezr) — código 💻, idea 🤔, tests ⚠️, tutorial 📖.
+
++ [Paolo (@plucodev)](https://github.com/plucodev) — reporte de bugs 🐛, código 💻, traducción 🌎.
+
+Gracias también a [todas las demás personas que han contribuido](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/graphs/contributors). Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors) y toda contribución es bienvenida.
+<!-- endhide -->

From 0d1270c12931bc20402ead4972d51f890d4c4af1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?=
 <145539062+KrilinZ@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:12:34 +0200
Subject: [PATCH 3/4] docs(readme): rewrite for clarity, SEO and AI answer
 engines


From 6d06ec8201ff3a89242ca2fe6ef4f917b590d5d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?=
 <145539062+KrilinZ@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:12:35 +0200
Subject: [PATCH 4/4] docs(readme): rewrite for clarity, SEO and AI answer
 engines