CodeForge

supercurso 01

Maquetación Web Dinámica

HTML, CSS, JS/TS, SVG, canvas y GSAP: de ver un diseño a construirlo con movimiento. El curso insignia.

21 módulos161 lecciones publicadas~84 h de contenidodesde cero

Temario

01Cómo funciona la Web0/4
  1. Qué pasa cuando escribes una URL15m20
  2. Tu caja de herramientas: navegador, DevTools y VS Code18m20
  3. Tu primera página: un archivo .html en el navegador20m40
  4. Cómo leer documentación (MDN) sin morir en el intento15m20
02HTML5 desde cero: el esqueleto0/10
  1. Anatomía de un documento HTML15m20
  2. Texto: headings, párrafos, énfasis, listas y citas18m20
  3. Enlaces e imágenes: rutas, alt y formatos20m20
  4. Semántica: header, nav, main y por qué importa20m20
  5. Tablas bien hechas: thead, tbody y scope15m20
  6. Formularios I: inputs, labels y required20m20
  7. Formularios II: select, textarea, fieldset y validación nativa20m20
  8. Multimedia: video, audio, picture y srcset18m20
  9. Metadatos y SEO básico: title, description, OpenGraph y favicon15m20
  10. Reto de módulo: el periódico digital (solo HTML)50m60
03CSS3 fundamentos: la piel0/10
  1. Tres formas de aplicar CSS (y por qué solo una es correcta)15m20
  2. Selectores: elemento, clase, id, atributo y combinadores20m20
  3. Especificidad y cascada: quién gana y por qué20m20
  4. Herencia: qué se contagia y qué no15m20
  5. Box model a fondo: todo es una caja20m20
  6. Unidades: px, %, em, rem, vw/vh, dvh y ch20m20
  7. Colores: hex, rgb, hsl, oklch y color-mix()20m20
  8. Display: block, inline, inline-block y none vs visibility18m20
  9. Overflow, object-fit y aspect-ratio18m20
  10. Reto de módulo: replica la tarjeta de precios45m60
04Tipografía y color con ojo de diseñador0/9
  1. Anatomía tipográfica: serif, sans, mono, peso y espaciado18m20
  2. Google Fonts y fuentes variables sin destrozar el rendimiento18m20
  3. Escala tipográfica y clamp(): tamaños con sistema18m20
  4. Jerarquía visual: dirigir la mirada20m20
  5. Teoría del color aplicada: 60-30-10 y paletas con lógica18m20
  6. Degradados I: linear, radial y conic18m20
  7. Degradados II: texto degradado, mesh y animación18m20
  8. Sombras con intención: box-shadow en capas, text-shadow y drop-shadow18m20
  9. Reto de módulo: el sistema visual de una marca70m100
05Layouts I: Flexbox completo0/8
  1. Flexbox: el eje principal y el eje cruzado15m20
  2. justify-content y align-items: todas las combinaciones20m20
  3. flex-grow, flex-shrink y flex-basis: la abreviatura descifrada20m20
  4. flex-wrap, align-content y gap18m20
  5. order y align-self: excepciones controladas15m20
  6. Patrones flex del mundo real: los 5 que resuelven casi todo22m20
  7. Reto: replica el header de YouTube35m60
  8. Reto: galería tipo Pinterest con flex-wrap35m60
06Layouts II: CSS Grid completo0/9
  1. Grid vs Flexbox: cuándo usar cada uno15m20
  2. grid-template: fr, repeat() y minmax()18m20
  3. grid-template-areas: layouts que se dibujan15m20
  4. auto-fit vs auto-fill: grids responsivos sin media queries15m20
  5. Posicionamiento explícito: líneas, span y capas18m20
  6. subgrid: alinear los interiores de las tarjetas15m20
  7. Patrones Grid reales: holy grail, dashboard, bento y revista22m20
  8. Reto: bento grid estilo Apple con 7 celdas50m60
  9. Proyecto: dashboard completo con Grid + Flexbox100m150
07Posicionamiento y capas0/5
  1. position: static, relative y absolute18m20
  2. fixed y sticky: headers que persiguen, secciones que se pegan18m20
  3. z-index y stacking contexts: por qué tu 9999 no funciona18m20
  4. inset y el centrado absoluto moderno15m20
  5. Reto: la tarjeta con badge, imagen desbordada y tooltip40m60
08Responsive Design profesional0/8
  1. Mobile-first: por qué se diseña desde 375px15m20
  2. Media queries: breakpoints con sistema y prefers-*20m20
  3. Container queries: componentes que responden a su contenedor18m20
  4. Imágenes responsivas: srcset, sizes y art direction20m20
  5. Tipografía y espaciado fluidos con clamp()18m20
  6. dvh, svh, lvh: el viewport móvil de verdad15m20
  7. El menú hamburguesa: checkbox hack y la versión correcta20m20
  8. Proyecto: landing responsive de 5 secciones, mobile-first130m150
09Pseudo-clases y pseudo-elementos: el arsenal secreto0/9
  1. Estados: :hover, :focus-visible, :active y compañía18m20
  2. Estructurales: :nth-child y las fórmulas an+b18m20
  3. :not(), :is() y :where(): selectores compuestos legibles15m20
  4. :has() — el selector de padre que lo cambió todo18m20
  5. ::before y ::after I: decoraciones, iconos y contadores18m20
  6. ::before y ::after II: arte con CSS — dibujar sin imágenes20m20
  7. ::selection, ::marker, ::placeholder y ::first-letter15m20
  8. Reto: dibuja un logo solo con CSS50m60
  9. Reto: checklist interactivo sin una línea de JS45m60
10Transformaciones y transiciones0/7
  1. transform 2D: mover, escalar y rotar sin romper nada20m20
  2. transform-origin: el punto de pivote15m20
  3. transition: del salto brusco al movimiento con intención20m20
  4. Curvas de easing: la física del movimiento20m20
  5. transform 3D: profundidad real en la página22m20
  6. Reto: la tarjeta que se voltea en 3D40m60
  7. Reto: galería con hover premium35m60
11Animaciones CSS: de sencillas a profesionales0/10
  1. @keyframes: tu primera animación18m20
  2. animation: el panel de control completo20m20
  3. La regla de oro del rendimiento: transform y opacity20m20
  4. Staggering: animaciones en cascada con delay y variables20m20
  5. Loading states: spinners, skeletons y puntos que bailan20m20
  6. Scroll-driven animations: el scroll como línea de tiempo20m20
  7. View Transitions: navegar sin parpadeo, como una app18m20
  8. prefers-reduced-motion: animar con empatía18m20
  9. Reto: una escena en loop, 100% CSS70m100
  10. Reto: hero con entrada escalonada45m60
12SVG: dibujar y animar vectores0/8
  1. SVG y el viewBox, explicado de una vez por todas20m20
  2. Formas básicas: rect, circle, line, polygon20m20
  3. <path> y el atributo d: curvas sin pánico22m20
  4. De Figma a SVG limpio: optimización con SVGO18m20
  5. Logos que se dibujan solos: stroke-dasharray animado20m20
  6. Animar SVG con CSS: giros, gradientes e iconos que reaccionan20m20
  7. Morphing y filtros SVG: el efecto gooey20m20
  8. Reto: vectoriza un logo y hazlo dibujarse solo65m100
13Canvas y videojuegos 2D0/11
  1. Canvas vs SVG: píxeles contra vectores18m20
  2. El contexto 2D: formas, colores, texto e imágenes22m20
  3. El game loop: requestAnimationFrame20m20
  4. Física básica: velocidad, gravedad y rebote22m20
  5. Interacción: teclado y mouse sobre canvas22m20
  6. Sprites y spritesheets: animar personajes22m20
  7. Colisiones: AABB y por distancia22m20
  8. Sistema de partículas: confeti, chispas y humo22m20
  9. Exportar tu canvas: a imagen, GIF o video18m20
  10. Proyecto: Pong completo desde cero130m150
  11. Proyecto final: tu propio juego con menú y puntaje190m150
14Del canvas al motor: videojuegos con Phaser0/10
  1. Por qué un motor: Phaser contra el canvas a mano18m20
  2. Setup: config, preload, create y update22m20
  3. Sprites y animaciones de personaje20m20
  4. Física arcade: colisiones y overlaps declarativos22m20
  5. Input multiplataforma: teclado, puntero y gamepad20m20
  6. Tilemaps: niveles hechos de piezas20m20
  7. El juice: audio, partículas y screen shake20m20
  8. Escenas múltiples y guardar puntajes22m20
  9. Reto: migra tu juego del módulo 13 a Phaser95m100
  10. Proyecto: plataformero 2D completo con 2 niveles250m150
15JavaScript para maquetadores: darle vida al DOM0/8
  1. El DOM es un árbol: seleccionar y modificar20m20
  2. classList: el interruptor de estilos18m20
  3. Eventos y listeners: reaccionar a todo20m20
  4. Delegación de eventos: un listener para muchos20m20
  5. Render desde datos: crear elementos dinámicamente22m20
  6. IntersectionObserver: reaccionar al scroll20m20
  7. Patrones de UI: modal, tabs, acordeón y dark mode22m20
  8. Reto: una página viva con scroll, navbar y modal65m60
16TypeScript en la maquetación0/6
  1. Por qué TypeScript: errores antes de que ocurran20m20
  2. Setup con Vite y tipos del DOM22m20
  3. Tipar eventos: MouseEvent, KeyboardEvent y más20m20
  4. Migrar los patrones del módulo 14 a TypeScript20m20
  5. Datos tipados: interfaces y render seguro22m20
  6. Reto: migra tu página viva a TypeScript estricto65m60
17GSAP y animación de nivel Awwwards0/8
  1. Por qué GSAP: cuando el CSS ya no alcanza20m20
  2. Tweens y easings: el vocabulario de GSAP20m20
  3. Timelines: coreografías con control total22m20
  4. ScrollTrigger: animaciones ancladas al scroll24m20
  5. Efectos insignia: parallax, texto y scroll horizontal22m20
  6. Micro-interacciones premium: botones magnéticos y más20m20
  7. GSAP + SVG: coreografiar tus vectores20m20
  8. Proyecto: landing con scrollytelling completo160m150
18Arquitectura CSS y design tokens0/7
  1. El problema del CSS que crece18m20
  2. Variables CSS a fondo: scope, fallbacks y JS22m20
  3. Design tokens: tu sistema de diseño en variables22m20
  4. Theming claro/oscuro con tokens semánticos22m20
  5. Metodologías: BEM, @layer y cuándo importa22m20
  6. De tus tokens a Tailwind: el mismo sistema18m20
  7. Reto: sistema de tokens con tema claro/oscuro65m60
19Accesibilidad y rendimiento0/6
  1. Accesibilidad real: teclado, foco, contraste y ARIA22m20
  2. Lectores de pantalla: tu página con los ojos cerrados20m20
  3. Core Web Vitals: LCP, CLS e INP22m20
  4. Optimizar imágenes y fuentes: el 80/20 del rendimiento20m20
  5. Animaciones que no destruyen el rendimiento20m20
  6. Reto: audita y arregla una página rota65m60
20Proyectos finales: el examen del diseñador-desarrollador0/3
  1. Proyecto final A: clona una landing real, pixel-perfect250m150
  2. Proyecto final B: del logo al sitio con GSAP250m150
  3. El checklist de calidad y cómo autoevaluarte20m20
21Puentes a los frameworks0/5
  1. Puente a React 19: tu tarjeta como componente20m20
  2. Puente a Next.js: tu landing como app con rutas20m20
  3. Puente a Astro: la misma landing con 0 JS por defecto18m20
  4. Puente a Angular 21: tu tarjeta con signals20m20
  5. Puente a Tailwind v4: tus tokens son la config18m20