Módulo 01: Entorno de trabajo

Objetivos del módulo

  • Instalar y configurar Visual Studio Code para desarrollo web
  • Elegir e instalar las extensiones más útiles (Live Server, Prettier, HTML CSS Support…)
  • Conocer los atajos de teclado que más tiempo te van a ahorrar
  • Escribir HTML a gran velocidad con Emmet
  • Organizar las carpetas de un proyecto web de forma profesional
  • Nombrar ficheros correctamente para evitar problemas en el servidor
  • Manejar las herramientas de desarrollo del navegador (DevTools)
  • Validar tu código con el validador del W3C
  • Crear tu primera página web paso a paso con un flujo de trabajo profesional

1. ¿Qué necesitas para desarrollar webs?

La buena noticia: para crear páginas web no necesitas nada de pago ni un ordenador potente. Te basta con dos herramientas:

Herramienta Para qué sirve Recomendación
Editor de código Escribir HTML, CSS y JavaScript Visual Studio Code
Navegador Ver el resultado y depurar Google Chrome o Firefox (y Safari si tienes Mac)

📘 Concepto: Un editor de código es un editor de texto especializado en programación: colorea la sintaxis, autocompleta etiquetas, detecta errores y se integra con otras herramientas. A diferencia de Word, guarda texto plano, sin formato oculto, que es exactamente lo que necesita el navegador.

⚠️ Importante: Nunca escribas HTML en Word, LibreOffice Writer o similares. Estos programas guardan el texto con formato propio y caracteres “inteligentes” (como comillas tipográficas “ ”) que rompen el código.

¿Por qué Visual Studio Code?

Hay muchos editores (Sublime Text, WebStorm, Zed, Notepad++…), pero VS Code es el estándar de facto en desarrollo web:

  • Es gratuito y multiplataforma (Windows, macOS, Linux).
  • Incluye Emmet, autocompletado de HTML y CSS y un terminal integrado.
  • Tiene miles de extensiones.
  • Lo usa la gran mayoría de desarrolladores web, así que encontrarás ayuda en cualquier parte.

2. Instalación de Visual Studio Code

En Windows

  1. Ve a https://code.visualstudio.com y pulsa el botón de descarga para Windows.
  2. Ejecuta el instalador (User Installer, no necesita permisos de administrador).
  3. Acepta la licencia y, en la pantalla de tareas adicionales, marca estas opciones:
Opción ¿Marcar? Para qué
Agregar la acción “Abrir con Code” al menú contextual de archivo Sí Clic derecho en un fichero → Abrir con Code
Agregar la acción “Abrir con Code” al menú contextual de directorio Sí Clic derecho en una carpeta → Abrir con Code
Registrar Code como editor para tipos de archivo admitidos Sí Abrir .html y .css con VS Code por defecto
Agregar a PATH Sí Poder escribir code . en la terminal
  1. Finaliza la instalación y abre VS Code.

💡 Consejo: También puedes instalarlo desde la terminal con el gestor de paquetes de Windows:

# Instala VS Code con winget (incluido en Windows 10 y 11)
winget install Microsoft.VisualStudioCode

En macOS y Linux

  • macOS: descarga el .zip, descomprímelo y arrastra Visual Studio Code.app a la carpeta Aplicaciones. Después, abre la paleta de comandos (Cmd + Shift + P) y ejecuta Shell Command: Install ‘code’ command in PATH.
  • Linux: descarga el paquete .deb (Ubuntu, Debian) o .rpm (Fedora), o instálalo desde la tienda de tu distribución.

VS Code en español

VS Code se instala en inglés. Si prefieres la interfaz en español:

  1. Pulsa Ctrl + Shift + P para abrir la paleta de comandos.
  2. Escribe Configure Display Language y pulsa Intro.
  3. Elige Español (se instalará el paquete de idioma) y reinicia.

💡 Consejo: Muchos profesionales mantienen VS Code en inglés porque casi toda la documentación, los tutoriales y los mensajes de error que encontrarás en internet están en ese idioma. En este curso mencionaremos ambos nombres cuando sea útil.

Recorrido por la interfaz

Zona Ubicación Qué contiene
Barra de actividad Izquierda del todo Iconos: Explorador, Buscar, Control de código fuente, Ejecutar, Extensiones
Barra lateral Junto a la barra de actividad El contenido del icono seleccionado (por ejemplo, el árbol de ficheros)
Editor Centro Los ficheros abiertos, en pestañas; se puede dividir en varios paneles
Panel Abajo Terminal, Problemas, Salida, Consola de depuración
Barra de estado Abajo del todo Codificación (UTF-8), tipo de fichero, línea y columna, botón “Go Live”

⚠️ Importante: En VS Code se trabaja abriendo carpetas, no ficheros sueltos. Usa siempre Archivo → Abrir carpeta (Ctrl + K, Ctrl + O) y selecciona la carpeta de tu proyecto. Así el explorador muestra todo el proyecto y las extensiones (como Live Server) funcionan correctamente.

3. Extensiones recomendadas

Las extensiones añaden funcionalidades a VS Code. Se instalan desde el icono de Extensiones de la barra de actividad (Ctrl + Shift + X): buscas por nombre y pulsas Instalar.

Imprescindibles para este curso

Extensión Autor Qué hace
Live Server Ritwick Dey Lanza un servidor local y recarga el navegador automáticamente cada vez que guardas
Prettier - Code formatter Prettier Formatea tu código (sangrías, comillas, saltos de línea) de forma consistente
HTML CSS Support ecmel Autocompleta en el HTML las clases e ids definidos en tus ficheros CSS
Auto Rename Tag Jun Han Al renombrar una etiqueta de apertura, renombra la de cierre (y viceversa)

💡 Consejo: VS Code ya incluye de serie una función equivalente a Auto Rename Tag llamada Linked Editing. Si la activas (te enseño cómo en la sección 4), puedes prescindir de esa extensión, que además puede ralentizar el editor en ficheros grandes. Mencionamos ambas opciones porque encontrarás la extensión en muchos tutoriales.

Muy recomendables

Extensión Qué hace
Error Lens Muestra los errores y avisos directamente en la línea donde ocurren
Code Spell Checker + Spanish - Code Spell Checker Corrector ortográfico para textos en inglés y español
Material Icon Theme Iconos distintos para cada tipo de fichero en el explorador
Live Preview (Microsoft) Alternativa a Live Server: muestra la página dentro del propio VS Code
IntelliSense for CSS class names in HTML Similar a HTML CSS Support; elige solo una de las dos

⚠️ Importante: Instala solo las extensiones que vayas a usar. Cada extensión consume memoria y algunas entran en conflicto entre sí (por ejemplo, dos formateadores distintos para el mismo tipo de fichero).

Live Server en detalle

📘 Concepto: Live Server arranca un pequeño servidor web local en tu ordenador (normalmente en http://127.0.0.1:5500). Abrir tu página a través de un servidor, en lugar de hacer doble clic en el fichero, se parece mucho más a cómo funcionará cuando la publiques, y además permite la recarga automática (live reload).

Cómo usarlo:

  1. Abre la carpeta del proyecto en VS Code.
  2. Abre tu index.html.
  3. Pulsa Go Live en la barra de estado (abajo a la derecha), o haz clic derecho en el fichero → Open with Live Server.
  4. Se abre el navegador con tu página. Cada vez que guardes (Ctrl + S), se recargará sola.
  5. Para detenerlo, pulsa de nuevo en la barra de estado (donde ahora pone Port: 5500).
Forma de abrir URL en el navegador Recarga automática Rutas absolutas /
Doble clic en el fichero file:///C:/Users/Ana/web/index.html No Fallan (apuntan a la raíz del disco)
Live Server http://127.0.0.1:5500/index.html Sí Funcionan (raíz del proyecto)

Prettier en detalle

Prettier reescribe tu código con un formato uniforme. Por ejemplo, convierte esto:

<ul><li>Uno</li>
      <li>Dos</li><li>Tres</li></ul>

en esto:

<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

Para que formatee al guardar, necesitas configurarlo como formateador por defecto (lo hacemos en la sección siguiente). Si quieres personalizar sus reglas en un proyecto, crea un fichero .prettierrc en la raíz:

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": false,
  "htmlWhitespaceSensitivity": "css"
}

4. Configuración recomendada de VS Code

VS Code guarda su configuración en un fichero settings.json. Puedes cambiarla desde la interfaz gráfica (Archivo → Preferencias → Configuración, o Ctrl + ,) o editando el JSON directamente: abre la paleta (Ctrl + Shift + P) y ejecuta Preferences: Open User Settings (JSON).

💻 Ejemplo: Configuración recomendada para este curso:

{
  // Formatear automáticamente al guardar, usando Prettier
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Sangría de 2 espacios (estándar en HTML y CSS)
  "editor.tabSize": 2,
  "editor.insertSpaces": true,

  // Al renombrar una etiqueta, renombrar también su pareja
  "editor.linkedEditing": true,

  // Ajustar líneas largas a la anchura de la ventana
  "editor.wordWrap": "on",

  // Colorear por parejas los corchetes y llaves
  "editor.bracketPairColorization.enabled": true,

  // Guardar automáticamente al cambiar de ventana o de pestaña
  "files.autoSave": "onFocusChange",

  // Emmet: generar el esqueleto HTML con lang="es"
  "emmet.variables": {
    "lang": "es"
  },

  // Tamaño de letra cómodo
  "editor.fontSize": 15
}

💡 Consejo: El fichero settings.json de VS Code admite comentarios con //, aunque el formato JSON estándar no los permite. Si copias esta configuración en otro sitio, elimina los comentarios.

Atajos de teclado imprescindibles

Aprender una docena de atajos te ahorrará horas. Estos son los más útiles (en macOS, cambia Ctrl por Cmd y Alt por Option):

Atajo Acción
Ctrl + Shift + P Paleta de comandos: acceso a cualquier función
Ctrl + P Abrir rápidamente un fichero por su nombre
Ctrl + S Guardar
Ctrl + B Mostrar u ocultar la barra lateral
Ctrl + ` Mostrar u ocultar la terminal integrada
Ctrl + / Comentar o descomentar la línea (o la selección)
Shift + Alt + F Formatear el documento
Alt + ↑ / Alt + ↓ Mover la línea actual arriba o abajo
Shift + Alt + ↓ Duplicar la línea actual
Ctrl + D Seleccionar la siguiente aparición de la palabra seleccionada
Alt + clic Añadir un cursor adicional (edición multicursor)
Ctrl + Shift + K Borrar la línea entera
Ctrl + F / Ctrl + H Buscar / buscar y reemplazar en el fichero
Ctrl + Shift + F Buscar en todo el proyecto
Ctrl + K, Ctrl + S Ver y personalizar todos los atajos de teclado
Ctrl + Z / Ctrl + Y Deshacer / rehacer

✏️ Ejercicio: Escribe la palabra párrafo en cinco líneas distintas de un fichero. Haz doble clic en una de ellas y pulsa Ctrl + D cuatro veces. Ahora escribe texto: habrás cambiado las cinco a la vez. Esta técnica es una de las más usadas por los profesionales.

5. Emmet: escribe HTML a la velocidad de la luz

📘 Concepto: Emmet es un sistema de abreviaturas, incluido en VS Code, que convierte expresiones cortas en bloques de HTML (o CSS) completos. Escribes la abreviatura y pulsas Tab o Intro.

El esqueleto HTML con !

En un fichero .html vacío, escribe ! y pulsa Tab. Obtendrás:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

⚠️ Importante: Por defecto Emmet genera lang="en". Con la variable "emmet.variables": { "lang": "es" } que configuraste en la sección anterior obtendrás lang="es". Y cambia siempre el <title>Document</title> por un título real.

Sintaxis básica de Emmet

Operador Significado Abreviatura Resultado
(nombre) Elemento p <p></p>
. Clase div.tarjeta <div class="tarjeta"></div>
# Id section#contacto <section id="contacto"></section>
> Hijo ul>li <ul><li></li></ul>
+ Hermano h1+p <h1></h1><p></p>
^ Subir un nivel div>p^span <div><p></p></div><span></span>
* Multiplicar li*3 Tres <li></li>
$ Numeración li.item$*3 item1, item2, item3
{} Texto a{Inicio} <a href="">Inicio</a>
[] Atributos img[alt=Logo] <img src="" alt="Logo">
() Agrupar (header>h1)+main Agrupa partes de la abreviatura

Si escribes solo .tarjeta, Emmet asume un div: <div class="tarjeta"></div>.

Ejemplos prácticos

💻 Ejemplo: Un menú de navegación completo:

nav>ul>li*4>a[href=#]{Enlace $}

Resultado:

<nav>
  <ul>
    <li><a href="#">Enlace 1</a></li>
    <li><a href="#">Enlace 2</a></li>
    <li><a href="#">Enlace 3</a></li>
    <li><a href="#">Enlace 4</a></li>
  </ul>
</nav>

💻 Ejemplo: Una tarjeta con título, texto y botón:

article.tarjeta>h2{Título}+p{Descripción}+a.boton[href=#]{Leer más}

Resultado:

<article class="tarjeta">
  <h2>Título</h2>
  <p>Descripción</p>
  <a href="#" class="boton">Leer más</a>
</article>

💻 Ejemplo: Estructura de página completa:

header>nav^main>section*2>h2+p^^footer>p{© 2026}

Resultado:

<header>
  <nav></nav>
</header>
<main>
  <section>
    <h2></h2>
    <p></p>
  </section>
  <section>
    <h2></h2>
    <p></p>
  </section>
</main>
<footer>
  <p>© 2026</p>
</footer>

Texto de relleno: lorem

Abreviatura Resultado
lorem Un párrafo de unas 30 palabras de texto de relleno en latín
lorem10 Exactamente 10 palabras
p*3>lorem Tres párrafos con texto de relleno

Abreviaturas especiales útiles

Abreviatura Resultado
link:css <link rel="stylesheet" href="style.css">
script:src <script src=""></script>
a:mail <a href="mailto:"></a>
a:tel <a href="tel:+"></a>
input:email <input type="email" name="" id="">
btn <button></button>
img <img src="" alt="">

Envolver con una abreviatura

Si ya tienes texto escrito y quieres envolverlo:

  1. Selecciona las líneas.
  2. Abre la paleta (Ctrl + Shift + P) y ejecuta Emmet: Wrap with Abbreviation.
  3. Escribe, por ejemplo, ul>li* y pulsa Intro. Cada línea seleccionada se convertirá en un <li> dentro de un <ul>.

Emmet en CSS

Emmet también funciona en ficheros .css:

Abreviatura Resultado
m10 margin: 10px;
p20-10 padding: 20px 10px;
w100p width: 100%;
df display: flex;
dg display: grid;
c#333 color: #333;
bgc background-color: #fff;

💡 Consejo: No intentes memorizar Emmet de golpe. Empieza con !, .clase, >, * y {}, y ve incorporando el resto poco a poco. En pocas semanas lo usarás sin pensar.

6. Estructura de carpetas de un proyecto web

Un proyecto bien organizado es más fácil de mantener, de entender por otras personas y de publicar.

Estructura recomendada 

mi-proyecto/
├── index.html            ← Página principal (siempre en la raíz)
├── sobre-nosotros.html
├── contacto.html
├── css/
│   └── estilos.css
├── js/
│   └── app.js
├── img/
│   ├── logo.svg
│   ├── hero-portada.webp
│   └── equipo/
│       ├── ana-garcia.webp
│       └── luis-perez.webp
├── fonts/
│   └── inter-variable.woff2
└── docs/
    └── catalogo-2026.pdf
Elemento Por qué
index.html en la raíz Los servidores web lo sirven por defecto cuando se pide una carpeta (https://misitio.es/ muestra index.html)
Carpeta css/ Todas las hojas de estilo juntas
Carpeta js/ Todos los scripts juntos
Carpeta img/ (o images/) Imágenes; puedes crear subcarpetas por sección
Carpeta fonts/ Fuentes tipográficas propias

💡 Consejo: En proyectos más grandes es habitual agrupar todo lo estático en una carpeta assets/ (assets/css, assets/js, assets/img). Ambas estructuras son correctas; lo importante es ser coherente dentro de cada proyecto.

Una carpeta para el curso

Te recomiendo crear una carpeta para todos los ejercicios del curso, con una subcarpeta por módulo:

curso-html-css/
├── 01-entorno/
│   └── primera-pagina/
│       ├── index.html
│       └── css/
│           └── estilos.css
├── 02-fundamentos-html/
│   ├── ejercicio-1/
│   └── ejercicio-2/
└── ...

Puedes crearla desde la terminal integrada de VS Code:

# Crea la carpeta del curso y la del primer proyecto
mkdir curso-html-css
cd curso-html-css
mkdir 01-entorno/primera-pagina/css

# Abre la carpeta en VS Code (si marcaste "Agregar a PATH")
code .

7. Nombrado de ficheros y carpetas

Un nombre de fichero aparentemente inofensivo puede romper una web al publicarla. Sigue estas reglas siempre:

Regla Mal Bien
Todo en minúsculas Contacto.HTML, Logo.PNG contacto.html, logo.png
Sin espacios sobre nosotros.html sobre-nosotros.html
Sin tildes ni eñes diseño.html, campaña.jpg diseno.html, campana-navidad.jpg
Sin caracteres especiales (¿ ? ! & % # ( ) ,) ¿quienes-somos?.html quienes-somos.html
Separar palabras con guiones misproductos.html, mis_productos.html mis-productos.html
Nombres descriptivos img1.jpg, foto-final-def2.jpg portada-tienda-verano.jpg
Extensión correcta index.htm.txt index.html

¿Por qué tanta exigencia?

  • Mayúsculas: Windows no distingue mayúsculas de minúsculas, pero los servidores Linux (la inmensa mayoría) sí. Si enlazas logo.png y el fichero se llama Logo.png, en tu PC funcionará y en el servidor fallará con un error 404.
  • Espacios y tildes: en las URLs se codifican (sobre%20nosotros.html, dise%C3%B1o.html), quedan feas y provocan errores al copiarlas.
  • Guiones medios: los buscadores interpretan el guion - como separador de palabras, lo que mejora el SEO.

⚠️ Importante: Windows oculta por defecto las extensiones de los ficheros, así que podrías crear sin darte cuenta index.html.txt. Actívalas en el Explorador de archivos → Ver → Mostrar → Extensiones de nombre de archivo.

8. Las herramientas de desarrollo del navegador (DevTools)

📘 Concepto: Las DevTools (herramientas para desarrolladores) son un conjunto de utilidades integradas en todos los navegadores modernos que te permiten inspeccionar, modificar y depurar cualquier página en tiempo real: ver su HTML, cambiar su CSS, leer mensajes de error, analizar la red y medir el rendimiento.

Cómo abrirlas

Acción Windows / Linux macOS
Abrir / cerrar DevTools F12 o Ctrl + Shift + I Cmd + Option + I
Modo inspección (seleccionar un elemento) Ctrl + Shift + C Cmd + Shift + C
Abrir directamente la consola Ctrl + Shift + J Cmd + Option + J
Inspeccionar un elemento concreto Clic derecho → Inspeccionar Clic derecho → Inspeccionar

⚠️ Importante: En Safari las DevTools están desactivadas por defecto. Actívalas en Safari → Ajustes → Avanzado → Mostrar funciones para desarrolladores web.

Las capturas y nombres de este apartado se refieren a Chrome (Edge es prácticamente idéntico porque usa el mismo motor). Firefox tiene herramientas equivalentes con nombres ligeramente distintos.

Panel Elements (Elementos)

Muestra el DOM: el árbol de elementos que el navegador ha construido.

  • Pasa el ratón sobre un elemento del árbol y se resaltará en la página.
  • Doble clic en un texto o en un atributo para editarlo.
  • Clic derecho → Edit as HTML para editar un bloque completo.
  • Selecciona un elemento y pulsa Supr para eliminarlo (solo en tu navegador).
  • Ctrl + F dentro del panel busca por texto, selector CSS o XPath.

💡 Consejo: Lo que ves en Elements es el DOM actual, no el HTML original. Si el navegador ha corregido un error tuyo (por ejemplo, una etiqueta sin cerrar), verás la versión corregida. Para ver el HTML tal y como llegó del servidor usa Ver código fuente (Ctrl + U).

Panel Styles (Estilos)

Está dentro de Elements, a la derecha (o debajo). Muestra todas las reglas CSS que afectan al elemento seleccionado:

  • Las propiedades tachadas son las que otra regla ha sobrescrito.
  • Haz clic en un valor para cambiarlo; usa las flechas ↑ y ↓ para aumentarlo o disminuirlo.
  • Desmarca la casilla de una propiedad para desactivarla temporalmente.
  • Pulsa en el cuadradito de un color para abrir el selector de color, que incluye la comprobación de contraste.
  • La pestaña Computed (Calculado) muestra el valor final de cada propiedad y el diagrama del modelo de cajas (margin, border, padding, contenido).

⚠️ Importante: Los cambios en DevTools no se guardan en tus ficheros. Son perfectos para experimentar, pero cuando encuentres el valor que buscas, cópialo a tu fichero CSS en VS Code.

Panel Console (Consola)

Muestra mensajes, avisos y errores: un recurso que no se encuentra (404), un error de JavaScript, un aviso de seguridad… También permite ejecutar JavaScript.

// Prueba a escribir esto en la consola de cualquier página:
document.title
// Devuelve el título de la página, p. ej.: 'Wikipedia, la enciclopedia libre'

document.querySelectorAll("a").length
// Devuelve el número de enlaces de la página, p. ej.: 412

console.log("Hola desde la consola");
// Muestra: Hola desde la consola

💡 Consejo: Acostúmbrate a tener la consola abierta mientras desarrollas. Si una imagen o una hoja de estilos no carga, la consola te lo dirá en rojo con el nombre exacto del fichero que falta.

Panel Network (Red)

Registra todas las peticiones HTTP que hace la página: el documento, el CSS, las imágenes, las fuentes, los scripts…

Columna / opción Qué muestra
Name Nombre del recurso
Status Código de estado HTTP (200, 304, 404…)
Type Tipo: document, stylesheet, script, png, font…
Size Tamaño transferido
Time Tiempo que tardó
Waterfall Gráfico temporal de cuándo se descargó cada recurso
Disable cache Desactiva la caché mientras DevTools esté abierto (muy útil en desarrollo)
Throttling (No throttling, Fast 4G, Slow 4G, 3G…) Simula conexiones lentas

Haz clic en una petición para ver sus cabeceras (Headers), la respuesta (Response) y más detalles.

✏️ Ejercicio: Abre una página web cualquiera, ve a Network, marca Disable cache, elige Slow 4G y recarga. Observa en el Waterfall qué recursos tardan más. Después vuelve a No throttling.

Modo dispositivo (Device Mode)

Pulsa el icono del móvil y la tableta en la barra de DevTools, o Ctrl + Shift + M con DevTools abierto. Podrás:

  • Elegir un dispositivo predefinido (iPhone, Pixel, iPad…) o un tamaño responsive libre.
  • Cambiar la orientación (vertical u horizontal).
  • Simular pantalla táctil.
  • Ver las media queries de la página en una barra de colores.

⚠️ Importante: El modo dispositivo simula el tamaño de pantalla, pero sigue usando el motor de tu navegador de escritorio. Antes de publicar, prueba siempre en móviles reales (especialmente en un iPhone, que usa WebKit).

Panel Lighthouse

Lighthouse analiza la página y genera un informe con una puntuación de 0 a 100 en cuatro categorías:

Categoría Qué evalúa
Performance (Rendimiento) Velocidad de carga y respuesta: tamaño de imágenes, recursos que bloquean…
Accessibility (Accesibilidad) Textos alternativos, contraste, etiquetas de formularios, orden de encabezados…
Best Practices (Prácticas recomendadas) HTTPS, errores en consola, APIs obsoletas…
SEO Título, meta descripción, enlaces rastreables, viewport…

Cómo usarlo:

  1. Abre DevTools y ve a la pestaña Lighthouse (si no la ves, búscala en el menú »).
  2. Elige Mobile o Desktop y las categorías que quieras.
  3. Pulsa Analyze page load.
  4. Revisa las sugerencias: cada una explica qué falla y cómo arreglarlo.

💡 Consejo: Ejecuta Lighthouse en una ventana de incógnito: las extensiones del navegador pueden alterar los resultados.

Otros paneles que conocerás más adelante

Panel Para qué sirve
Sources (Fuentes) Ver los ficheros cargados y depurar JavaScript con puntos de interrupción
Application (Aplicación) Almacenamiento local, cookies, manifest, Service Workers
Performance (Rendimiento) Grabar y analizar en detalle lo que hace el navegador en cada milisegundo

9. El validador del W3C

📘 Concepto: Un validador comprueba que tu código cumple el estándar: etiquetas bien cerradas, atributos permitidos, elementos en el lugar correcto, ids no repetidos… El navegador “perdona” muchos errores, pero el validador no.

Validador de HTML

Disponible en https://validator.w3.org/nu/. Ofrece tres formas de validar:

Pestaña Uso
Address Introduces la URL de una página ya publicada
File Upload Subes un fichero .html de tu ordenador
Text Field Pegas el código directamente

💻 Ejemplo: Pega este código con errores en Text Field y pulsa Check:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Página con errores</title>
  </head>
  <body>
    <h1>Bienvenido</h2>
    <p>Un párrafo con <strong>texto importante</p></strong>
    <img src="foto.jpg">
    <p id="intro">Primero</p>
    <p id="intro">Segundo</p>
  </body>
</html>

El validador mostrará errores parecidos a estos:

Error: End tag h2 seen, but there were open elements.
Error: Unclosed element h1.
Error: End tag p seen, but there were open elements.
Error: An img element must have an alt attribute, except under certain conditions.
Error: Duplicate ID intro.

Y su corrección:

<h1>Bienvenido</h1>
<p>Un párrafo con <strong>texto importante</strong></p>
<img src="foto.jpg" alt="Descripción de la foto">
<p id="intro">Primero</p>
<p id="intro-2">Segundo</p>
Tipo de mensaje Significado ¿Qué hacer?
Error El código incumple el estándar Corrígelo siempre
Warning (aviso) Algo es válido pero probablemente no es lo que querías, o hay una forma mejor Revísalo y corrígelo si procede
Info Información adicional, como el uso de una barra final en <meta ... /> Normalmente no requiere acción

💡 Consejo: Corrige los errores de arriba abajo y vuelve a validar. A menudo un solo error (como una etiqueta sin cerrar) provoca una cascada de errores posteriores que desaparecen al corregir el primero.

Validador de CSS

Disponible en https://jigsaw.w3.org/css-validator/. Funciona igual: por URL, por fichero o pegando el código.

⚠️ Importante: El validador de CSS a veces va por detrás de las novedades del lenguaje y puede marcar como error propiedades modernas perfectamente válidas. Si te marca algo reciente, compruébalo en MDN antes de cambiarlo.

10. Tu primera página web paso a paso

Vamos a juntar todo lo aprendido en un flujo de trabajo profesional.

Paso 1: crea la carpeta del proyecto

Crea la carpeta primera-pagina (dentro de tu carpeta del curso) con una subcarpeta css. Ábrela en VS Code con Archivo → Abrir carpeta.

Paso 2: crea el fichero HTML

En el explorador de VS Code, pulsa el icono Nuevo archivo y llámalo index.html. Escribe ! y pulsa Tab para generar el esqueleto.

Paso 3: escribe el contenido

💻 Ejemplo: Fichero index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primera página | Curso de HTML y CSS</title>
  <!-- Enlazamos la hoja de estilos externa -->
  <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <h1>¡Hola! Soy Ana</h1>
  <p>Estoy aprendiendo <strong>HTML5</strong> y <strong>CSS3</strong> con este curso.</p>

  <h2>Mis aficiones</h2>
  <ul>
    <li>Fotografía</li>
    <li>Senderismo</li>
    <li>Videojuegos</li>
  </ul>

  <p>
    Puedes aprender más en
    <a href="https://developer.mozilla.org/es/">MDN Web Docs</a>.
  </p>
</body>
</html>

💡 Consejo: Escribe la lista con Emmet: ul>li*3 y Tab. Y el enlace con a{MDN Web Docs}.

Paso 4: crea la hoja de estilos

Dentro de la carpeta css, crea estilos.css:

/* Estilos generales de la página */
body {
  font-family: system-ui, sans-serif; /* Tipografía del sistema */
  max-width: 700px;                    /* Ancho máximo del contenido */
  margin: 40px auto;                   /* Centrado horizontal */
  padding: 0 16px;                     /* Margen interior en móvil */
  line-height: 1.6;                    /* Interlineado cómodo */
  color: #1f2937;                      /* Gris muy oscuro */
  background-color: #f9fafb;           /* Gris casi blanco */
}

h1 {
  color: #2563eb; /* Azul */
}

a {
  color: #db2777; /* Rosa */
}

No te preocupes por entender cada propiedad: el CSS empieza en el módulo 07. Ahora solo queremos comprobar que el enlace entre ficheros funciona.

Paso 5: ábrela con Live Server

Pulsa Go Live en la barra de estado. Se abrirá el navegador en http://127.0.0.1:5500/index.html.

Resultado esperado: una página centrada con fondo gris claro, un título azul “¡Hola! Soy Ana”, un párrafo con dos palabras en negrita, un subtítulo, una lista con tres aficiones y un enlace rosa.

Paso 6: comprueba la recarga automática

Coloca VS Code y el navegador uno al lado del otro (Win + ← y Win + →). Cambia el color del h1 en el CSS, guarda con Ctrl + S y observa cómo el navegador se actualiza solo.

Paso 7: inspecciona con DevTools

  1. Pulsa F12.
  2. En Elements, localiza el <h1>.
  3. En Styles, cambia su color a green y observa el resultado (recuerda: no se guarda).
  4. Activa el modo dispositivo (Ctrl + Shift + M) y elige un iPhone: comprueba que el texto se adapta gracias a la etiqueta viewport.
  5. Abre la Console: no debería haber errores en rojo.

Paso 8: valida

Copia todo el contenido de index.html y pégalo en https://validator.w3.org/nu/#textarea. Debería aparecer “Document checking completed. No errors or warnings to show.”

✏️ Ejercicio: Provoca un error a propósito: cambia en el <link> el nombre estilos.css por estilo.css y guarda. ¿Qué ocurre con el diseño? Abre la Console y la pestaña Network: localiza el error 404. Después, corrígelo.

Flujo de trabajo resumido 

flowchart LR
    A[Escribir código<br/>en VS Code] --> B[Guardar<br/>Ctrl + S]
    B --> C[Live Server<br/>recarga el navegador]
    C --> D[Revisar en DevTools<br/>Elements, Console]
    D --> E{¿Correcto?}
    E -->|No| A
    E -->|Sí| F[Validar en W3C<br/>y Lighthouse]

11. Errores comunes y su solución

Problema Causa probable Solución
No aparece el botón Go Live Has abierto un fichero suelto, no una carpeta; o Live Server no está instalado Abre la carpeta con Archivo → Abrir carpeta y comprueba la extensión
El CSS no se aplica Ruta incorrecta en href, nombre mal escrito o mayúsculas distintas Revisa la Console y Network: verás un 404 con la ruta que buscó el navegador
Las tildes se ven como á o � El fichero no está en UTF-8 o falta <meta charset="UTF-8"> Comprueba la codificación en la barra de estado de VS Code y añade el meta charset
Emmet no se expande El fichero no tiene extensión .html o el modo de lenguaje no es HTML Guarda el fichero como .html; mira el lenguaje en la barra de estado
Prettier no formatea al guardar No es el formateador por defecto o formatOnSave está desactivado Revisa editor.defaultFormatter y editor.formatOnSave en settings.json
Los cambios no se ven en el navegador Caché del navegador o fichero sin guardar (punto blanco en la pestaña) Guarda con Ctrl + S; recarga forzada con Ctrl + F5 o activa Disable cache
Funciona en tu PC pero no en el servidor Mayúsculas en los nombres de fichero o rutas absolutas de Windows (C:\...) Nombres en minúsculas y rutas relativas (img/logo.png)
El puerto 5500 está ocupado Otra instancia de Live Server sigue abierta Cierra las otras ventanas de VS Code o cambia el puerto en la configuración de Live Server

⚠️ Importante: Nunca uses rutas de tu disco duro como C:\Users\Ana\Escritorio\web\img\logo.png en un src o href. Funcionarán solo en tu ordenador. Usa siempre rutas relativas con barras normales /: img/logo.png.

12. Ejercicios

Ejercicio 1: Prepara tu entorno

Instala VS Code, las extensiones Live Server y Prettier, y aplica la configuración de la sección 4. Comprueba que funciona creando un fichero prueba.html desordenado (todo en una línea) y guardándolo: Prettier debería formatearlo automáticamente.

Ejercicio 2: Retos de Emmet

Escribe la abreviatura de Emmet que genera cada uno de estos bloques y compruébala en VS Code:

  1. Una lista ordenada con 5 elementos cuyo texto sea “Paso 1”, “Paso 2”… “Paso 5”.
  2. Un div con clase galeria que contenga 6 imágenes con alt “Foto 1” a “Foto 6” y src img/foto1.jpg a img/foto6.jpg.
  3. Un header con un h1 “Mi blog” y un nav con 3 enlaces; después (como hermano del header) un main con 2 article, cada uno con un h2 y dos párrafos de 15 palabras de texto de relleno.

Ejercicio 3: Organiza un proyecto

Crea la estructura de carpetas para la web de una cafetería con estas páginas: inicio, carta, reservas y “quiénes somos”. Debe tener carpetas para CSS, JavaScript e imágenes (con subcarpetas para fotos de la carta y del local). Asigna nombres correctos a todos los ficheros siguiendo las reglas de la sección 7 y crea los ficheros HTML vacíos con el esqueleto de Emmet y un <title> adecuado en cada uno.

Ejercicio 4: Detective de nombres

Indica qué problema tiene cada uno de estos nombres y propón uno correcto: Página Principal.html, FOTO_Playa(1).JPG, contáctanos.html, img/Logo Empresa Final DEFINITIVO.png, estilos.css.txt, ¿Quiénes somos?.html.

Ejercicio 5: Exploración con DevTools

Abre la portada de un periódico digital y, usando solo DevTools:

  1. Cambia el texto del titular principal por “¡Aprendiendo HTML!”.
  2. Cambia el color de fondo del body a lightyellow desde el panel Styles.
  3. Elimina un anuncio o un banner seleccionándolo en Elements y pulsando Supr.
  4. Averigua en el panel Computed qué tipografía (font-family) usa el titular.
  5. Visualiza la página en modo dispositivo como un iPhone SE y como un iPad.

Ejercicio 6: Auditoría con Lighthouse

Ejecuta Lighthouse (modo Mobile, en ventana de incógnito) sobre tu primera página de la sección 10 y sobre una web comercial que conozcas. Compara las puntuaciones de las cuatro categorías y anota tres sugerencias de mejora que te proponga Lighthouse para la web comercial.

Ejercicio 7: Caza de errores con el validador

Escribe una página con al menos cinco errores distintos a propósito (etiquetas mal anidadas, una imagen sin alt, ids duplicados, una etiqueta sin cerrar, un atributo inventado). Pásala por el validador, anota cada mensaje y corrige uno a uno hasta obtener cero errores.

Ejercicio 8: Tarjeta de presentación

Crea un proyecto tarjeta-presentacion con index.html y css/estilos.css. La página debe mostrar tu nombre en un h1, una frase de presentación, una lista de tres cosas que quieres aprender en el curso y un enlace a tu web favorita. Ábrela con Live Server, verifica que no hay errores en la consola, valídala en el W3C y obtén al menos un 90 en Accesibilidad en Lighthouse.

Resumen

Concepto Idea clave
VS Code Editor de código gratuito; trabaja siempre abriendo carpetas
Paleta de comandos Ctrl + Shift + P: acceso a cualquier función
Live Server Servidor local con recarga automática (http://127.0.0.1:5500)
Prettier Formateador automático; actívalo con editor.formatOnSave
Linked Editing / Auto Rename Tag Renombran a la vez la etiqueta de apertura y la de cierre
Emmet ! Genera el esqueleto HTML5 completo
Emmet operadores . clase, # id, > hijo, + hermano, ^ subir, * repetir, $ numerar, {} texto, [] atributos
Estructura de proyecto index.html en la raíz; carpetas css/, js/, img/
Nombres de ficheros Minúsculas, sin espacios ni tildes, palabras separadas por guiones
DevTools F12; Elements, Styles, Console, Network, modo dispositivo, Lighthouse
Modo dispositivo Ctrl + Shift + M; simula pantallas de móviles y tabletas
Lighthouse Auditoría de rendimiento, accesibilidad, buenas prácticas y SEO
Validador HTML validator.w3.org/nu
Validador CSS jigsaw.w3.org/css-validator
Rutas Siempre relativas y con /, nunca C:\...
Navegación  
← Módulo anterior: Introducción al desarrollo web Siguiente módulo: Fundamentos de HTML →