Layout web con CSS Grid, Flexbox y otras técnicas modernas
Offered By: Domestika
Course Description
Overview
Descubre las nuevas retículas y otras formas de diseñar una web con CSS Shapes, variables y efectos parallax
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.
- 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
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.
Syllabus
- 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
Taught by
Javier Usobiaga Ferrer
Related Courses
Advanced CSS ConceptsMicrosoft via edX Тонкости верстки
Moscow Institute of Physics and Technology via Coursera CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)
Udemy Build Responsive Real-World Websites with HTML and CSS
Udemy HTML5 & CSS3 Build: Two Responsive Websites in Hindi
Udemy