From 4fb3e60ad6911342f7c2e5941e2878bd84aa70ea 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 12:25:00 +0200
Subject: [PATCH 1/2] docs(readme): rewrite for clarity, SEO and AI answer
 engines

---
 README.md | 211 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 155 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index 4f1f51b6..32938086 100644
--- a/README.md
+++ b/README.md
@@ -1,96 +1,195 @@
 <!-- hide -->
-# HTML5 Exercises Tutorial at 4Geeks Academy
-<a href="https://www.4geeksacademy.co"><img height="280" align="right" src="https://github.com/learnpack/html-tutorial-exercises-course/blob/master/HTML-badge.png"></a>
+<div align="center">
 
-By [@alesanchezr](https://twitter.com/alesanchezr) and [other contributors](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/graphs/contributors) at [4Geeks Academy](https://4geeksacademy.co/)
+# Learn the basics of HTML Interactively
 
-<p>
-<img alt="last commit" src="https://img.shields.io/github/last-commit/4geeksacademy/javascript-arrays-exercises-tutorial" class="text-center" />
-<img alt="last commit" src="https://img.shields.io/badge/build_by-Developers-blue" class="text-center" />
-<img alt="last commit" src="https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter" class="text-center" />
-</p>
+[![Certified tutorial](https://img.shields.io/badge/4Geeks_Academy-Certified_tutorial-2563eb?style=for-the-badge)](https://4geeks.com/interactive-exercise/html-tutorial-exercises-course)
+[![Autograded with LearnPack](https://img.shields.io/badge/LearnPack-16_autograded_exercises-2563eb?style=for-the-badge)](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/tree/HEAD/exercises)
+[![Open in Codespaces](https://img.shields.io/badge/Open_in-Codespaces-fb5a1f?style=for-the-badge&logo=github)](https://github.com/codespaces/new/?repo=4GeeksAcademy/html-tutorial-exercises-course)
 
-Complete selection of autograded html exercises, anyone interested in learning HTML!
-      
-Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](https://twitter.com/alesanchezr) if you have any questions.
+![Cover image of the tutorial: the words Learn HTML interactive in dark red next to the orange HTML5 shield logo](https://raw.githubusercontent.com/4GeeksAcademy/html-tutorial-exercises-course/master/preview.png)
 
+</div>
 <!-- endhide -->
 
-## You'll be learning the following concepts:
+This tutorial teaches HTML through 16 auto-graded exercises plus a welcome step, about 8 hours of work at an easy difficulty level and with no prior coding experience required. You edit a real `index.html` file, press run to preview it, and 55 automated checks tell you instantly whether the markup is correct. It covers document structure, headings, lists, anchors, relative and absolute paths, tables, images, `<video>` and `<iframe>`. Fifteen exercises include a recorded video solution.
 
-1. Get familiar with a good deal of the most popular HTML Tags.
+<!-- hide -->
+## 📋 About this tutorial
+
+- **Difficulty**: Easy — designed for absolute beginners, no previous HTML needed
+- **Estimated duration**: 8 hours
+- **Exercises**: 17 steps (1 welcome + 16 graded exercises)
+- **Automated checks**: 55 assertions running on Jest + jsdom
+- **Video solutions**: yes, 15 of the 16 graded exercises have one
+- **Technologies**: HTML5, LearnPack, Node.js, Jest
+- **Editor**: VS Code (Codespaces, Gitpod or local), LearnPack editor v5.0
+- **Languages**: [English](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/blob/HEAD/README.md) · [Español](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/blob/HEAD/README.es.md)
+<!-- endhide -->
 
-2. Using the tags together to create a simple HTML Website.
+## 🎯 What will you learn?
 
-3. Linking websites together using Anchors with Relative or Absolute paths.
+HTML is a markup language: everything you write lives inside opening and closing tags. This tutorial walks that idea from a single `<span>` up to a full document with tables, media and internal navigation. By the end you will be able to:
 
-4. The HTML audio and video tag.
+- Build the skeleton of any web page: `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>` and `<body>`, and understand what happens when you leave `<head>` out.
+- Use the document-style tags HTML was invented for: `<h1>` and `<h2>`, `<p>`, `<strong>`, `<i>`, `<blockquote>`, `<br />`, `<ul>`, `<ol>` and `<li>`.
+- Link pages together with `<a>` and its `href` attribute, open links in a new tab with `target="_blank"`, and jump to a section of the same page with `href="#element-id"`.
+- Tell relative paths from absolute paths, and know which one to use for an image or a link that leaves your site.
+- Nest tags correctly: an `<i>` inside an `<h1>`, a `<strong>` inside a `<p>`, a whole `<h2>` and `<p>` inside an `<a>`.
+- Lay out content with `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>` and `<td>` using plain HTML attributes such as `width`, `border`, `height` and `valign` — the way layouts were built before CSS existed.
+- Embed media: an `<img>` sized with `width`, a `<video>` with `<source>`, `autoplay` and `muted`, and an `<iframe>` that puts a YouTube player inside your own page.
 
-<!-- hide -->
+## 👀 What will you build?
 
-#### Before we start... other related tutorials
+There is no single final project here. Instead you complete 16 small graded exercises, each one a working web page you write from scratch or fix:
 
-<ol>
-  <li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Learn HTML</a>← 🔥 You are here now</li>
-  <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Learn HTML5 Forms</a></li>
-  <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Learn CSS</a></li>
-  <li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Learn CSS Layouts</a></li>
-  <li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Learn Bootstrap</a></li>
-</ol>
+1. **`01` Hello World** — wrap text in `<span>` and `<strong>` and press run to see the result.
+2. **`01.1` Like Word** — write your first `<p>`, mapping HTML tags to the elements of a word processor.
+3. **`02` Website Structure** — add doctype, `<html>`, `<head>`, `<title>` and `<body>`, and see the title appear in the browser tab.
+4. **`03` Hello without Head** — the same structure minus the `<head>`, with an `<h1>` carrying your name.
+5. **`04` List of Reasons** — an ordered list `<ol>` with exactly 6 `<li>` items.
+6. **`05` Create Anchors** — your first attribute: an `<a href="https://google.com">`.
+7. **`06` New Window** — make that same anchor open in a new tab.
+8. **`07` Same Page** — link to another section of the document using `id` and `#`.
+9. **`08` Relative vs Absolute Path** — convert an image's relative `src` into a full absolute URL without breaking it.
+10. **`09` Formatting Text** — reproduce a formatted document with headings, paragraphs, a `<blockquote>` and a bullet list, no CSS allowed.
+11. **`10` Replicate HTML** — rebuild a page from a screenshot using `<h1>`, `<h2>`, `<ul>`, `<ol>`, `<li>` and `<p>`.
+12. **`11` Nested Tags** — three nesting drills, each with its own expected result.
+13. **`12` My First Table** — a 3-column contacts table with a red header row, built step by step.
+14. **`13` Image with Text** — a two-column table layout: a 25% image column and a top-aligned text column.
+15. **`14` Video Tag** — a full-screen background video with `autoplay`, `muted` and no controls.
+16. **`15` Iframe** — a 1280x720 `<iframe>` embedding a YouTube video.
 
-## One click installation (recommended):
+Exercise `10` is a good example of the style: you are shown an annotated screenshot and asked to produce the markup that generates it.
 
-You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://github.com/codespaces/new/?repo=4GeeksAcademy/html-tutorial-exercises-course) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-tutorial-exercises-course.git).
+![Screenshot used in exercise 10: a formatted document titled The learning essay, with each part labelled in red with the HTML tag that produces it - h1 for the title, h2 for the section headings, p for the paragraph, ol for the numbered list and ul for the bullet list](https://raw.githubusercontent.com/4GeeksAcademy/html-tutorial-exercises-course/master/.learn/assets/10-replicate-html.png)
 
-> 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`
+## 🎓 What do you need before starting?
 
-## Manual installation
+- **Prior programming knowledge**: none. The first exercise assumes you have never written a tag before.
+- **CSS or JavaScript**: not required. The tutorial deliberately sticks to plain HTML attributes, and exercises `09` and `12` explicitly tell you not to use CSS.
+- **Setup, easiest path**: none — open the repository in GitHub Codespaces or Gitpod and the exercises start on their own.
+- **Setup, local path**: Node.js 14 or higher, plus the `@learnpack/learnpack` CLI installed globally.
+- **Time**: around 8 hours in total, which you can split across sessions — LearnPack remembers where you left off.
 
-Clone the repository in your local environment and follow the steps below:
+## ✅ How does the automatic grading work?
 
-1. Install learnpack, the package manager for learning tutorials and the html compiler plugin for learnpack, make sure you also have node.js 14+:
+Every graded exercise folder contains a `tests.js` file next to your `index.html`. When you press the run or test button, LearnPack reads your `index.html`, parses it into a real DOM with jsdom, and runs the Jest assertions against it. There are 55 assertions in total across the 16 exercises, between 1 and 5 per exercise.
 
-```sh
-$ npm i @learnpack/learnpack -g
-```
+The checks query the DOM the same way a browser would. In exercise `06`, for example, the three assertions look for an `<a>` inside the `<body>`, verify its `href` points to Google, and verify its `target` attribute equals `_blank`. Each assertion has a human-readable message, so a failure reads like "The `<a>` tag should have the attribute target with `_blank` as value" rather than a stack trace.
 
-2. Download this particular exercise and `cd` into the folder:
+> 💡 The tests are deliberately strict about attributes and values. Treat a red test as a hint about what is missing, not as a verdict on your code — the original authors say the same thing in the welcome exercise.
 
-```sh
-$ git clone https://github.com/4GeeksAcademy/html-tutorial-exercises-course
-$ cd html-tutorial-exercises-course
-```
+Each exercise folder also ships a `solution.hide.html` file with a reference answer, and 15 of them link a recorded video walkthrough at the top of the instructions.
+
+## 💡 What mistakes should you avoid?
+
+- **Reaching for CSS where the exercise wants HTML attributes.** Exercises `12` and `13` build their table layouts with `width`, `border`, `height` and `valign`, and `09` tells you outright not to add any CSS. The deliberate exception is the red header row in `12`, whose grader looks for an inline `background-color` of red on the first `<tr>`.
+- **Assuming a relative path works anywhere.** A relative path such as `../../.learn/assets/rigo-baby.jpg` is resolved against the current URL. Only an absolute path, the one that includes the domain, will keep working from another site.
+- **Losing the dot in `.learn`.** Exercise `08` warns about it specifically: the assets folder is `.learn`, not `learn`, and dropping the dot silently breaks the image.
+- **Linking to a section that has no `id`.** `href="#upperSide"` only works if some element actually carries `id="upperSide"`. There is no other mechanism for in-page anchors.
+- **Forgetting `muted` on an autoplaying video.** Exercise `14` requires `autoplay` and `muted` together, `width="100%"` and `height="100%"`, and no `controls` attribute.
+- **Approximating the numbers.** The list in exercise `04` must have exactly 6 items, and the iframe in `15` is checked for the literal values `1280px` and `720px`. Close is not enough for the grader.
+- **Nesting tags in the wrong direction.** In exercise `11` the `<i>` goes inside the `<h1>`, not the other way around, and both the `<h2>` and the `<p>` go inside the `<a>`.
+
+## ❓ Frequently asked questions
+
+### How long does it take to learn the basics of HTML?
+
+This tutorial is estimated at 8 hours of focused work for its 17 steps, and it is labelled easy. That is enough to write a well-structured static page on your own. Getting comfortable enough to build a site people use also requires CSS, which is a separate tutorial.
+
+### Do I need to know CSS or JavaScript first?
+
+No. HTML comes first in every sensible learning order, and this tutorial assumes zero prior knowledge. A couple of exercises actively ask you not to use CSS so that you learn what HTML alone can do — including the pre-CSS technique of laying out a page with tables, which is worth understanding even though modern sites no longer use it.
+
+### Do I have to install anything?
+
+Not necessarily. Opening the repository in GitHub Codespaces or Gitpod gives you a ready-to-use VS Code environment where the exercises launch automatically. If you prefer to work offline you need Node.js 14+ and the LearnPack CLI, then `learnpack start` from the folder that contains `learn.json`.
+
+### Is it free, and can I reuse the content?
+
+Access costs nothing and the HTML you type into your own copy is yours. The tutorial material itself is not open source, though: the [LICENSE](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/blob/HEAD/LICENSE.md) reserves all intellectual property rights and explicitly forbids republishing, selling, sub-licensing, copying or redistributing the content. Personal use is allowed; mirroring it on your own site is not. The tutorial is published by 4Geeks Academy and also runs at [4geeks.com](https://4geeks.com/interactive-exercise/html-tutorial-exercises-course).
+
+### Is HTML still worth learning?
 
-> Note: Once you finish downloading, you will find an "exercises" folder that contains all the exercises within.
+Yes. HTML is the only format browsers render natively, and every framework — React, Vue, Astro, plain templates — ultimately emits it. Knowing which tag means what is also what makes a page accessible to screen readers and legible to search engines, and it is the prerequisite for CSS, forms and the DOM APIs you will use later.
 
-3. Start the tutorial/exercises by running the following command at the same level where your learn.json file is:
+### What should I learn after finishing this?
+
+HTML forms first, since that is how a page collects data, then CSS for visual styling and CSS layouts for positioning. A conceptual refresher on any tag you get stuck on is available in the [What is HTML lesson](https://4geeks.com/lesson/what-is-html-learn-html).
+
+### Can I see the solution if I get stuck?
+
+Yes. Each graded exercise ships a `solution.hide.html` file, and 15 of the 16 also link a video where the author solves the exercise step by step. Reading the solution after an honest attempt is a legitimate way to learn; copying it before trying is not.
+
+<!-- hide -->
+## 📚 Other tutorials in this series
+
+1. [Learn HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course) ← 🔥 you are here
+2. [Learn HTML5 Forms](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises)
+3. [Learn CSS](https://github.com/4GeeksAcademy/css-tutorial-exercises-course)
+4. [Learn CSS Layouts](https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises)
+5. [Learn Bootstrap](https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial)
+
+## 🚀 How to start
+
+The fastest way is one click, no installation:
+
+- [Open in Codespaces](https://github.com/codespaces/new/?repo=4GeeksAcademy/html-tutorial-exercises-course) (recommended)
+- [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-tutorial-exercises-course.git)
+
+Once VS Code opens, the LearnPack exercises should start on their own. If they don't, type this in the terminal:
 
 ```sh
 $ learnpack start
 ```
 
-For more information or questions you can refer to the [LearnPack documentation](https://4geeks.com/docs/learnpack/quickstart-for-learners).
+You can also watch the [intro video](https://www.youtube.com/watch?v=V07P0hV9w_0) before you begin.
 
-<!-- endhide -->
+## 💻 Local installation
+
+1. Install LearnPack globally. You need Node.js 14 or higher:
+
+   ```sh
+   $ npm i @learnpack/learnpack -g
+   ```
+
+2. Clone the repository and enter the folder:
 
-> 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.
+   ```sh
+   $ git clone https://github.com/4GeeksAcademy/html-tutorial-exercises-course
+   $ cd html-tutorial-exercises-course
+   ```
 
-## How are the exercises organized?
+3. Start the tutorial from the same level where `learn.json` lives:
 
-Each exercise is a small React application containing the following files:
+   ```sh
+   $ learnpack start
+   ```
 
-1. **index.js:** represents the entry file for the entire app.
-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.
+More detail in the [LearnPack documentation](https://4geeks.com/docs/learnpack/quickstart-for-learners).
 
-## Contributors
- 
-Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
+## 📝 How the exercises are organized
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) ✅ (documentation) 📖
+Every graded exercise is a folder inside [`exercises/`](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/tree/HEAD/exercises) containing the same set of files:
 
-2. [David Hay (haydavid23)](https://github.com/haydavid23), contribution: (test) ⚠️
+1. **`index.html`** — the file you edit. This is the whole exercise.
+2. **`README.md`** — the instructions, hints and expected result, with a `README.es.md` next to it for Spanish.
+3. **`tests.js`** — the Jest assertions that grade your work. You don't need to open it.
+4. **`solution.hide.html`** — the reference solution, hidden by default.
 
-3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍
+The `00-welcome` folder is the only exception: it is an introduction with no code and no tests.
 
-This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!
+## 🤝 Contributors
+
+Thanks to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
+
+- [Alejandro Sánchez (@alesanchezr)](https://github.com/alesanchezr) — coder 💻, idea 🤔, build-tests ⚠️, pull-request-review 👀, build-tutorial ✅, documentation 📖
+- [David Hay (@haydavid23)](https://github.com/haydavid23) — tests ⚠️
+- [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r) — build-tutorial ✅, translation 🌍
+- [Paolo Lucano (@plucodev)](https://github.com/plucodev) — coder 💻, build-tests ⚠️
+- [Marco Gómez (@marcogonzalo)](https://github.com/marcogonzalo) — translation 🌍
+- [Charly Chacón (@charlytoc)](https://github.com/charlytoc) — remastering and video tutorials 🤖
+
+See the [full contributor list](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/graphs/contributors). This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification and contributions of any kind are welcome.
+<!-- endhide -->

From 6ee85824b715f280863cbdb338b1e592d0937081 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 12:25:02 +0200
Subject: [PATCH 2/2] docs(readme): rewrite for clarity, SEO and AI answer
 engines

---
 README.es.md | 214 +++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 156 insertions(+), 58 deletions(-)

diff --git a/README.es.md b/README.es.md
index cec7e162..b8516868 100644
--- a/README.es.md
+++ b/README.es.md
@@ -1,97 +1,195 @@
-# Tutorial de Ejercicios de HTML5 de 4Geeks Academy
 <!-- hide -->
-<a href="https://www.4geeksacademy.co"><img height="280" align="right" src="https://github.com/learnpack/html-tutorial-exercises-course/blob/master/HTML-badge.png"></a>
+<div align="center">
 
-      
-      
-Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcadem/html-tutorial-exercises-course/graphs/contributors) de [4Geeks Academy](https://4geeksacademy.co/)
+# Aprende lo básico de HTML Interactivamente
 
-<p>
-<img alt="last commit" src="https://img.shields.io/github/last-commit/4geeksacademy/javascript-arrays-exercises-tutorial" class="text-center" />
-<img alt="last commit" src="https://img.shields.io/badge/build_by-Developers-blue" class="text-center" />
-<img alt="last commit" src="https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter" class="text-center" />
-</p>
+[![Tutorial certificado](https://img.shields.io/badge/4Geeks_Academy-Tutorial_certificado-2563eb?style=for-the-badge)](https://4geeks.com/es/interactive-exercise/html-tutorial-exercises-course)
+[![Autocorregido con LearnPack](https://img.shields.io/badge/LearnPack-16_ejercicios_autocorregidos-2563eb?style=for-the-badge)](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/tree/HEAD/exercises)
+[![Abrir en Codespaces](https://img.shields.io/badge/Abrir_en-Codespaces-fb5a1f?style=for-the-badge&logo=github)](https://github.com/codespaces/new/?repo=4GeeksAcademy/html-tutorial-exercises-course)
 
-¡Selección completa de ejercicios html autograduados para cualquier persona interesada en aprender HTML!
+![Imagen de portada del tutorial: las palabras Learn HTML interactive en rojo oscuro junto al logotipo naranja del escudo de HTML5](https://raw.githubusercontent.com/4GeeksAcademy/html-tutorial-exercises-course/master/preview.png)
 
-¡Hola! Soy [Alejandro Sanchez (Github: @alesanchezr)](https://github.com/alesanchezr), ¡muy emocionado de tenerte aquí! 🎉 😂 Aprender a programar es difícil, ¡necesitas entrenamiento! [Envíame un mensaje privado en Twitter](https://twitter.com/alesanchezr) si tienes alguna pregunta. 
+</div>
+<!-- endhide -->
+
+Este tutorial enseña HTML con 16 ejercicios autocorregidos más un paso de bienvenida: unas 8 horas de trabajo, dificultad fácil y sin necesidad de saber programar. Editas un fichero `index.html` real, pulsas run para previsualizarlo y 55 comprobaciones automáticas te dicen al instante si el marcado está bien. Cubre estructura del documento, encabezados, listas, enlaces, rutas relativas y absolutas, tablas, imágenes, `<video>` e `<iframe>`. Quince ejercicios traen solución en vídeo.
 
+<!-- hide -->
+## 📋 Sobre este tutorial
+
+- **Dificultad**: fácil — pensado para principiantes absolutos, no hace falta saber HTML
+- **Duración estimada**: 8 horas
+- **Ejercicios**: 17 pasos (1 de bienvenida + 16 corregidos automáticamente)
+- **Comprobaciones automáticas**: 55 aserciones sobre Jest + jsdom
+- **Soluciones en vídeo**: sí, 15 de los 16 ejercicios corregidos tienen una
+- **Tecnologías**: HTML5, LearnPack, Node.js, Jest
+- **Editor**: VS Code (Codespaces, Gitpod o local), editor de LearnPack v5.0
+- **Idiomas**: [English](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/blob/HEAD/README.md) · [Español](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/blob/HEAD/README.es.md)
 <!-- endhide -->
 
-## Aprenderás los siguientes conceptos:
- 
-1. Familiarizarte con la mayoría de las etiquetas HTML más populares.
+## 🎯 ¿Qué vas a aprender?
 
-2. Usar varias etiquetas juntas para crear un sitio web HTML simple.
+HTML es un lenguaje de marcado: todo lo que escribes vive dentro de etiquetas de apertura y cierre. Este tutorial lleva esa idea desde un simple `<span>` hasta un documento completo con tablas, contenido multimedia y navegación interna. Al terminar sabrás:
 
-3. Vinculación de sitios web mediante enlaces (anchors) con rutas relativas o absolutas.
+- Montar el esqueleto de cualquier página: `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>` y `<body>`, y qué pasa cuando dejas fuera el `<head>`.
+- Usar las etiquetas de documento para las que nació HTML: `<h1>` y `<h2>`, `<p>`, `<strong>`, `<i>`, `<blockquote>`, `<br />`, `<ul>`, `<ol>` y `<li>`.
+- Enlazar páginas con `<a>` y su atributo `href`, abrir un enlace en una pestaña nueva con `target="_blank"` y saltar a una sección de la misma página con `href="#id-del-elemento"`.
+- Distinguir una ruta relativa de una absoluta y saber cuál toca en cada caso, sea una imagen o un enlace que se va fuera de tu sitio.
+- Anidar etiquetas correctamente: una `<i>` dentro de un `<h1>`, un `<strong>` dentro de un `<p>`, y hasta un `<h2>` y un `<p>` enteros dentro de un `<a>`.
+- Maquetar con `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>` y `<td>` usando atributos HTML puros como `width`, `border`, `height` y `valign`, que es como se maquetaba antes de que existiera CSS.
+- Incrustar medios: una `<img>` dimensionada con `width`, un `<video>` con `<source>`, `autoplay` y `muted`, y un `<iframe>` que mete un reproductor de YouTube dentro de tu propia página.
 
-4. La etiqueta HTML de audio y video.
+## 👀 ¿Qué vas a construir?
 
-<!-- hide -->
-#### Antes de empezar... otros tutoriales relacionados
+Aquí no hay un proyecto final único. Lo que haces son 16 ejercicios pequeños y corregidos, cada uno una página web que escribes desde cero o que arreglas:
 
-<ol>
-  <li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Aprende HTML</a>← 🔥 Estás aquí</li>
-  <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5</a></li>
-  <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a></li>
-  <li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Aprende CSS Layouts</a></li>
-  <li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Aprende Bootstrap</a></li>
-</ol>
+1. **`01` Hello World** — envuelve texto en `<span>` y `<strong>` y pulsa run para ver el resultado.
+2. **`01.1` Like Word** — tu primer `<p>`, relacionando las etiquetas HTML con los elementos de un procesador de textos.
+3. **`02` Website Structure** — añade doctype, `<html>`, `<head>`, `<title>` y `<body>`, y ve el título aparecer en la pestaña del navegador.
+4. **`03` Hello without Head** — la misma estructura pero sin `<head>`, con un `<h1>` que lleva tu nombre.
+5. **`04` List of Reasons** — una lista ordenada `<ol>` con exactamente 6 elementos `<li>`.
+6. **`05` Create Anchors** — tu primer atributo: un `<a href="https://google.com">`.
+7. **`06` New Window** — haz que ese mismo enlace se abra en una pestaña nueva.
+8. **`07` Same Page** — enlaza a otra sección del documento usando `id` y `#`.
+9. **`08` Relative vs Absolute Path** — convierte el `src` relativo de una imagen en una URL absoluta completa sin romperla.
+10. **`09` Formatting Text** — reproduce un documento con formato usando encabezados, párrafos, un `<blockquote>` y una lista de viñetas, sin CSS.
+11. **`10` Replicate HTML** — reconstruye una página a partir de una captura usando `<h1>`, `<h2>`, `<ul>`, `<ol>`, `<li>` y `<p>`.
+12. **`11` Nested Tags** — tres ejercicios de anidado, cada uno con su resultado esperado.
+13. **`12` My First Table** — una tabla de contactos de 3 columnas con cabecera roja, construida paso a paso.
+14. **`13` Image with Text** — maquetación en dos columnas con tabla: una columna de imagen al 25% y otra de texto alineada arriba.
+15. **`14` Video Tag** — un vídeo de fondo a pantalla completa con `autoplay`, `muted` y sin controles.
+16. **`15` Iframe** — un `<iframe>` de 1280x720 que incrusta un vídeo de YouTube.
 
-## Instalación en un clic (recomendado)
+El ejercicio `10` resume bien el estilo del tutorial: te enseñan una captura anotada y tienes que escribir el marcado que la genera.
 
-Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/html-tutorial-exercises-course) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-tutorial-exercises-course.git).
+![Captura usada en el ejercicio 10: un documento con formato titulado The learning essay, con cada parte etiquetada en rojo con la etiqueta HTML que la produce - h1 para el título, h2 para los encabezados de sección, p para el párrafo, ol para la lista numerada y ul para la lista de viñetas](https://raw.githubusercontent.com/4GeeksAcademy/html-tutorial-exercises-course/master/.learn/assets/10-replicate-html.png)
 
-> 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`
+## 🎓 ¿Qué necesitas antes de empezar?
 
-## Instalación manual
+- **Conocimientos previos de programación**: ninguno. El primer ejercicio da por hecho que nunca has escrito una etiqueta.
+- **CSS o JavaScript**: no hacen falta. El tutorial se queda a propósito en atributos HTML puros, y los ejercicios `09` y `12` te piden de forma explícita que no uses CSS.
+- **Instalación, camino fácil**: ninguna. Abres el repositorio en GitHub Codespaces o en Gitpod y los ejercicios arrancan solos.
+- **Instalación, camino local**: Node.js 14 o superior y la CLI `@learnpack/learnpack` instalada de forma global.
+- **Tiempo**: unas 8 horas en total, que puedes repartir en varias sesiones — LearnPack recuerda por dónde ibas.
 
-Clona el repositorio en tu ambiente local y sigue los siguientes pasos:
+## ✅ ¿Cómo funciona la corrección automática?
 
-1. Instala learnpack, el package manager para tutoriales de aprendizaje y el html compiler plugin para learnpack, asegúrate también de tener node.js 14+:
+Cada carpeta de ejercicio corregido tiene un fichero `tests.js` junto a tu `index.html`. Cuando pulsas el botón de run o de test, LearnPack lee tu `index.html`, lo convierte en un DOM real con jsdom y ejecuta contra él las aserciones de Jest. En total hay 55 aserciones repartidas entre los 16 ejercicios, entre 1 y 5 por ejercicio.
 
-```bash
-$ npm i @learnpack/learnpack -g
-```
+Las comprobaciones consultan el DOM igual que lo haría un navegador. En el ejercicio `06`, por ejemplo, las tres aserciones buscan un `<a>` dentro del `<body>`, comprueban que su `href` apunta a Google y comprueban que su atributo `target` vale `_blank`. Cada aserción lleva un mensaje legible, así que un fallo se lee como "la etiqueta `<a>` debería tener el atributo target con valor `_blank`" y no como una traza de error.
 
-2. Descarga estos ejercicios en particular y luego `cd` para entrar en la carpeta:
+> 💡 Los tests son deliberadamente estrictos con los atributos y sus valores. Toma un test en rojo como una pista de lo que falta, no como un veredicto sobre tu código: los propios autores lo advierten en el ejercicio de bienvenida.
 
-```bash
-$ git clone https://github.com/4GeeksAcademy/html-tutorial-exercises-course
-$ cd html-tutorial-exercises-course
-```
+Cada carpeta incluye además un `solution.hide.html` con la solución de referencia, y 15 de los ejercicios enlazan un vídeo con la resolución al principio de las instrucciones.
+
+## 💡 ¿Qué errores conviene evitar?
+
+- **Tirar de CSS donde el ejercicio pide atributos HTML.** Los ejercicios `12` y `13` maquetan sus tablas con `width`, `border`, `height` y `valign`, y el `09` dice sin rodeos que no añadas nada de CSS. La excepción deliberada es la fila de cabecera roja del `12`, cuyo corrector busca un `background-color` rojo en línea sobre el primer `<tr>`.
+- **Dar por hecho que una ruta relativa funciona desde cualquier sitio.** Una ruta relativa como `../../.learn/assets/rigo-baby.jpg` se resuelve contra la URL actual. Solo una ruta absoluta, la que incluye el dominio, seguirá funcionando desde otro sitio web.
+- **Perder el punto de `.learn`.** El ejercicio `08` avisa de esto en concreto: la carpeta de recursos es `.learn`, no `learn`, y quitarle el punto rompe la imagen sin decir nada.
+- **Enlazar a una sección que no tiene `id`.** `href="#upperSide"` solo funciona si algún elemento lleva de verdad `id="upperSide"`. No hay otra forma de hacer anclas internas.
+- **Olvidar `muted` en un vídeo con autoplay.** El ejercicio `14` exige `autoplay` y `muted` juntos, `width="100%"` y `height="100%"`, y ningún atributo `controls`.
+- **Aproximar las cifras.** La lista del ejercicio `04` tiene que llevar exactamente 6 elementos, y en el `15` el iframe se comprueba con los valores literales `1280px` y `720px`. Al corrector no le vale "casi".
+- **Anidar al revés.** En el ejercicio `11` la `<i>` va dentro del `<h1>`, no al contrario, y tanto el `<h2>` como el `<p>` van dentro del `<a>`.
+
+## ❓ Preguntas frecuentes
+
+### ¿Cuánto se tarda en aprender lo básico de HTML?
+
+Este tutorial estima 8 horas de trabajo concentrado para sus 17 pasos y está etiquetado como fácil. Con eso ya escribes por tu cuenta una página estática bien estructurada. Llegar a construir un sitio que alguien use requiere además CSS, que es otro tutorial aparte.
+
+### ¿Necesito saber CSS o JavaScript antes?
+
+No. HTML va primero en cualquier orden de aprendizaje razonable, y este tutorial parte de cero. Un par de ejercicios te piden expresamente que no uses CSS para que veas hasta dónde llega HTML solo, incluida la maquetación con tablas anterior a CSS, que conviene entender aunque hoy ya no se use en sitios modernos.
+
+### ¿Tengo que instalar algo?
+
+No necesariamente. Abrir el repositorio en GitHub Codespaces o en Gitpod te da un VS Code listo donde los ejercicios se lanzan automáticamente. Si prefieres trabajar sin conexión necesitas Node.js 14+ y la CLI de LearnPack, y después ejecutar `learnpack start` desde la carpeta donde está `learn.json`.
+
+### ¿Es gratis? ¿Puedo reutilizar el contenido?
+
+Acceder no cuesta nada y el HTML que escribas en tu propia copia es tuyo. Ahora bien, el material del tutorial no es open source: la [LICENCIA](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/blob/HEAD/LICENSE.md) se reserva todos los derechos de propiedad intelectual y prohíbe expresamente republicar, vender, sublicenciar, copiar o redistribuir el contenido. El uso personal sí está permitido; replicarlo en tu web, no. El tutorial lo publica 4Geeks Academy y también se puede hacer en [4geeks.com](https://4geeks.com/es/interactive-exercise/html-tutorial-exercises-course).
+
+### ¿Sigue mereciendo la pena aprender HTML?
 
-> Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios.
+Sí. HTML es el único formato que los navegadores renderizan de forma nativa, y todos los frameworks — React, Vue, Astro, plantillas de toda la vida — acaban emitiéndolo. Saber qué significa cada etiqueta es además lo que hace que una página sea accesible para un lector de pantalla y legible para un buscador, y es el requisito previo de CSS, los formularios y las APIs del DOM que usarás después.
 
-3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json:
+### ¿Qué aprendo después de esto?
 
-```bash
+Primero formularios HTML, que es como una página recoge datos; después CSS para el aspecto visual y CSS Layouts para la colocación. Si te atascas con alguna etiqueta, tienes un repaso conceptual en la [lección sobre qué es HTML](https://4geeks.com/es/lesson/what-is-html-learn-html).
+
+### ¿Puedo ver la solución si me atasco?
+
+Sí. Cada ejercicio corregido incluye un fichero `solution.hide.html`, y 15 de los 16 enlazan además un vídeo donde el autor resuelve el ejercicio paso a paso. Leer la solución después de intentarlo en serio es una forma legítima de aprender; copiarla antes de intentarlo, no.
+
+<!-- hide -->
+## 📚 Otros tutoriales de la serie
+
+1. [Aprende HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course) ← 🔥 estás aquí
+2. [Aprende Formularios HTML5](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises)
+3. [Aprende CSS](https://github.com/4GeeksAcademy/css-tutorial-exercises-course)
+4. [Aprende CSS Layouts](https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises)
+5. [Aprende Bootstrap](https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial)
+
+## 🚀 Cómo empezar
+
+Lo más rápido es un clic, sin instalar nada:
+
+- [Abrir en Codespaces](https://github.com/codespaces/new/?repo=4GeeksAcademy/html-tutorial-exercises-course) (recomendado)
+- [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-tutorial-exercises-course.git)
+
+Cuando se abra VS Code, los ejercicios de LearnPack deberían arrancar solos. Si no lo hacen, escribe esto en la terminal:
+
+```sh
 $ learnpack start
 ```
 
-Para más detalles sobre instalación o cualquier otra cosa puedes referirte a la [documentacion de LearnPack](https://4geeks.com/es/docs/learnpack/quickstart-para-estudiantes).
+También puedes ver el [vídeo de introducción](https://www.youtube.com/watch?v=kDQAnCqGS-w) antes de empezar.
 
-<!-- endhide -->
+## 💻 Instalación local
+
+1. Instala LearnPack de forma global. Necesitas Node.js 14 o superior:
+
+   ```sh
+   $ npm i @learnpack/learnpack -g
+   ```
 
-> 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.
+2. Clona el repositorio y entra en la carpeta:
 
-## ¿Cómo están organizados los ejercicios?
+   ```sh
+   $ git clone https://github.com/4GeeksAcademy/html-tutorial-exercises-course
+   $ cd html-tutorial-exercises-course
+   ```
 
-Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:
+3. Arranca el tutorial desde el mismo nivel donde está `learn.json`:
 
-1. **index.js:** representa el archivo de entrada para toda la aplicación.
-2. **README.md:** contiene las instrucciones de los ejercicios.
-3. **test.js:** no tienes que abrir este archivo, contiene el script del test para el ejercicio.
+   ```sh
+   $ learnpack start
+   ```
 
-## Colaboradores
+Tienes más detalle en la [documentación de LearnPack](https://4geeks.com/es/docs/learnpack).
 
-Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
+## 📝 Cómo están organizados los ejercicios
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖
+Cada ejercicio corregido es una carpeta dentro de [`exercises/`](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/tree/HEAD/exercises) con este mismo conjunto de ficheros:
 
-2. [David Hay (haydavid23)](https://github.com/haydavid23), contribución: (tests) ⚠️
+1. **`index.html`** — el fichero que editas. El ejercicio es esto.
+2. **`README.md`** — las instrucciones, las pistas y el resultado esperado, con un `README.es.md` al lado para la versión en español.
+3. **`tests.js`** — las aserciones de Jest que corrigen tu trabajo. No necesitas abrirlo.
+4. **`solution.hide.html`** — la solución de referencia, oculta por defecto.
 
-3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribución: (build-tutorial) ✅, Traducción 🌍
+La carpeta `00-welcome` es la única excepción: es una introducción sin código y sin tests.
 
-Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
+## 🤝 Colaboradores
+
+Gracias a estas personas maravillosas ([leyenda de emojis](https://github.com/kentcdodds/all-contributors#emoji-key)):
+
+- [Alejandro Sánchez (@alesanchezr)](https://github.com/alesanchezr) — código 💻, idea 🤔, tests ⚠️, revisión de pull requests 👀, construcción del tutorial ✅, documentación 📖
+- [David Hay (@haydavid23)](https://github.com/haydavid23) — tests ⚠️
+- [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r) — construcción del tutorial ✅, traducción 🌍
+- [Paolo Lucano (@plucodev)](https://github.com/plucodev) — código 💻, tests ⚠️
+- [Marco Gómez (@marcogonzalo)](https://github.com/marcogonzalo) — traducción 🌍
+- [Charly Chacón (@charlytoc)](https://github.com/charlytoc) — remasterización y vídeos 🤖
+
+Aquí está la [lista completa de colaboradores](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/graphs/contributors). Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors) y toda contribución es bienvenida.
+<!-- endhide -->