Programación Para Tontos

Meter todo tu código en un solo archivo HTML gigante funciona al principio, pero se vuelve un dolor de cabeza rápido. Vamos a separar las cosas como en cualquier proyecto real.

## Paso 1: la estructura de carpetas

```
mi-proyecto/
├── index.html
├── css/
│   └── estilos.css
└── js/
    └── app.js
```

Organizar por tipo de archivo (HTML en la raíz, CSS en su carpeta, JS en la suya) es un patrón tan común que lo vas a reconocer en casi cualquier proyecto que abras de aquí en adelante.

## Paso 2: conecta el CSS

```html
<head>
  <link rel="stylesheet" href="css/estilos.css" />
</head>
```

## Paso 3: conecta el JavaScript (al final del body, no es casualidad)

```html
<body>
  

  <script src="js/app.js"></script>
</body>
```

Poner el `<script>` justo antes de cerrar `</body>` asegura que el HTML ya se cargó completo antes de que tu JavaScript intente buscar elementos con `document.querySelector`. Ponerlo en el `<head>` sin cuidado es una receta clásica para el error "Cannot read properties of null".

## Paso 4: divide tu JavaScript en módulos (para proyectos que crecen)

```html
<script type="module" src="js/app.js"></script>
```

```js
// js/utils.js
export function formatearFecha(fecha) {
  return new Date(fecha).toLocaleDateString();
}
```

```js
// js/app.js
import { formatearFecha } from './utils.js';

console.log(formatearFecha('2026-01-01'));
```

`type="module"` te permite usar `import` y `export` para dividir tu JavaScript en archivos más pequeños y enfocados, en vez de un solo archivo de 2000 líneas que nadie quiere abrir.

## ¿Qué acabas de aprender?

- Cómo organizar HTML, CSS y JS en carpetas separadas.
- Por qué el `<script>` va casi al final del `<body>`.
- Cómo dividir JavaScript en módulos con `import`/`export`.

Separa tu HTML, CSS y JavaScript en archivos independientes para mantener tu proyecto ordenado.

Tutorial: organiza tu código en varios archivos


Una **variable** es como una caja con una etiqueta donde guardas algo para usarlo después. La etiqueta es el nombre de la variable, y lo que hay dentro es su valor.

```js
let edad = 25;
let nombre = 'Sofía';
let esEstudiante = true;
```

## Tipos de datos comunes

- **Número** (`25`): para contar o calcular.
- **Texto o string** (`'Sofía'`): para palabras y frases, siempre entre comillas.
- **Booleano** (`true`/`false`): para respuestas de sí o no.
- **Lista o array** (`[1, 2, 3]`): una caja que contiene varias cosas en orden.
- **Objeto** (`{ nombre: 'Sofía', edad: 25 }`): una caja con varias etiquetas internas.

## ¿Por qué importa el tipo?

Si tratas un número como si fuera texto, pueden pasar cosas raras:

```js
console.log('5' + 1); // '51' (se pega el texto)
console.log(5 + 1);   // 6   (se suma el número)
```

Saber qué tipo de dato tienes en cada "caja" evita muchos errores comunes al empezar a programar.

## Practica tú mismo

Intenta declarar tres variables sobre ti: tu nombre, tu edad y si te gusta programar (`true` o `false`). Ese pequeño ejercicio ya es programar.


Entiende qué son las variables y los tipos de datos usando cajas etiquetadas en lugar de teoría abstracta.

Variables y tipos de datos explicados con analogías


Programar suena intimidante, pero en el fondo es solo **dar instrucciones muy precisas** a una computadora para que resuelva un problema. Así como una receta de cocina le dice a alguien exactamente qué hacer paso a paso, un programa le dice a la computadora qué hacer.

## Una analogía simple

Imagina que le explicas a un amigo cómo hacer un sándwich:

1. Toma dos rebanadas de pan.
2. Unta mantequilla de maní en una.
3. Unta mermelada en la otra.
4. Une las dos rebanadas.

Un programa es exactamente eso, pero escrito en un lenguaje que la computadora entiende, como JavaScript o Python.

## ¿Por qué se ve tan raro el código?

```js
function saludar(nombre) {
  return `Hola, ${nombre}!`;
}

console.log(saludar('Ana'));
```

Este código define una instrucción reutilizable (una **función**) llamada `saludar`, y luego la usa. No hay magia: solo estructura y práctica.

## Lo que necesitas para empezar

- Curiosidad y paciencia (los errores son parte del proceso).
- Un editor de código (por ejemplo, VS Code).
- Ganas de experimentar sin miedo a romper algo.

En los próximos artículos vamos a ver variables, tipos de datos y cómo estructurar una página web desde cero.


Descubre qué significa programar realmente, sin jerga complicada, con ejemplos de la vida diaria.

Fundamentos

Tutorial: organiza tu código en varios archivos

Variables y tipos de datos explicados con analogías

¿Qué es programar? Una introducción sin miedo