Curso de Maquetando la web de Codely desde 0

Por Núria Soriano y Rafa Gómez – Frontend

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

Ir al curso

Cursos relacionados

📄 Ofertas de empleo

Ofertas de empleo verificadas por Codely

🖼️ Next.js: Open Graph Images

Genera imágenes dinámicas en tus proyectos Next.js para compartir en redes sociales.

🎨 Buenas prácticas con CSS: Colores

Domina el uso de colores en CSS para crear sitios visualmente impactantes y accesibles. Utiliza CSS moderno como puede ser lch para la gestión de colores.

🚋 TypeScript Avanzado: Mejora tu Developer eXperience

Aprende a enriquecer la definición de tus funciones con utility types, const type parameters y satisfies lo que te permitirá ganar robustez y facilidad de uso en el día a día.

🎠 Crea tu librería en React: Carousel

Aprende cómo desarrollar tu propia librería JavaScript para React acompañándonos en la creación del Carousel de nuestra web siguiendo buenas prácticas.

🏎️ Resolviendo Type Challenges

Profundizando en TypeScript a través de retos avanzados.

⏳ Asincronía en JavaScript

Domina la asincronía en JavaScript: entiende y aplica eficientemente conceptos como callbacks, promesas, async/await, y otros métodos de asincronía en tus proyectos.

Ver catálogo completo