Maquetación Web Dinámica / Cómo funciona la Web
Tu primera página: un archivo .html en el navegador
Hoy cruzas la línea: dejas de VER páginas web y empiezas a HACERLAS. Vas a crear un archivo, escribir HTML dentro y abrirlo en tu navegador. Y luego, tu primer reto cronometrado.
Crear el archivo
En VS Code, dentro de tu carpeta del curso, crea un archivo llamado
index.html (clic derecho → New File). El nombre importa: index.html es el
nombre que los servidores buscan por defecto — la "puerta de entrada" de
cualquier sitio.
Escribe esto dentro (escríbelo, no lo copies: tus dedos también están aprendiendo):
<!doctype html>
<html lang="es">
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Hola, soy tu primera página</h1>
<p>Y estoy viva en tu navegador.</p>
</body>
</html>Guarda (Ctrl+S) y ábrelo: clic derecho sobre el archivo → Open with Live
Server (la extensión que instalaste). Tu navegador abrirá TU página. Eso que
ves no vino de ningún servidor de internet: salió de tu disco duro.
¿Qué archivo te responde el servidor cuando visitas una página?
Tu primer reto
Reto
Cambia el texto y el color
Qué debes construir
Toma este HTML y CSS (cópialos a tu index.html y a un archivo nuevo
styles.css) y logra dos cosas:
- Que el título diga "Mi primera página".
- Que el fondo del botón sea verde (
#22C55E).
<h1>Cámbiame</h1>
<button class="cta">Y a mí ponme verde</button>body { font-family: system-ui; padding: 24px; }
.cta {
background: #7C3AED;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
}Para conectar el CSS con el HTML, agrega esta línea dentro del <head>:
<link rel="stylesheet" href="styles.css"> — en el módulo 3 la entenderás a
fondo; por ahora es el cable que une los dos archivos.
Reglas
- Solo puedes tocar el HTML y el CSS de arriba.
- Nada de frameworks ni librerías: HTML y CSS puros.
- Verifica el resultado recargando tu página con Live Server.
10:00
Cuando estés listo, arranca el reloj.
Qué sigue
Ya sabes crear y modificar una página. La última lección de este módulo te da el superpoder más subestimado del desarrollo: leer documentación sin ahogarte.