Programación Para Tontos


Las herramientas de desarrollador (DevTools) son tu mejor amigo cuando algo no funciona. Se acabó el "no sé por qué no funciona": ahora vas a saber exactamente dónde mirar.

## Paso 1: ábrelas

Presiona `F12` o clic derecho en la página → "Inspeccionar". Se va a abrir un panel con varias pestañas: Elements/Elementos, Console/Consola, Network/Red, entre otras.

## Paso 2: la pestaña Elements/Elementos

Aquí ves el HTML real de la página (incluyendo cambios hechos por JavaScript). Haz clic en cualquier elemento de la página y se va a resaltar en este panel automáticamente. Puedes editar el HTML y CSS ahí mismo para experimentar, sin miedo: al recargar la página todo vuelve a la normalidad.

## Paso 3: la pestaña Console/Consola

Aquí aparecen tus `console.log()` y, más importante, los errores de JavaScript en rojo. Un mensaje de error casi siempre te dice el archivo y la línea exacta donde algo salió mal. Léelo, no le tengas miedo: la mayoría de las veces literalmente te dice qué hacer.

```js
console.log('Valor de la variable:', miVariable);
console.error('Algo salió mal aquí');
console.table([{ nombre: 'Ana' }, { nombre: 'Luis' }]);
```

`console.table()` muestra arrays de objetos como una tabla ordenada, mucho más fácil de leer que un montón de texto plano.

## Paso 4: la pestaña Network/Red

Aquí ves cada petición que hace tu página (imágenes, archivos CSS, peticiones `fetch`). Si una petición sale en rojo o dice "failed", ese es el primer lugar donde buscar cuando tu `fetch` "no funciona".

## Paso 5: pon un punto de quiebre (breakpoint)

En la pestaña "Sources/Fuentes", haz clic en el número de línea de tu código para pausar la ejecución justo ahí. Puedes inspeccionar el valor de cada variable en ese momento exacto, como pausar una película para revisar un fotograma.

## ¿Qué acabas de aprender?

- Cómo abrir las DevTools y para qué sirve cada pestaña principal.
- Cómo leer un error en la consola en vez de temerle.
- Cómo usar un breakpoint para pausar tu código y examinarlo paso a paso.


Aprende a usar la consola, el inspector y la pestaña de red del navegador para depurar tu código.

Tutorial: usa las DevTools del navegador para encontrar errores


Tu página vive solo en tu computadora hasta que la publicas. Hoy la vas a subir a internet de verdad, con una URL real que puedes mandarle a tu mamá, gratis y en minutos.

## Paso 1: asegúrate de que tu proyecto esté en GitHub

Si seguiste el tutorial de "sube tu primer proyecto a GitHub", ya tienes esta parte lista. Si no, hazlo primero: Netlify necesita conectarse a un repositorio.

## Paso 2: crea una cuenta en Netlify

Entra a [netlify.com](https://www.netlify.com/) y regístrate usando tu cuenta de GitHub (el botón "Sign up with GitHub" te ahorra un paso).

## Paso 3: conecta tu repositorio

1. Haz clic en "Add new site" → "Import an existing project".
2. Elige GitHub y autoriza el acceso.
3. Selecciona tu repositorio de la lista.

## Paso 4: configura el build (para un sitio HTML simple, casi no hay nada que configurar)

Si tu proyecto es solo HTML/CSS/JS estático, deja el "Publish directory" como `.` (la raíz) o `public` si organizaste tus archivos ahí, y deja el comando de build vacío. Haz clic en "Deploy site".

## Paso 5: espera el deploy y visita tu sitio

En menos de un minuto, Netlify te va a dar una URL como `nombre-al-azar-123.netlify.app`. Ábrela: tu página ya es pública, en internet, para cualquiera con conexión.

## Bonus: republica automáticamente

A partir de ahora, cada vez que hagas `git push` a tu rama principal, Netlify va a detectar el cambio y volver a publicar tu sitio automáticamente. Sin volver a hacer clic en nada. Es prácticamente magia, pero con logs.

## ¿Qué acabas de aprender?

- Cómo conectar un repositorio de GitHub a Netlify.
- Cómo publicar un sitio estático gratis en minutos.
- Que cada `git push` puede volver a publicar tu sitio automáticamente.


Sube tu proyecto a GitHub y publícalo gratis en internet en menos de 5 minutos con Netlify.

Tutorial: publica tu primer sitio gratis con Netlify


Hasta ahora tu JavaScript solo vivía dentro del navegador. Node.js te deja ejecutar JavaScript directamente en tu computadora, sin necesidad de abrir ni una sola pestaña.

## Paso 1: instala Node.js

Ve a [nodejs.org](https://nodejs.org/) y descarga la versión "LTS" (Long Term Support, la más estable). Instálala como cualquier otro programa, dándole "Next" a todo.

## Paso 2: confirma que se instaló

```bash
node --version
npm --version
```

Si ves dos números de versión (algo como `v20.11.0`), ya tienes Node y npm (su gestor de paquetes) instalados. Si ves un error de "comando no encontrado", reinicia tu terminal, a veces necesita "enterarse" de que algo nuevo se instaló.

## Paso 3: escribe tu primer script

Crea un archivo llamado `saludo.js`:

```js
const nombre = 'Mundo';
console.log(`Hola, ${nombre}, desde fuera del navegador`);

const numeros = [1, 2, 3, 4, 5];
const suma = numeros.reduce((total, n) => total + n, 0);
console.log(`La suma es: ${suma}`);
```

## Paso 4: ejecútalo

```bash
node saludo.js
```

Vas a ver el resultado directamente en tu terminal. Nada de `console.log` atrapado en las herramientas de desarrollador del navegador: esto corre en tu computadora como cualquier otro programa.

## ¿Por qué esto importa?

Node.js es lo que usan por debajo herramientas como este mismo sitio (Next.js corre sobre Node), los servidores backend en JavaScript, y prácticamente todo el ecosistema de paquetes que vas a instalar con `npm install` de ahora en adelante.

## ¿Qué acabas de aprender?

- Cómo instalar Node.js y confirmar que funciona.
- Cómo ejecutar un archivo `.js` directamente desde la terminal.
- Que JavaScript ya no está encerrado en el navegador, y eso abre muchas puertas.


Instala Node.js y ejecuta JavaScript fuera del navegador, directamente desde la terminal.

Tutorial: instala Node.js y ejecuta tu primer script


VS Code recién instalado funciona bien, pero con unos ajustes se convierte en una herramienta que se siente hecha a tu medida. Vamos a configurarlo en diez minutos.

## Paso 1: instala extensiones esenciales

Abre la pestaña de extensiones (el ícono de cuadros en la barra lateral, o `Ctrl/Cmd + Shift + X`) e instala:

- **Prettier**: formatea tu código automáticamente para que siempre se vea ordenado.
- **ESLint**: te avisa de errores y malas prácticas mientras escribes.
- **Live Server**: abre tu HTML en el navegador con recarga automática cada vez que guardas.

## Paso 2: activa el formateo automático al guardar

Abre la configuración (`Ctrl/Cmd + ,`), busca "format on save" y actívalo. O agrega esto directamente a tu `settings.json`:

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

A partir de ahora, cada vez que guardes un archivo, Prettier lo va a acomodar por ti. Se acabó discutir con tu equipo sobre si usar tabs o espacios.

## Paso 3: activa el autoguardado (para los que olvidan guardar)

```json
{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}
```

Con esto, VS Code guarda tus archivos automáticamente un segundo después de que dejas de escribir. Menos "¿por qué no se ve mi cambio?" y más programar en paz.

## Paso 4: aprende dos atajos que te van a cambiar la vida

- `Ctrl/Cmd + P`: busca y abre cualquier archivo del proyecto por nombre.
- `Ctrl/Cmd + Shift + F`: busca texto en todos los archivos del proyecto, no solo el actual.

## ¿Qué acabas de aprender?

- Qué extensiones instalar primero (Prettier, ESLint, Live Server).
- Cómo activar el formateo y guardado automáticos.
- Dos atajos de teclado que vas a usar todos los días, para siempre.


Instala extensiones y ajustes clave en VS Code para programar más rápido y más cómodo.

Tutorial: configura VS Code como todo un profesional


La terminal parece sacada de una película de hackers, pero en realidad es solo una forma de darle instrucciones a tu computadora escribiendo texto en vez de hacer clic. Vamos a perderle el miedo con los comandos que de verdad vas a usar.

## Paso 1: ¿dónde estoy?

```bash
pwd
```

`pwd` (print working directory) te dice en qué carpeta estás parado ahora mismo. Es el "estás aquí" de un mapa de centro comercial, pero para tu sistema de archivos.

## Paso 2: ¿qué hay aquí?

```bash
ls
```

`ls` (list) muestra los archivos y carpetas dentro de donde estás. En Windows con PowerShell, el comando equivalente es `dir` (o `ls` también funciona en versiones nuevas).

## Paso 3: muévete entre carpetas

```bash
cd Documentos
cd ..
cd /
```

`cd` (change directory) te mueve a otra carpeta. `cd ..` te sube un nivel (a la carpeta "padre"). `cd /` te lleva a la raíz de todo el sistema. Sin mouse, sin doble clic, solo texto.

## Paso 4: crea carpetas y archivos

```bash
mkdir mi-proyecto
cd mi-proyecto
touch index.html
```

`mkdir` crea una carpeta nueva. `touch` crea un archivo vacío (en Windows con PowerShell, usa `New-Item index.html` en su lugar).

## Paso 5: limpia la pantalla cuando ya no aguantes el desorden

```bash
clear
```

(En Windows: `cls`). No borra nada de tu proyecto, solo limpia visualmente la terminal. Úsalo sin miedo cada vez que la pantalla se sienta como una ventana llena de post-its.

## ¿Qué acabas de aprender?

- Cómo saber dónde estás (`pwd`) y qué hay ahí (`ls`).
- Cómo moverte entre carpetas con `cd`.
- Cómo crear carpetas (`mkdir`) y archivos (`touch`) sin tocar el mouse.


Pierde el miedo a la terminal aprendiendo los comandos que en verdad vas a usar todos los días.

Tutorial: la terminal para principiantes - tus primeros comandos


Cuando empiezas en desarrollo web, escuchas HTML, CSS y JavaScript todo el tiempo, pero no siempre queda claro qué hace cada uno. Usemos la analogía de una casa.

## HTML: la estructura

HTML (HyperText Markup Language) es el **esqueleto** de la casa: las paredes, las puertas, las habitaciones.

```html
<h1>Mi casa</h1>
<p>Esta es la sala.</p>
```

## CSS: la decoración

CSS (Cascading Style Sheets) es la **pintura, los muebles y la decoración**. Define colores, tamaños y disposición.

```css
h1 {
  color: teal;
  font-size: 2rem;
}
```

## JavaScript: la electricidad y la interacción

JavaScript es lo que hace que las cosas **funcionen y reaccionen**: prender la luz al apretar un interruptor, abrir la puerta del garaje, etc.

```js
document.querySelector('button').addEventListener('click', () => {
  alert('¡Hiciste clic!');
});
```

## En resumen

| Lenguaje   | Función principal          |
| ---------- | --------------------------- |
| HTML       | Estructura y contenido       |
| CSS        | Apariencia y diseño          |
| JavaScript | Comportamiento e interacción |

Con estos tres, ya puedes construir cualquier página web. En el próximo tutorial vamos a crear tu primera página desde cero.


La analogía de la casa para entender de una vez por todas para qué sirve cada lenguaje web.

Herramientas

Tutorial: usa las DevTools del navegador para encontrar errores

Tutorial: publica tu primer sitio gratis con Netlify

Tutorial: instala Node.js y ejecuta tu primer script

Tutorial: configura VS Code como todo un profesional

Tutorial: la terminal para principiantes - tus primeros comandos

HTML, CSS y JavaScript: ¿qué hace cada uno?