Ejercicio 1 — Centrado perfecto

Ejercicio 2 — Navbar flexible

Código trabajado por Juan Esteban Osorio

Ejercicio 3 — Cards en filas con salto (wrap)

Tarjetas trabajadas por Juan Esteban Osorio

Ejercicio 4 — Layout con sidebar (Flex)

Ejercicio 5 — Pricing con alineación por baseline

Trabajado por Juan Esteban Osorio

Ejercicio 6 — Tres columnas fijas

Columnas trabajadas por Juan Esteban Osorio

Ejercicio 7 — Layout clásico con áreas

Capas manejadas por Juan Esteban Osorio

Ejercicio 8 — Grid fluido con auto-fit + minmax

Grid trabajado por Juan Esteban Osorio

Ejercicio 9 — Galería con relación de aspecto

Galería trabajada por Juan Esteban Osorio

Ejercicio 10 — Superposición (overlap) tipo hero

Innovación con propósito

Superposición trabajada por Juan Esteban Osorio

Ejercicio 11 — Mobile-first: apilar columnas

Responsive trabajado por Juan Esteban Osorio

Ejercicio 12 — Navbar colapsable (sin JS)

Barra trabajada por Juan Esteban Osorio

Ejercicio 13 — Tipografía fluida con clamp()

React, allá voy

Soy Juan Esteban Osorio y programo para empezar en React

Texto de ejemplo para ver tamaño relativo.

Ejercicio 14 — Formulario responsive

Formulario trabajado por Juan Esteban Osorio

JS 1 — Variables (let y const)

let contador = 0;
contador = contador + 1;
const PI = 3.1416;
// PI = 3.14; ❌ error
console.log(contador, PI);

// Mis datos personales con let y const
let puntaje = 10;
puntaje = puntaje + 5;
const NOMBRE = "Juan Esteban Osorio";
console.log("Nombre:", NOMBRE, "| Puntaje:", puntaje);

JS 2 — Funciones flecha

function suma(a, b) { return a + b; }
const resta = (a, b) => a - b;
console.log(suma(3, 2));  // 5
console.log(resta(5, 2)); // 3

// Funciones en versión flecha
const multiplicar = (a, b) => a * b;
const saludar = nombre => `¡Hola, ${nombre}!`;
console.log(multiplicar(4, 7));
console.log(saludar("Juan Esteban"));

JS 3 — Arrays y objetos

const frutas = ["manzana", "pera", "uva"];
console.log(frutas[1]); // "pera"
const persona = { nombre: "Rudolf", edad: 30 };
console.log(persona.nombre); // "Rudolf"

// Array de 5 números y objeto carro
const numeros = [10, 20, 30, 40, 50];
console.log("Tercer número:", numeros[2]);
const carro = { marca: "Toyota", modelo: "Corolla", año: 2022 };
console.log(`Carro: ${carro.marca} ${carro.modelo} (${carro.año})`);

JS 4 — Métodos de array (map, filter, reduce)

const numeros = [1, 2, 3, 4, 5];
const cuadrados = numeros.map(n => n * n);
console.log(cuadrados); // [1,4,9,16,25]
const pares = numeros.filter(n => n % 2 === 0);
console.log(pares); // [2,4]
const suma = numeros.reduce((acc, n) => acc + n, 0);
console.log(suma); // 15

// Promedio con reduce
const notas = [3.5, 4.0, 4.8, 3.2, 5.0];
const promedio = notas.reduce((acc, n) => acc + n, 0) / notas.length;
console.log("Promedio:", promedio.toFixed(2));
const aprobadas = notas.filter(n => n >= 3.0);
console.log("Aprobadas:", aprobadas);

JS 5 — Promesas y async/await

const traerDato = () =>
  new Promise(resolve =>
    setTimeout(() => resolve("Dato listo ✅"), 2000)
  );
traerDato().then(res => console.log(res));
// también: const dato = await traerDato();

// Espera 3 segundos y muestra mensaje
const esperar3s = async () => {
  await new Promise(r => setTimeout(r, 3000));
  console.log("Listo para React 🚀");
};
esperar3s();

JS 6 — Módulos (import / export)

// math.js
export const sumar = (a, b) => a + b;
export const restar = (a, b) => a - b;

// main.js
import { sumar, restar } from './math.js';
console.log(sumar(2, 3));  // 5
console.log(restar(10, 4)); // 6

📝 Los módulos reales requieren un servidor local o

📝 Los módulos reales requieren un servidor local o <script type="module">. Aquí se simula el resultado.

Bonus — Card con Container Query

Título de la card

Este card usa container queries: cuando tiene más de 420px de ancho, cambia su layout a dos columnas.