Curso de Maquetando la web de Codely desde 0

💸 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:

1. 🗺️ 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
2. 🚧 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
3. 📐 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
4. 🎡 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
5. 👩‍🎨 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
6. ℹ️ 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
7. 🚀 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
8. 🌍 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
9. 🎠 Animaciones
   • 🐁 Transición a partir del scroll
   • 🍭 Animando SVG
   • 🃏 Animación en hover: cuándo recurrimos a JS
10. 🔜 Conclusiones y siguientes pasos

• 🔗 Cómo conectar Figma y Storybook
• 🤟 Siguientes pasos