#02 Tu kit de trabajo#02 Tu kit de trabajo

Lo que necesitas (y lo que no)

Para hacer páginas web no hace falta un ordenador potente ni programas de pago. Solo necesitas tres cosas:

1. Un editor de código, para escribir los archivos.
2. Un navegador, para ver el resultado. El que ya usas sirve (Chrome, Firefox, Edge o Safari).
3. Una carpeta donde guardar tu proyecto.

Instala un editor de código

Un editor de código es como un bloc de notas pensado para programar: colorea el código para que se lea mejor, numera las líneas, te sugiere cómo terminar lo que escribes y te avisa de algunos errores.

El más usado del mundo es Visual Studio Code (VS Code). Es gratuito y funciona en Windows, Mac y Linux.

1. Entra en code.visualstudio.com.
2. Descarga la versión para tu sistema e instálala como cualquier otro programa.
3. Ábrelo. Si quieres ponerlo en español: pulsa Ctrl + Mayús + P (Cmd + Mayús + P en Mac), escribe Configure Display Language, elige Español y reinicia.

Crea la carpeta de tu proyecto

Una web es una carpeta con archivos dentro. Vamos a crear la tuya:

1. En tu ordenador, crea una carpeta llamada mi-primera-web (por ejemplo, en Documentos).
2. En VS Code, ve a Archivo → Abrir carpeta… y elige esa carpeta.
3. En el panel de la izquierda (el Explorador), pulsa el icono de Nuevo archivo y llámalo index.html.

¿Por qué index.html? Porque es el nombre que los navegadores y servidores buscan por defecto: cuando entras en una web sin indicar ninguna página, te muestran su index.html.

Cómo nombrar archivos y carpetas

Sigue estas reglas desde el primer día y te ahorrarás muchos problemas:

En resumen: minúsculas, sin espacios, sin tildes ni eñes, y palabras separadas con guiones.

Tu primer archivo, de verdad

Escribe esto en index.html y guarda con Ctrl + S (Cmd + S en Mac):

<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web.</p>

Ahora ábrelo en el navegador. Hay dos formas:

• La sencilla: ve a la carpeta en tu ordenador y haz doble clic en index.html. Se abrirá en tu navegador.
• La cómoda (recomendada): instala la extensión Live Server en VS Code (icono de cuadraditos de la barra izquierda → busca «Live Server» → Instalar). Luego haz clic derecho en index.html → Open with Live Server. Cada vez que guardes, la página se recargará sola.

Las herramientas de desarrollo

Todos los navegadores traen unas herramientas para profesionales, las DevTools (herramientas de desarrollo). Ábrelas así:

• Clic derecho sobre cualquier cosa de la página → Inspeccionar.
• O pulsa F12 (en Mac, Cmd + Opción + I).

Verás un panel con dos zonas importantes:

• Elementos: el HTML de la página. Al pasar el ratón por encima de una línea, se resalta ese elemento en la página.
• Estilos: el CSS que se aplica al elemento seleccionado. Puedes cambiar valores y ver el efecto al momento.

Prueba esto en cualquier web: inspecciona un título, haz doble clic sobre su texto en el panel de Elementos y escribe otra cosa. ¡Acabas de «hackear» la web! Tranquilidad: solo cambia en tu pantalla, y al recargar vuelve a estar como antes.

Errores típicos

• No guardar antes de mirar el navegador. El navegador lee el archivo del disco: si no guardas, no ve tus cambios.
• Llamar al archivo index.html.txt. Algunos sistemas ocultan las extensiones y el Bloc de notas añade .txt. Crea siempre los archivos desde VS Code.
• Abrir el archivo suelto en VS Code en lugar de la carpeta. Abre siempre la carpeta del proyecto: así ves todos los archivos y las rutas funcionan bien.
• Tener el archivo en una carpeta con nombre raro, como Mi Proyecto (copia). Funciona, pero acabará dándote problemas con las rutas.

Ejercicios

Ejercicio 1: tu proyecto montado (fácil)

Crea la carpeta mi-primera-web, ábrela en VS Code, crea index.html con un título y un párrafo, y ábrelo en el navegador. Si todavía no puedes instalar nada, hazlo en esta zona de pruebas.

1
2

Ejercicio 2: el ciclo de trabajo (fácil)

Con la página abierta, cambia el texto del párrafo en VS Code, guarda y mira el navegador. Repite tres veces. Si no usas Live Server, tendrás que pulsar F5 cada vez.

Ejercicio 3: detective con DevTools (medio)

Abre una web que te guste, inspecciona su título principal y responde: ¿qué etiqueta usa (h1, h2, div…)? ¿Qué color tiene según el panel de Estilos? Después cambia su texto desde las DevTools.

Ficha resumen

• Necesitas un editor de código (VS Code), un navegador y una carpeta de proyecto.
• La página principal se llama index.html.
• Nombres de archivo: minúsculas, sin espacios ni tildes, con guiones.
• Ciclo de trabajo: escribir → guardar (Ctrl + S) → recargar (F5). Live Server recarga solo.
• Inspeccionar (o F12) abre las DevTools, donde ves el HTML y el CSS de cualquier elemento.

Glosario