Programación Para Tontos


Los botones que no reaccionan a nada se sienten muertos. Con un par de líneas de CSS vas a hacer que el tuyo se sienta vivo (sin necesidad de JavaScript, sorpresa).

## Paso 1: el botón base

```html
<button class="boton">Haz clic aquí</button>
```

```css
.boton {
  background-color: #00e5bf;
  color: #0b1620;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}
```

## Paso 2: agrega una transición suave

```css
.boton {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.boton:hover {
  background-color: #20c9ac;
  transform: translateY(-2px);
}
```

`transition` le dice al navegador "cuando cambie esta propiedad, anímalo suavemente en vez de saltar de golpe". `:hover` define qué pasa cuando el mouse está encima. El resultado: un botón que "flota" levemente al pasar el cursor.

## Paso 3: agrega efecto al hacer clic

```css
.boton:active {
  transform: translateY(0) scale(0.97);
}
```

`:active` se activa mientras mantienes presionado el botón. Ese pequeño encogimiento simula que el botón realmente se "hunde" al presionarlo, como un botón físico. Detalles así son los que hacen que una interfaz se sienta pulida en vez de genérica.

## ¿Qué acabas de aprender?

- Cómo usar `transition` para animar cambios de propiedad.
- Cómo usar `:hover` y `:active` para reaccionar a la interacción del usuario.
- Que puedes lograr mucha "interactividad" sin escribir JavaScript.


Dale vida a tus botones con transiciones y transformaciones CSS, sin usar ni una línea de JavaScript.

Tutorial: anima un botón con transiciones CSS


¿Alguna vez cambiaste un color en CSS y tuviste que buscar y reemplazar en quince lugares distintos? Las variables CSS existen exactamente para que eso no vuelva a pasarte.

## Paso 1: declara tus variables

```css
:root {
  --color-fondo: #0b1620;
  --color-superficie: #101e27;
  --color-texto: #ffffff;
  --color-acento: #00e5bf;
}
```

`:root` es como una caja fuerte global donde guardas tus colores. `--color-fondo` es el nombre de la variable (el `--` es obligatorio).

## Paso 2: úsalas en tus estilos

```css
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

.tarjeta {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-acento);
}
```

`var(--color-fondo)` le dice a CSS "usa el valor que está guardado en esa variable". Si mañana quieres cambiar todo tu esquema de colores, solo tocas el bloque `:root`.

## Paso 3: crea un tema claro alternativo (opcional, para valientes)

```css
[data-theme='claro'] {
  --color-fondo: #ffffff;
  --color-superficie: #f2f2f2;
  --color-texto: #111111;
}
```

```html
<body data-theme="claro">
```

Al agregar `data-theme="claro"` al `<body>`, todas las variables cambian de valor automáticamente y arrastran contigo cualquier estilo que las use. Esto es, básicamente, magia disfrazada de CSS.

## ¿Qué acabas de aprender?

- Cómo declarar variables CSS con `:root` y `--nombre`.
- Cómo usarlas con `var(--nombre)`.
- Cómo cambiar un tema completo modificando solo un lugar.


Usa custom properties de CSS para armar un tema oscuro reutilizable en toda tu página.

Tutorial: crea tu propio tema oscuro con variables CSS


Si tu página se ve perfecta en tu laptop pero es un desastre en el celular, tienes la mitad de una página. La mayoría de tus visitantes van a llegar desde el teléfono, así que esto no es opcional.

## Paso 1: agrega el viewport (el paso que todos olvidan)

```html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
```

Sin esta línea, los celulares "simulan" ser una pantalla de escritorio y todo se ve diminuto. Con ella, el navegador respeta el ancho real del dispositivo. Cópiala, pégala, no la olvides nunca.

## Paso 2: diseña primero para móvil

```css
.contenedor {
  padding: 1rem;
  font-size: 1rem;
}
```

Empezar por el diseño móvil (mobile-first) te obliga a priorizar lo esencial. Es más fácil agregar espacio en pantallas grandes que quitarlo en pantallas chicas.

## Paso 3: agrega estilos para pantallas más grandes

```css
@media (min-width: 768px) {
  .contenedor {
    padding: 3rem;
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
  }
}
```

`min-width: 768px` significa "aplica esto solo si la pantalla mide 768px o más" (tablets y computadoras). Puedes encadenar varias media queries para distintos tamaños.

## Paso 4: prueba en el navegador

Abre las herramientas de desarrollador (F12), activa el modo de dispositivo móvil y cambia el tamaño de la ventana. Si tu diseño se reacomoda sin romperse, felicidades: es responsive. Si algo se desborda de la pantalla, no es un bug místico, seguramente es un ancho fijo (`width: 500px`) que olvidaste hacer flexible.

## ¿Qué acabas de aprender?

- Por qué el meta `viewport` es obligatorio.
- Cómo diseñar mobile-first y agregar estilos progresivamente.
- Cómo usar `@media (min-width: ...)` para adaptar tu diseño.


Haz que tu página se vea bien en el celular, la tablet y la computadora con media queries.

Tutorial: diseño responsive con media queries


Antes de Flexbox, centrar una caja verticalmente en CSS era casi un rito de iniciación (con trucos raros de `position: absolute` y matemáticas de más). Ya no. Respira.

## Paso 1: convierte un contenedor en flex

```html
<div class="barra">
  <div class="logo">Mi Sitio</div>
  <div class="enlaces">Inicio | Artículos | Tutoriales</div>
</div>
```

```css
.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
```

Con una sola línea (`display: flex`) tus hijos directos pasan de apilarse verticalmente a alinearse en fila. `justify-content` controla el eje horizontal, `align-items` el vertical.

## Paso 2: alinea tarjetas en fila con espacio uniforme

```html
<div class="tarjetas">
  <div class="tarjeta">HTML</div>
  <div class="tarjeta">CSS</div>
  <div class="tarjeta">JavaScript</div>
</div>
```

```css
.tarjetas {
  display: flex;
  gap: 1rem;
}

.tarjeta {
  flex: 1;
  padding: 2rem;
  background: #101e27;
  border-radius: 0.5rem;
  text-align: center;
}
```

`gap` agrega espacio entre las tarjetas sin necesidad de márgenes manuales (adiós, `margin-right` en todos lados menos en la última tarjeta).

## Paso 3: haz que se acomoden en columna en pantallas pequeñas

```css
@media (max-width: 600px) {
  .tarjetas {
    flex-direction: column;
  }
}
```

Con una línea más, tus tarjetas pasan de fila a columna cuando la pantalla es angosta. Flexbox no resuelve todos tus problemas existenciales, pero sí los de alineación.

## ¿Qué acabas de aprender?

- Cómo activar Flexbox con `display: flex`.
- Cómo alinear elementos horizontal y verticalmente.
- Cómo cambiar de fila a columna según el tamaño de pantalla.


Aprende Flexbox creando una barra de navegación y una fila de tarjetas alineadas perfectamente.

CSS

Tutorial: anima un botón con transiciones CSS

Tutorial: crea tu propio tema oscuro con variables CSS

Tutorial: diseño responsive con media queries

Tutorial: Flexbox paso a paso - alinea cajas sin sufrir