Tu caja de herramientas: navegador, DevTools y VS Code

Al terminar esta lección vas a tener instalado y configurado todo lo que un maquetador profesional usa a diario. No es una lista de programas: es tu taller, y lo vas a conocer pieza por pieza.

Herramienta 1: el navegador (que ya tienes)

Tu navegador es a la vez el lienzo donde se pinta tu trabajo y el microscopio para examinarlo. Cualquier navegador moderno sirve; en este curso usaremos Chrome o Edge como referencia porque sus DevTools son el estándar de la industria (Firefox es excelente también, casi todo aplica igual).

De sus muchas pestañas, tres serán tus compañeras de todos los días:

• Elements: el HTML vivo de la página y el CSS aplicado a cada elemento. Aquí experimentarás cambios sin miedo — al recargar, todo vuelve.
• Console: donde JavaScript habla (y donde se gritan los errores).
• Network: el viaje de la lección anterior, fila por fila.

Herramienta 2: VS Code, tu editor

Visual Studio Code es el editor de código más usado del mundo, gratuito, y donde escribirás cada línea de este curso. Descárgalo de code.visualstudio.com e instálalo con las opciones por defecto.

Al abrirlo por primera vez, dos ajustes que valen oro:

1. Auto Save: menú File → Auto Save. Nunca más perder cambios por olvidar guardar.
2. Idioma: puedes instalar el paquete de español, aunque te recomendamos dejarlo en inglés — la documentación, los errores y los tutoriales del mundo real están en inglés, y acostumbrarte temprano es una ventaja.

Las extensiones esenciales

Las extensiones se instalan desde el ícono de bloques en la barra lateral (o Ctrl+Shift+X). Para maquetar necesitas exactamente estas:

Extensión	Qué hace
Live Server	Abre tu HTML en el navegador y lo recarga solo con cada cambio
Prettier	Formatea tu código automáticamente al guardar: indentación perfecta sin esfuerzo
Error Lens	Muestra los errores EN la línea donde ocurren, no escondidos

Configura Prettier para que actúe al guardar: Ctrl+, (Settings), busca format on save y marca la casilla.

Herramienta 3: tu carpeta de proyectos

El orden desde el día uno evita dolores después. Crea una carpeta para el curso y ábrela en VS Code (File → Open Folder):

# # Crea la carpeta del curso donde prefieras

$ mkdir codeforge-maquetacion

$ cd codeforge-maquetacion

# # Cada módulo tendrá su propia subcarpeta: 01, 02, 03...

No necesitas la terminal si te intimida: crear la carpeta con el explorador de archivos es exactamente igual de válido. La terminal irá apareciendo de a poco en el curso, siempre explicada.

Mini-reto

Instala las tres extensiones, abre cualquier página web, presiona F12 y en Elements haz doble clic sobre un texto cualquiera de la página: cámbialo por tu nombre. Acabas de modificar tu primera página en vivo (tranquilo: solo tú la ves así, y al recargar desaparece).

Qué sigue

Taller listo. En la próxima lección creas tu primera página de verdad: un archivo .html escrito por ti, abierto en tu navegador. Ahí empieza todo.