Layout web con CSS Grid, Flexbox y otras técnicas modernas

Descubre las nuevas retículas y otras formas de diseñar una web con CSS Shapes, variables y efectos parallax

• Introducción
• Dando forma al layout
• Layout en una dimensión con flexbox
• Layout en dos dimensiones con CSS grid
• CSS grid avanzado
• La tercera dimensión: profundidad y efectos en scroll
• Proyecto final

La web vive en un cambio constante y con la llegada de CSS Grid y Flexbox, las reglas del juego volvieron a cambiar. Javier Usobiaga –diseñador web, desarrollador FrontEnd y confundador del estudio Swwweet– tiene 13 años de experiencia creando diversos proyectos para clientes como el Ayuntamiento de Barcelona, y con su amplia experiencia, te invita a descubrir las técnicas y herramientas más modernas que están revolucionando al sector.

Si en el curso de Introducción al Desarrollo Web Responsive con HTML y CSS, ya te iniciaste en el mundo del web responsive, en este aprenderás diversas técnicas avanzadas con herramientas como CSS Grid, Flexbox, CSS Shapes, las viewport units, las variables de CSS, las transformaciones 3D o los efectos tipo parallax.

• Presentación
• Influencias
• Las viewport units
• Imágenes con object-fit
• CSS columns
• CSS shapes
• Variables en CSS
• Introducción a flexbox
• Propiedades del contenedor
• Propiedades del contenido
• Alineaciones en eje principal y eje cruzado
• Alineaciones avanzadas
• Layouts avanzados con flexbox
• Introducción a CSS grid
• Funciones de retícula
• Distribución y tamaño
• Grid responsive automático
• Áreas en la retícula
• Alineación y orden
• Anidación
• Grid (y flexbox) en práctica
• Introducción a las transformaciones 3D
• Cabeceras fijas
• Animaciones sincronizadas con scroll
• Inspiración y recursos
• Técnicas de layout web