No es aprender HTML. Es conocerte.
En 12 semanas de bootcamp vas a encontrarte con cientos de errores. El código no va a funcionar. Las cosas no van a tener sentido. Lo que determina si vas a llegar al final no es cuánto sabes hoy, sino cómo reaccionas cuando algo se rompe.
Mientras haces el ejercicio, observa tus reacciones internas. No las juzgues. Solo obsérvalas. Al final de la sesión vas a tener información muy valiosa sobre cómo aprendes.
¿Por qué no funciona? Quiero entenderlo.
Señal positiva. La curiosidad es el combustible del aprendizaje.
Me frustra pero voy a seguir intentándolo.
Completamente normal. La resiliencia es una habilidad que se entrena.
Quiero que alguien me lo arregle ya.
A reflexionar. No es un juicio, pero si esta es tu reacción dominante ante los errores, merece una conversación honesta.
Ve este video primero
Este video muestra a alguien aprendiendo HTML por primera vez. Observa su proceso mental, no solo el código.
HTML Tutorial for Beginners: HTML Crash Course · Traversy Media
El reto: construir una página personal
Solo con HTML. Sin CSS. Sin JavaScript. Sin frameworks. Abre un editor de texto, crea un archivo y empieza a escribir. Si algo no funciona, no busques la solución de inmediato: intenta entender por qué.
Abre VS Code o cualquier editor
Crea un archivo llamado index.html en tu escritorio.
5 minEscribe la estructura base
Sin copiar y pegar. Escribe tú mismo la estructura básica del HTML.
20 minAñade tu contenido
Título con tu nombre, párrafo de presentación, lista de 3 cosas que te gustan, un enlace.
30 minRompe algo a propósito
Borra una etiqueta de cierre. Escribe mal un atributo. Observa qué pasa.
15 minAñade una imagen y una tabla
Sin haber visto cómo se hace. Intenta deducirlo de lo que ya sabes de HTML.
30 minReflexión escrita
Escribe 5 líneas sobre cómo te sentiste durante el proceso. Sin juicios.
20 minPrueba aquí antes de ir a tu editor
Este editor te permite escribir HTML y ver el resultado al instante. Úsalo para experimentar, no para hacer el ejercicio completo.
Las etiquetas que necesitas hoy
No hay que memorizarlas. El objetivo es que sepas que existen y dónde buscarlas.
<!-- Estructura mínima de cualquier documento HTML --> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Título de la página</title> </head> <body> <!-- Todo el contenido visible va aquí --> </body> </html>
<h1>Título principal</h1> <h2>Subtítulo</h2> <h3>Sección</h3> <p>Párrafo de texto</p> <strong>Negrita</strong> <em>Cursiva</em> <br> <!-- Salto de línea -->
<!-- Lista sin orden --> <ul> <li>Elemento</li> <li>Elemento</li> </ul> <!-- Lista numerada --> <ol> <li>Primero</li> <li>Segundo</li> </ol>
<!-- Enlace --> <a href="https://ejemplo.com"> Texto del enlace </a> <!-- Imagen --> <img src="foto.jpg" alt="Descripción" >
<header>Cabecera</header> <nav>Navegación</nav> <main>Contenido principal</main> <section>Sección</section> <article>Artículo</article> <aside>Lateral</aside> <footer>Pie de página</footer>
¿Qué has conseguido construir?
Marca lo que ya tienes en tu página.
- El archivo index.html existe y abre en el navegador
- Tiene la estructura base: DOCTYPE, html, head, body
- Tiene un título visible en la pestaña del navegador (<title>)
- Tiene tu nombre en un <h1>
- Tiene un párrafo de presentación
- Tiene una lista con 3 elementos
- Tiene al menos un enlace que funciona
- Has roto algo a propósito y has observado qué pasó
- Has escrito la reflexión de 5 líneas
Los únicos recursos que puedes usar durante el ejercicio
Regla de la sesión: solo MDN y un video de introducción. Nada de tutoriales de YouTube ni ChatGPT para el ejercicio.
Reflexión de cierre
Antes de cerrar el editor, tómate 5 minutos para responder estas preguntas con honestidad. No hay respuestas correctas o incorrectas. Esta información es tuya y te va a servir para saber cómo aprendes mejor.