Contenido del curso
Desarrollo de componentes
- 3

Instalación de Storybook con Vanilla JavaScript
14:10 min - 4

Arquitectura de componentes en Storybook con Atomic Design
07:05 min - 5

Exportar design tokens de Figma a CSS
05:22 min - 6

Crear un botón reutilizable con Storybook
17:59 min - 7

Estilización de Botones en CSS: Clases y Hover Interactivo
12:17 min - 8

Componente Card en JavaScript con BEM
10:51 min - 9

Container Queries vs Media Queries en CSS
08:38 min - 10

Estilización de Componentes CSS con Container Queries
22:02 min
Historias en Storybook
Essential Addons en Storybook
Pruebas de componentes en Storybook
Próximos pasos
¡Hola, Platzinauta! En esta lectura te dejo algunas recomendaciones antes de comenzar con este Curso de Sistemas de Diseño con Storybook.
El diseño de un sistema de diseño
Mi primera recomendación es que tomes el Curso de Sistemas de Diseño con Figma para que conozcas qué es un Sistema de Diseño, cómo son los procesos, flujos, fundamentos, arquitectura de componentes, entre otras cosas. Esto te permitirá tener una comprensión más amplia y general para poder materializar con código nuestro Sistema de Diseño.
Conceptos previos de CSS y JavaScript
Es importante que tengamos claros algunos conceptos para lograr implementar los componentes y estilos que desarrollaremos durante el curso:
- Conceptos generales de CSS para dar color, tamaño y ubicación a elementos. Puedes aprender todo eso y más en el Curso de Frontend Developer.
- Acceso al DOM para crear elementos. Puedes aprenderlo en el Curso de Manipulación del DOM.
- ECMAScript 6 para crear variables, arrow functions y más sintaxis de JavaScript moderno. Puedes aprenderlo con el Curso de ECMAScript: Historia y Versiones de JavaScript.
- Testing con Jest para probar nuestro Sistema de Diseño. Puedes aprenderlo en el Curso de Introducción al Testing con JavaScript.
¡Nos vemos en el siguiente módulo en donde comenzaremos a crear nuestras primeras historias con Storybook!
Creación de Sistemas de Diseño con Storybook