Programación Para Tontos


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.

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


**Git** es una herramienta que guarda el historial de cambios de tu código, como un "control+Z" gigante con superpoderes. **GitHub** es un sitio web donde puedes guardar ese historial en la nube y compartirlo con otras personas.

## Los tres comandos que más usarás

```bash
git add .
git commit -m "Explica qué cambiaste"
git push
```

1. `git add .` — marca los archivos que cambiaste para guardarlos.
2. `git commit -m "..."` — guarda una "foto" de esos cambios con un mensaje.
3. `git push` — sube esa foto a GitHub para que quede respaldada.

## ¿Por qué debería usar Git desde el principio?

- Puedes deshacer errores sin miedo.
- Puedes ver exactamente qué cambió y cuándo.
- Es la forma estándar en la que trabajan los equipos de programación.

## Tu primer repositorio

1. Crea una carpeta para tu proyecto.
2. Ejecuta `git init` dentro de ella.
3. Crea una cuenta en GitHub y crea un repositorio nuevo.
4. Sigue las instrucciones de GitHub para conectar tu carpeta local con el repositorio remoto.

No necesitas entenderlo todo de una vez. Con estos tres comandos ya puedes empezar a versionar tus proyectos.


Aprende qué es Git, qué es GitHub, y los tres comandos que usarás el 90% del tiempo.

Git y GitHub para principiantes: guía sin dramas


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.

Artículos

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

Git y GitHub para principiantes: guía sin dramas

Variables y tipos de datos explicados con analogías

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