Tu entorno de desarrollo

Instala y configura todo lo necesario para crear proyectos web reales.

Antes de empezar: checklist

Si has seguido los capítulos anteriores, ya deberías tener:

Un navegador moderno (Chrome o Firefox)
VS Code instalado y configurado
Extensiones básicas (Live Server, Prettier)
Familiaridad con la terminal

Eso significa que ya tienes el 80% del camino recorrido. Ahora vamos a añadir las dos últimas piezas que completan tu entorno de desarrollo profesional: Node.js y Git.

Con estas herramientas, vas a tener exactamente el mismo setup que usan los desarrolladores profesionales en su día a día.

Node.js: por qué lo necesitas

Cuando JavaScript nació en 1995, solo podía ejecutarse dentro del navegador. Era una herramienta exclusiva para hacer páginas web interactivas y nada más.

En 2009, todo cambió. Node.js permitió que JavaScript se ejecutara fuera del navegador: en tu computadora, en servidores, en cualquier parte. Esto fue una revolución.

¿Y por qué te importa esto ahora? Porque prácticamente todas las herramientas modernas de desarrollo web dependen de Node.js:

npm y pnpm — gestores de paquetes para instalar librerías y herramientas.
Frameworks modernos — React, Vue, Astro, Next.js… todos necesitan Node.js.
Herramientas de desarrollo — compiladores, linters, formateadores, bundlers.
Automatización — scripts para tareas repetitivas.

No necesitas entenderlo todo ahora. Solo necesitas instalarlo.

Instalación de Node.js

Ve a nodejs.org.
Descarga la versión LTS (el botón verde de la izquierda).
Ejecuta el instalador y acepta todas las opciones por defecto.
Abre una nueva terminal (PowerShell o CMD) y verifica:

node -v
npm -v

Deberías ver números de versión como v20.x.x y 10.x.x.

Ve a nodejs.org.
Descarga la versión LTS (el botón verde de la izquierda).
Abre el archivo .pkg descargado y sigue el asistente de instalación.
Abre una nueva ventana de Terminal y verifica:

node -v
npm -v

Deberías ver números de versión como v20.x.x y 10.x.x.

La forma más sencilla es usar el gestor de paquetes de tu distribución. En Ubuntu/Debian:

sudo apt update
sudo apt install nodejs npm

Para tener la versión más reciente, puedes usar NodeSource:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

Verifica la instalación:

node -v
npm -v

LTS vs Current

En la página de Node.js verás dos versiones: LTS (Long Term Support) y Current. Siempre elige LTS. Es la versión estable, probada y con soporte a largo plazo. La versión Current incluye las últimas novedades, pero puede tener errores.

Git: control de versiones

Imagina que estás escribiendo un documento importante. Haces cambios, avanzas, pero de pronto algo sale mal y quieres volver a una versión anterior. Sin un sistema de control de versiones, tu única opción sería hacer copias manuales: proyecto-v1, proyecto-v2, proyecto-FINAL, proyecto-FINAL-DEFINITIVO… Un desastre.

Git resuelve este problema. Es un sistema que guarda “instantáneas” (snapshots) de tu código en cada momento. Piensa en él como un “guardar partida” para tus proyectos. Puedes:

Volver a cualquier punto anterior de tu proyecto.
Experimentar sin miedo a romper nada.
Colaborar con otros desarrolladores sin pisarse el trabajo.
Mantener un historial completo de todo lo que has hecho.

Git es, sin exageración, la herramienta más importante que vas a aprender como desarrollador. Todos los equipos de desarrollo del mundo lo usan.

Instalación de Git

Ve a git-scm.com.
Haz clic en Download for Windows.
Ejecuta el instalador. Puedes dejar todas las opciones por defecto.
Abre una nueva terminal y verifica:

git --version

Deberías ver algo como git version 2.x.x.

La forma más rápida es abrir la Terminal y ejecutar:

xcode-select --install

Esto instala las herramientas de línea de comandos de Apple, que incluyen Git. Si prefieres tenerlo por separado, puedes instalarlo con Homebrew:

brew install git

Verifica la instalación:

git --version

En Ubuntu/Debian:

sudo apt update
sudo apt install git

En Fedora:

sudo dnf install git

Verifica la instalación:

git --version

Configuración inicial de Git

Antes de usar Git, necesitas decirle quién eres. Esto es importante porque cada cambio que guardes quedará firmado con tu nombre.

Abre tu terminal y configura tu nombre:
Ventana de terminal
```
git config --global user.name "Tu Nombre"
```
Configura tu correo electrónico:
Ventana de terminal
```
git config --global user.email "tu@email.com"
```
Verifica que todo quedó bien:
Ventana de terminal
```
git config --list
```
Deberías ver tu nombre y correo en la lista.

Proyecto ritual: tu primer proyecto completo

Ha llegado el momento. Vas a crear tu primer proyecto web desde cero, usando todas las herramientas que has aprendido en este libro. Nada de copiar y pegar desde una página web: tú vas a crear cada archivo, escribir cada línea.

Abre tu terminal (la de VS Code o la del sistema, como prefieras).
Crea una carpeta para tu proyecto y entra en ella:
Ventana de terminal
```
mkdir mi-primer-proyecto && cd mi-primer-proyecto
```
Crea los archivos base de tu proyecto:
Ventana de terminal
```
touch index.html style.css
```
Abre la carpeta en VS Code:
Ventana de terminal
```
code .
```

Escribe el HTML. Abre index.html y escribe este código:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primer proyecto</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>¡Hola mundo!</h1>
  <p>Este es mi primer proyecto web completo.</p>
</body>
</html>

Añade estilos. Abre style.css y escribe:

body {
  font-family: system-ui, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #f5f5f5;
  color: #333;
}

h1 {
  color: #2563eb;
}

Ábrelo con Live Server. Haz clic derecho sobre index.html en el explorador de VS Code y selecciona “Open with Live Server”. Tu navegador se abrirá y verás tu página con el título en azul sobre un fondo gris claro.

Acabas de crear un proyecto web completo con HTML y CSS, usando la terminal para crear archivos, VS Code para editarlos y Live Server para verlos en el navegador. Todo conectado.

Estructura de proyecto recomendada

A medida que tus proyectos crezcan, vas a necesitar organizar mejor tus archivos. Esta es una estructura básica y limpia que te servirá como punto de partida:

Directoriomi-proyecto/
- index.html
- style.css
- script.js
- Directorioassets/
  - Directorioimages/
    …

index.html — La página principal de tu sitio.
style.css — Todos los estilos visuales.
script.js — El código JavaScript (lo verás en el Libro 3).
assets/images/ — Carpeta para guardar imágenes y otros recursos.

Esta estructura es simple, pero es la base sobre la que se construyen proyectos más grandes. Aprenderás a expandirla según lo necesites.

¿Qué sigue?

Tu entorno de desarrollo está completo. Tienes todo lo que necesita un desarrollador profesional para trabajar. Ahora es momento de aprender a construir cosas de verdad.

En el siguiente libro vas a aprender HTML y CSS en profundidad. Vas a pasar de un simple “Hola mundo” a construir páginas web reales, con navegación, layouts, imágenes, formularios y diseño responsive que se adapte a cualquier pantalla.

Siguiente capítuloHTML & CSS desde ceroAprende a construir páginas web reales con HTML semántico y CSS moderno.

Resumen: lo que has logrado

Tómate un momento para apreciar todo lo que has conseguido. Cuando empezaste este libro, probablemente no sabías qué era un navegador web por dentro, ni cómo funcionaba internet, ni qué significaba “frontend”. Ahora mira todo lo que sabes:

Entiendes cómo funciona la web: navegadores, servidores, HTTP, HTML, CSS y JavaScript.
Creaste tu primera página web con tus propias manos.
Conoces la diferencia entre frontend, backend y fullstack.
Sabes usar las DevTools del navegador para inspeccionar y depurar.
Tienes VS Code configurado como un profesional, con extensiones y atajos.
Puedes navegar por la terminal sin miedo: crear carpetas, mover archivos, ejecutar comandos.
Tienes Node.js instalado, listo para las herramientas modernas.
Tienes Git configurado, listo para controlar las versiones de tus proyectos.
Acabas de crear tu primer proyecto completo desde cero.

Eso no es poco. Eso es la base sobre la que se construye toda una carrera en desarrollo web.

Muchas personas se quedan en la etapa de “quiero aprender a programar” sin dar nunca el primer paso. Tú ya lo diste. Ya tienes las herramientas, ya entiendes los conceptos fundamentales y ya creaste algo real. A partir de aquí, cada capítulo que leas, cada línea de código que escribas, va a construir sobre esta base sólida que acabas de establecer.

El camino de “cero a pro” es largo, pero lo importante es que ya estás caminando. Nos vemos en el siguiente libro.

Felicidades, developer!