Curso· Cargando…
Deja de pelearte con el CSS y construye interfaces rápido y consistentes como se trabaja hoy. Maquetas layouts responsive con Grid, Flexbox y container queries; estilas con utility-first usando Tailwind y design tokens; y construyes un set de componentes accesibles con dark mode. Cierras con tu propio sistema de UI desplegado, listo para usar en React/Next, versionado en un repo de GitHub.
¿Cómo dejo de pelearme con el CSS y construyo UI rápido, consistente y accesible, como se trabaja hoy con React y Next?
Eres el front-end de un equipo pequeño que necesita una UI consistente para su producto; el resto del equipo va a reutilizar tus componentes.. El producto se monta con React/Next y hoy cada pantalla estila a mano: colores distintos, botones que no se parecen, foco invisible al tabular y nada de dark mode. Necesitáis un set de componentes base coherente, accesible y reutilizable para dejar de reinventar la rueda en cada pantalla.
Aplicar CSS Grid para maquetar un layout de página (cabecera, contenido y barra lateral) con grid-template-columns y gap, sin floats ni hacks.
Aplicar Flexbox para alinear y distribuir elementos en una dimensión (barra de navegación, fila de botones) con justify-content y align-items.
Entregas: Un mini sistema de UI desplegado: una página demo con al menos cuatro componentes accesibles (botón, card, formulario y nav) construidos con Tailwind, design tokens coherentes (colores, espaciado, tipografía), estados (hover/focus/active), foco visible y dark mode funcional. Responsive verificado, repo en GitHub con commits con criterio y URL pública.
Se evalúa
CSS moderno a escala
Tailwind utility-first
Componentes accesibles y tu sistema de UI
Aplicar mobile-first con media queries y container queries para que un componente se adapte a su contenedor, no solo a la pantalla.