Curso de Maquetando la web de Codely desde 0
Llevaremos un diseño en Figma a una web en producción, con un design system escalable y teniendo en cuenta performance, SEO, y accesibilidad.
💸 Primera lección disponible sin registro 💸
¿Qué aprenderás en este curso?
En este curso llevaremos un diseño a producción, creando nuestro propio design system que permita a diseño y desarrollo trabajar con un lenguaje común, organizaremos nuestros componentes de forma entendible, nos aseguraremos que estos sean accesibles mediante tests automatizados, y veremos casos reales de problemas con los que nos encontramos habitualmente: ¿Cómo aplicamos mobile first? ¿Usamos grid o flex para maquetar? ¿Cómo podemos trabajar con iconos SVG fácilmente?
Todo esto a partir de un caso real, el rediseño de la propia web de Codely que hemos lanzado recientemente.
En el curso trabajaremos con TypeScript, Next.js, Storybook, Sass y CSS modules, pero los conceptos que veremos son aplicables a vuestras librerías y frameworks favoritos 😊
Durante el curso vamos a ver:
- 🗺️ Cómo plantear el desarrollo de nuestro proyecto
- 👐 Tenemos Figma: ¿Cómo es el handoff de un diseño?
- 🖼️ ¿Qué es un design system y cuándo tiene sentido desarrollar uno propio?
- 🤯 ¿Mobile first? ¿BEM? ¿Sass? Definimos nuestra estrategia de maquetación
- 🚧 Manos a la obra: configuramos nuestro proyecto
- ⚙️ Setup: creamos aplicación, repositorio y deploy
- 🥊 Cómo trabajar con CSS en componentes React: CSS modules vs Styled JSX vs Styled Components
- 🎨 De diseño a código: configuramos nuestras variables
- 📐 Primeros pasos con nuestro Design System en Storybook
- ⚛️ Organizamos nuestros estilos con ATOMIT
- 🙌 Documentación fácil y actualizada con Storybook y TypeScript
- 👶 Creamos nuestro primer átomo: Button
- 🎡 Haciendo nuestra web accesible desde el minuto uno
- 👆 Cursor Pointer o Default en botones
- 🤖 Testeamos accesibilidad automáticamente en nuestras stories con Jest Axe
- 🔠 Títulos, accesibilidad y SEO
- 👩🎨 Usando el design system en nuestra web
- 🤔 ¿Cómo organizamos estilos y componentes en nuestra aplicación?
- 🦑 Maquetamos nuestro primer organismo
- 🪆 Cómo reutilizamos estilos: mixins vs utility classes vs components
- ℹ️ Cómo trabajar con iconos
- 🧃 ¿Por qué iconos en SVG y no en font o sprites?
- ✨ El poder de TypeScript: tipamos nuestros iconos fácilmente
- 💨 Optimización integrada en nuestro proyecto con SVGO
- 🚀 Maquetando pensando en performance
- 🛠️ Las bases de la optimización de nuestra web
- ⚡️ Usamos Intersection Observer para cargar y reproducir vídeos
- 🕺 Animaciones respetando web vitals
- 🌍 Maquetando componentes del Mundo Real™
- 💎 El poder de las variables CSS
- 💣 Rompemos el container sin perder la alineación
- 🍱 Cómo decidimos entre Flex y Grid
- 🎠 Animaciones
- 🐁 Transición a partir del scroll
- 🍭 Animando SVG
- 🃏 Animación en hover: cuándo recurrimos a JS
- 🔜 Conclusiones y siguientes pasos
- 🔗 Cómo conectar Figma y Storybook
- 🤟 Siguientes pasos

Vídeos del curso
Cursos relacionados
Paga según tus necesidades
lite (sólo mensual)
- Cursos esenciales de programación para construir una base sólida
- Factura de empresa
standard
- Catálogo principal para dominar cómo escribir un código mantenible, escalable y testable
- Recibir ofertas de empleo verificadas por Codely
- Factura de empresa
premium
- Cursos exclusivos de IA para mantenerte siempre actualizado
- Acceso anticipado a nuevos cursos
- Descuento en workshops
- Recibir ofertas de empleo verificadas por Codely
- Factura de empresa
No subiremos el precio mientras mantengas tu suscripción activa