M·01
Fundamentos
Digitales
Antes de escribir una línea de código, debes hablar el idioma del medio.
¿Por qué empezar aquí?
Internet tiene una historia. Comprender cómo evolucionó el diseño web no es filosofía: es lo que te permite saber por qué el código funciona como funciona, y cómo romper las reglas con intención.
🌐 Cultura Digital
Historia del diseño web: de las tablas HTML a las experiencias 3D. Entender Bauhaus digital, net.art, motion design en web. Referentes: Piet Mondrian en CSS, Saul Bass con scroll.
⚙️ Cómo funciona la web
Cliente vs Servidor. Navegador como intérprete. DOM (Document Object Model) — el árbol de nodos que conecta todo. HTTP/HTTPS. DNS. Hosting vs Dominio.
🧠 El DOM: tu lienzo
Cada elemento HTML es un nodo. Puedes seleccionarlos, modificarlos, animarlos con código. El DOM es el puente entre diseño y programación.
🔤 HTML: la estructura
HTML no es diseño — es semántica. Cada etiqueta tiene un significado. <article>, <section>, <header>, <main>. Accesibilidad desde el inicio.
// Tu primer HTML semántico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera experiencia digital</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<section class="hero">
<h1>Hola, mundo creativo.</h1>
<p>Esto es estructura. CSS le dará forma.</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Semana 1–2
HTML: Los nodos del diseño
Aprende las etiquetas esenciales, semántica, formularios, multimedia. Entiende el DOM como árbol de nodos que puedes manipular.
Semana 3–4
CSS: El lenguaje visual
CSS es diseño expresado en código. Selectores, cascada, herencia, especificidad. Box model. Unidades (px, rem, vh, %). Variables CSS (Custom Properties).
Herramientas base
Entorno de trabajo
Configura tu ambiente. VS Code + extensiones clave. DevTools del navegador (tu mejor amigo para inspeccionar y debuggear).
M·02
Desarrollo
Web
Layout, tipografía, color y animación. CSS como herramienta de diseño real.
🔲 Flexbox
Sistema de layout unidimensional. Alinear elementos horizontal o verticalmente. justify-content, align-items, flex-wrap. El 80% del layout cotidiano.
⬛ CSS Grid
Layout bidimensional. Grillas de 12 columnas, áreas nombradas (grid-template-areas), layouts complejos sin media queries. El futuro del layout.
📱 Responsive Design
Mobile-first approach. Media queries (@media). Breakpoints (320px, 768px, 1280px). Clamp() para tipografía fluida. Container queries (nuevo).
🎨 Tipografía Web
Google Fonts, Adobe Fonts, variable fonts. font-size, line-height, letter-spacing, font-weight. Escala tipográfica. Contraste y legibilidad.
🎨 Color en CSS
HSL vs RGB vs HEX. Gradientes (linear, radial, conic). CSS Variables para paletas. mix-blend-mode para efectos creativos. oklch() — el futuro del color.
✨ Animación CSS
@keyframes. transition vs animation. Propiedades animables. Timing functions (ease, cubic-bezier). animation-delay para efectos escalonados. will-change para performance.
// Animación CSS creativa con keyframes
/* Efecto de texto que aparece letra por letra */
@keyframes reveal {
from {
opacity: 0;
clip-path: inset(0 100% 0 0);
transform: translateY(20px);
}
to {
opacity: 1;
clip-path: inset(0 0% 0 0);
transform: translateY(0);
}
}
.hero-title {
animation: reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: 0.3s;
opacity: 0; /* empieza invisible */
}
/* Hover interactivo con transform */
.card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
Práctica guiada
Página Web Responsive
Tu primer proyecto completo: un portfolio o landing page que funcione en cualquier dispositivo. Aplica todo: Grid, Flexbox, tipografía, animaciones CSS.
Nivel siguiente
CSS Avanzado que debes conocer
clip-path para formas creativas. mask-image. backdrop-filter. CSS Scroll Snap. Pseudo-elementos ::before y ::after. CSS custom properties con calc().
CSS no es solo estilos. Es el lenguaje con el que conviertes estructura en emoción, código en percepción.
M·03
Interactividad
& JavaScript
El momento en que tu diseño cobra vida. JS conecta los nodos.
La lógica del creativo
JavaScript no es para programadores puros. Es el instrumento con el que un diseñador responde a las acciones del usuario, crea efectos imposibles con CSS solo, y conecta datos con visualización. No necesitas ser un ingeniero — necesitas entender la gramática del movimiento.
📦 Variables & Tipos
const vs let. Strings, Numbers, Booleans, Arrays, Objects. Template literals (backticks). Destructuring. El punto de entrada de cualquier lógica.
🔁 Funciones
function declaration vs arrow functions. Parámetros y retorno. Callbacks. Higher-order functions: map(), filter(), reduce(). El corazón de la lógica creativa.
🌲 Manipulación del DOM
document.querySelector(). createElement(), appendChild(). classList.add/remove/toggle. Event listeners: click, mousemove, scroll, keydown. Aquí JS se conecta con HTML/CSS.
⏱️ Timing & Async
setTimeout, setInterval, requestAnimationFrame (para animaciones suaves). Promises, async/await. Fetch API para traer datos externos (APIs).
📐 Matemáticas creativas
Math.sin(), Math.cos(), Math.PI para movimientos orgánicos. Math.random() para generatividad. Lerp (interpolación lineal) para suavizar movimientos. La física del diseño generativo.
🎭 Events & UX
mousemove para parallax. scroll para reveal animations. IntersectionObserver (la forma moderna de detectar scroll). Resize observer. Keyboard events.
// Interactividad: seguir el cursor con JS
// Efecto cursor personalizado — design + código juntos
const cursor = document.querySelector('.cursor');
const links = document.querySelectorAll('a, button');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// requestAnimationFrame = 60fps suave
function animateCursor() {
// Lerp: movimiento suave y orgánico
cursorX += (mouseX - cursorX) * 0.12;
cursorY += (mouseY - cursorY) * 0.12;
cursor.style.transform =
`translate(${cursorX}px, ${cursorY}px)`;
requestAnimationFrame(animateCursor);
}
animateCursor();
// Expandir cursor al hover
links.forEach(link => {
link.addEventListener('mouseenter', () => {
cursor.classList.add('expanded');
});
link.addEventListener('mouseleave', () => {
cursor.classList.remove('expanded');
});
});
Animación avanzada
GSAP — El estándar industria
GreenSock Animation Platform. La librería de animación más poderosa del ecosistema web. gsap.to(), gsap.timeline(), ScrollTrigger. Usada por los mejores estudios del mundo.
Programación creativa
p5.js — Código generativo
Basado en Processing. Para crear arte generativo, visualizaciones, animaciones procedurales. setup(), draw(). Matemáticas + creatividad = magia visual.
3D en web
Three.js — El espacio 3D
Librería WebGL para 3D en el navegador. Scene, Camera, Renderer. Geometrías, materiales, luces. Shaders GLSL para efectos imposibles. El nivel final.
M·04
Diseño
& Código
Cuando dejas de separar las dos disciplinas y empiezas a crear en el cruce.
🔗 Design Tokens
Variables de diseño sistemáticas: colores, espaciados, tipografía. Puente entre Figma y código. El mismo lenguaje para diseñador y desarrollador.
📐 Sistemas de diseño en código
Componentes reutilizables. BEM (Block Element Modifier) en CSS. Tailwind CSS como sistema utilitario. Del diseño atómico al código atómico.
🌊 Scroll Storytelling
Narrativas visuales con scroll. ScrollTrigger + GSAP. Parallax layers. Pin sections. Horizontal scrolling. Las experiencias que se recuerdan son las que cuentan historias.
🤖 IA como herramienta creativa
GitHub Copilot para acelerar el flujo. Midjourney para references y texturas. p5.js con ML5.js para IA creativa. Cursor IDE para pair-programming con IA.
🎬 Video & Canvas
HTML Canvas API. WebGL básico. Video background. MediaRecorder API. Pixel manipulation para efectos de filtro en tiempo real con código.
🌐 Publicar tu trabajo
Vercel (deploy con 1 click). Netlify. GitHub Pages. Dominio personalizado. HTTPS automático. Tu obra tiene que vivir en internet, no en tu laptop.
HUB
Hubs &
Comunidad
Donde compartes tu código, encuentras inspiración y construyes tu reputación.
La regla de oro del creativo digital
El código que no se ve, no existe. Publicar tu trabajo desde el día 1 — aunque sea imperfecto — es la diferencia entre un estudiante y un profesional. Los hubs son tu galería, tu red, tu universidad paralela.
GitHub
Control de versiones · Portafolio de código
El estándar mundial. Todo tu código vive aquí. Aprende Git: commit, push, pull, branches. Tu GitHub ES tu CV como developer creativo. GitHub Pages para publicar gratis.
CodePen
Snippets · Demos · Inspiración
El playground del frontend creativo. HTML + CSS + JS en tiempo real. La comunidad más visual de código. Comparte efectos, animaciones, experimentos. Ver el código de otros es aprender.
Behance / Dribbble
Portfolio visual · Proyectos
Presenta tus proyectos con contexto visual. No solo el código — el proceso, el concepto, el resultado. Un proyecto bien presentado vale más que diez mal documentados.
Are.na
Research visual · Referencias
La plataforma para creativos que piensan. Colecciona referencias, textura, tipografías, experimentos de código que te inspiran. Una mente curada es una ventaja competitiva.
Awwwards
Diseño web de alta calidad
El estándar del diseño web de excelencia. Inspírate en los mejores sitios del mundo. Cuando publiques algo de nivel, submítelo. El reconocimiento abre puertas.
Observable / Glitch
Código abierto · Experimentación
Observable para dataviz y código narrativo. Glitch para proyectos rápidos online. Experimenta sin fricción y comparte inmediatamente.
// Git: flujo básico para publicar tu trabajo
# 1. Inicia un repositorio git init git add . git commit -m "feat: primer proyecto creativo" # 2. Conéctalo a GitHub (crea el repo primero en github.com) git remote add origin https://github.com/tu-usuario/mi-proyecto.git git push -u origin main # 3. Activa GitHub Pages en Settings → Pages # Tu proyecto vive en: tu-usuario.github.io/mi-proyecto # 4. Flujo cotidiano git add . git commit -m "feat: animación scroll reveal" git push
ENV
Herramientas
Esenciales
El stack de un creative developer en 2025.
VS Code
Editor de código
El editor más usado del mundo. Extensiones clave: Live Server, Prettier, ESLint, GitLens, Colorize.
Firefox DevTools
Inspección & Debug
Las mejores herramientas de CSS del mercado. Inspector de Grid y Flexbox visual. Tu aliado diario.
Vercel
Deploy & Hosting
Conecta tu GitHub y despliega automáticamente. HTTPS gratis. Deploy en segundos. El estándar para proyectos creativos.
Figma
Diseño & Prototipo
Diseña antes de codear. Exporta SVGs, tokens de diseño. Dev Mode para inspeccionar CSS directamente.
CodePen
Playground online
Para experimentar rápido sin configurar nada. Tu cuaderno de bocetos en código.
GitHub Desktop
Git visual
Git con interfaz gráfica para quienes empiezan. Gestiona commits, ramas y sincronización sin terminal.
Cursor IDE
AI Coding Assistant
VS Code con IA integrada. Autocompletado contextual, chat con tu código, refactor automático. El futuro ahora.
npm / Node.js
Gestor de paquetes
Instala librerías (GSAP, Three.js, p5.js) con un comando. Node.js es el motor que corre JS fuera del navegador.
LIB
Frameworks
& Librerías
El ecosistema de herramientas que amplifica tu expresión creativa.
| Librería / Framework | Para qué sirve | Cuándo usarla | Nivel |
|---|---|---|---|
| GSAP | Animaciones web profesionales, ScrollTrigger | Cualquier proyecto con animación compleja | Intermedio |
| p5.js | Arte generativo, visualizaciones creativas | Proyectos de programación creativa/arte | Básico |
| Three.js | 3D en el navegador con WebGL | Experiencias inmersivas, portfolios 3D | Avanzado |
| Framer Motion | Animaciones en React | Apps React con animaciones expresivas | Intermedio |
| React | Interfaces de usuario con componentes | Proyectos grandes, apps interactivas | Intermedio |
| Tailwind CSS | Sistema de utilidades CSS | Desarrollo rápido con sistema visual | Básico |
| D3.js | Visualización de datos | Infografías interactivas, dataviz | Avanzado |
| ML5.js | Machine Learning creativo en el browser | IA generativa interactiva | Avanzado |
| Vite | Bundler ultra-rápido | Cualquier proyecto JS moderno | Básico |
| Lenis | Smooth scroll | Sitios con scroll narrativo premium | Básico |
MAP
Tu Roadmap
de 12 Meses
Una ruta progresiva. No es lineal — es un espiral hacia arriba.
Meses 1–2 · Fundamentos
Aprende el lenguaje
HTML semántico, CSS básico, Box Model, Flexbox. Configura tu entorno (VS Code, Git). Crea tu primera página web estática. Súbela a GitHub Pages. Es simple, pero es tuya.
Meses 3–4 · Layout & Visual
Diseña con CSS
CSS Grid, Responsive Design, tipografía web, variables CSS, animaciones @keyframes. Crea una landing page completa con animaciones de entrada. Publícala en Vercel con dominio personalizado.
Meses 5–7 · JavaScript
Da vida a tus diseños
JS fundamentos, DOM manipulation, eventos, requestAnimationFrame. Instala GSAP y crea tu primera animación de scroll. Crea un cursor personalizado. Tu diseño ahora responde al usuario.
Meses 8–10 · Programación Creativa
Arte generativo & 3D
p5.js para generativo. Three.js para 3D básico. APIs externas para datos en tiempo real. Crea un experimento de arte generativo que responda al mouse. Publícalo en CodePen. Comparte en Behance.
Meses 11–12 · Proyecto Final
Tu obra en el mundo
Portfolio completo como creative developer. Un proyecto de alto impacto: experiencia inmersiva, instalación interactiva, site con narrativa de scroll. GitHub documentado, Behance presentado, enviado a Awwwards.
REC
Recursos
Esenciales
El mapa de donde aprender, practicar e inspirarte.
Aprendizaje
Dónde estudiar online
MDN Web Docs (la biblia del frontend). Kevin Powell en YouTube para CSS. The Coding Train (Daniel Shiffman) para p5.js. Bruno Simon para Three.js. CSS-Tricks para referencia.
Inspiración
Referentes creativos
Active Theory, Resn, Bruno Simon, Locomotive Scroll, Aristide Benoist, George Michael Brower. Awwwards SOTD diario. Sito Menv. Crafted Studios.
Práctica
Retos y proyectos
Frontend Mentor para retos reales. 100 Days CSS Challenge. Recrear sitios que admiras desde cero. Contribuir a proyectos open source. Hacer algo nuevo cada semana.
El secreto que nadie dice
La programación creativa no se aprende leyendo — se aprende haciendo cosas que no sabes cómo hacer todavía. Cada proyecto roto que arreglas vale más que diez tutoriales completados. Empieza antes de estar listo. Publica antes de estar seguro. La perfección no existe en el código, existe en la iteración.