¿Qué Necesitas?
- Editor de código
- Computadora o Laptop
- Conocimientos previos de HTML y CSS
¿Qué Aprenderás?
Con el crecimiento del mundo web moderno se han implementado nuevas funcionalidades que nos permitirán una mejor manera de trabajar nuestros sitios web de manera más profesional y optimizada, como lo viene siendo Flexbox y CSS Grid. A través de este curso aprenderás a utilizar cada una de ellas, impulsando tus conocimientos a un nuevo nivel.
Conocerás brevemente las transformaciones 3D con un ejemplo práctico de profundidad y efectos en scroll para finalmente ver proyectos, ejemplos y recursos seleccionados por Javier para que te sirvan de inspiración.
Módulos y Clases
1. Introducción
- Presentación
- Influencias
2. Dando forma al layout
- Las viewport units
- Imágenes con object-fit
- CSS columns
- CSS shapes
- Variables en CSS
3. Layout en una dimensión con flexbox
- Introducción a flexbox
- Propiedades del contenedor
- Propiedades del contenido
- Alineaciones en eje principal y eje cruzado
- Alineaciones avanzadas
- Layouts avanzados con flexbox
4. Layout en dos dimensiones con CSS grid
- Introducción a CSS grid
- Funciones de retícula
- Distribución y tamaño
- Grid responsive automático
5. CSS grid avanzado
- Áreas en la retícula
- Alineación y orden
- Anidación
- Grid (y flexbox) en práctica
6. La tercera dimensión: profundidad y efectos en scroll
- Introducción a las transformaciones 3D
- Cabeceras fijas
- Animaciones sincronizadas con scroll
- Inspiración y recursos
7. Proyecto final
- Técnicas de layout web
