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ódulos24 lecciones publicadas~8 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ñadorpróximamente
05Layouts I: Flexbox completopróximamente
06Layouts II: CSS Grid completopróximamente
07Posicionamiento y capaspróximamente
08Responsive Design profesionalpróximamente
09Pseudo-clases y pseudo-elementos: el arsenal secretopróximamente
10Transformaciones y transicionespróximamente
11Animaciones CSS: de sencillas a profesionalespróximamente
12SVG: dibujar y animar vectorespróximamente
13Canvas y videojuegos 2Dpróximamente
14Del canvas al motor: videojuegos con Phaserpróximamente
15JavaScript para maquetadores: darle vida al DOMpróximamente
16TypeScript en la maquetaciónpróximamente
17GSAP y animación de nivel Awwwardspróximamente
18Arquitectura CSS y design tokenspróximamente
19Accesibilidad y rendimientopróximamente
20Proyectos finales: el examen del diseñador-desarrolladorpróximamente
21Puentes a los frameworkspróximamente