Prepara tu entorno de trabajo

Un buen carpintero cuida sus herramientas. En esta lección instalarás y configurarás lo que usa un desarrollador web profesional: Visual Studio Code con sus mejores extensiones, un navegador moderno y las DevTools, que serán tu laboratorio para inspeccionar y depurar cualquier página.

Concepto

Tu entorno tiene tres piezas:

1. Editor de código: donde escribes (VS Code).
2. Navegador: donde ves el resultado (Chrome, Firefox o Edge).
3. Terminal: donde ejecutas comandos (la verás en la siguiente lección).

Visual Studio Code

VS Code es gratuito, ligero, multiplataforma y el editor más usado del mundo.

Instalación

1. Descárgalo de code.visualstudio.com.
2. Windows: durante la instalación marca "Agregar a PATH" y "Agregar la acción Abrir con Code" al menú contextual. Así podrás abrir carpetas con clic derecho y desde la terminal con code ..
3. Mac: arrastra la app a Aplicaciones. Luego abre VS Code, presiona Cmd + Shift + P, escribe "shell command" y elige Install 'code' command in PATH.
4. Linux: descarga el .deb o .rpm, o usa sudo snap install code --classic.

Para ponerlo en español: Ctrl + Shift + P → "Configure Display Language" → instala el paquete de español. (Muchos desarrolladores lo dejan en inglés porque la documentación y los tutoriales están en inglés; tú decides.)

Atajos imprescindibles

Acción	Windows/Linux	Mac
Paleta de comandos	Ctrl + Shift + P	Cmd + Shift + P
Buscar archivo	Ctrl + P	Cmd + P
Guardar	Ctrl + S	Cmd + S
Comentar línea	Ctrl + /	Cmd + /
Duplicar línea	Shift + Alt + ↓	Shift + Option + ↓
Mover línea	Alt + ↑/↓	Option + ↑/↓
Multicursor	Alt + clic	Option + clic
Seleccionar siguiente coincidencia	Ctrl + D	Cmd + D
Terminal integrada	Ctrl + `	Ctrl + `
Formatear documento	Shift + Alt + F	Shift + Option + F

Emmet: escribe HTML a toda velocidad

VS Code trae Emmet integrado. En un archivo .html escribe ! y presiona Tab: obtienes la estructura completa del documento. Otros ejemplos:

ul>li*3          →  una lista con 3 elementos
.tarjeta>h2+p    →  div.tarjeta con un h2 y un p dentro
a[href=#]{Leer}  →  <a href="#">Leer</a>

Extensiones recomendadas

Instálalas desde el panel de extensiones (Ctrl + Shift + X):

Extensión	Para qué
Live Server (Ritwick Dey)	Abre tu sitio en el navegador y lo recarga al guardar
Prettier – Code formatter	Formatea tu código automáticamente
ESLint	Detecta errores en JavaScript
Auto Rename Tag	Cambia la etiqueta de cierre al cambiar la de apertura
Error Lens	Muestra los errores en la misma línea
Path Intellisense	Autocompleta rutas de archivos
GitLens	Superpoderes para Git
Material Icon Theme	Íconos por tipo de archivo
Code Spell Checker + Spanish	Detecta faltas de ortografía en textos

Configuración recomendada

Abre la configuración en JSON (Ctrl + Shift + P → "Open User Settings (JSON)") y añade:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.linkedEditing": true,
  "files.autoSave": "onFocusChange",
  "emmet.includeLanguages": { "javascript": "javascriptreact" },
  "workbench.iconTheme": "material-icon-theme"
}

Buena práctica

Activa formatOnSave desde el primer día. Código bien formateado es más fácil de leer, y los clientes y equipos lo notan.

El navegador

Usa un navegador basado en Chromium (Chrome, Edge, Brave) como principal y Firefox para probar compatibilidad (sus herramientas de Grid y Flexbox son excelentes). En Mac, prueba también en Safari: muchos usuarios de iPhone lo usan y tiene sus propias diferencias.

Las DevTools

Ábrelas con F12, Ctrl + Shift + I (Windows/Linux), Cmd + Option + I (Mac), o clic derecho → Inspeccionar.

Pestañas principales

Pestaña	Para qué la usarás
Elements (Elementos)	Ver y editar el HTML y CSS en vivo. Probar estilos sin tocar tu archivo
Console (Consola)	Ver errores de JavaScript y ejecutar código
Network (Red)	Ver cada petición, su tamaño, tiempo y código de estado
Sources (Fuentes)	Depurar JavaScript con puntos de interrupción
Application	Ver cookies, localStorage, caché
Lighthouse	Auditar rendimiento, accesibilidad, SEO y buenas prácticas

Modo responsive

Presiona Ctrl + Shift + M (Cmd + Shift + M en Mac) dentro de las DevTools para simular celulares y tablets. Imprescindible: más del 60 % del tráfico web es móvil.

Pruébalo: edita cualquier página

1. Abre un sitio cualquiera e inspecciona un título.
2. En el panel Styles, cambia el color o el font-size.
3. Haz doble clic sobre el texto en el panel Elements y cámbialo.

Nada de esto se guarda: sólo cambias tu copia local. Es la forma perfecta de experimentar.

También puedes probar la consola:

// Escribe esto en la pestaña Console
document.title                       // muestra el título de la página
document.body.style.background = 'pink'  // cambia el fondo
console.log('Hola, DevTools');

Error común

Editar estilos en DevTools, lograr el diseño perfecto... y recargar la página. ¡Se pierde todo! Cuando algo funcione en DevTools, cópialo a tu archivo CSS.

Tu primer proyecto con Live Server

1. Crea una carpeta mi-primer-sitio en tus Documentos.
2. Ábrela en VS Code (Archivo → Abrir carpeta).
3. Crea index.html, escribe ! + Tab y añade un título:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primer sitio</title>
</head>
<body>
  <h1>¡Hola, mundo!</h1>
  <p>Mi entorno de desarrollo ya está listo.</p>
</body>
</html>

4. Clic derecho en el archivo → Open with Live Server. Se abrirá en http://127.0.0.1:5500.
5. Cambia el texto y guarda: el navegador se actualiza solo.

Otras herramientas que instalarás pronto

• Git: control de versiones (lección 5).
• Node.js (versión LTS): necesario para herramientas modernas (Vite, Sass, Tailwind). Descárgalo de nodejs.org.
• Figma (gratis): para ver los diseños que te entreguen.

Ejercicios

1. Instala VS Code y las extensiones Live Server, Prettier y Auto Rename Tag.
2. Con Emmet, genera en una sola línea: un nav con una ul que tenga 4 li, cada uno con un enlace.
3. Abre la página de tu periódico favorito en modo responsive como iPhone SE. ¿Se ve bien?
4. Ejecuta Lighthouse en cualquier sitio y anota las cuatro calificaciones.

Ver solución

2. Escribe nav>ul>li*4>a[href=#] y presiona Tab. Obtienes:

<nav>
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</nav>

3. y 4. Respuesta libre. En Lighthouse verás Performance, Accessibility, Best Practices y SEO, cada una de 0 a 100. En tus proyectos para clientes apunta a más de 90 en todas.

Resumen

• VS Code + extensiones (Live Server, Prettier, Auto Rename Tag, Error Lens) es el estándar.
• Aprende los atajos y Emmet: multiplican tu velocidad.
• Las DevTools te dejan inspeccionar HTML/CSS, ver errores, peticiones y auditar con Lighthouse.
• El modo responsive simula dispositivos móviles.
• Los cambios en DevTools no se guardan: pásalos a tus archivos.

Siguiente: La terminal desde cero.