Layout web con CSS Grid, Flexbox y otras técnicas modernas
Un curso de Javier Usobiaga FerrerDiseñador web
Un curso de Javier Usobiaga Ferrer, Diseñador web
Descubre las nuevas retículas y otras formas de diseñar una web con CSS Shapes, variables y efectos parallax
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.
¿Qué aprenderás en este curso online?
25 lecciones & 16 recursos adicionales
Las viewport units
4 minutos, 40 segundos
Imágenes con object-fit
4 minutos, 44 segundos
CSS columns
3 minutos, 1 segundo
CSS shapes
7 minutos, 5 segundos
Variables en CSS
4 minutos, 11 segundos
Introducción a flexbox
3 minutos, 12 segundos
¿Qué incluye este curso?
Lo primero que harás será conocer a Javier Usobiaga, su trayectoria profesional y sus proyectos más destacados.
Empezarás aprendiendo a darle forma al layout con las unidades relativas al viewport units, la propiedad de object-fit y cómo distribuir texto en columnas con CSS columns. Verás cómo las formas de la web pueden dejar de ser rectangulares con clip-path y CSS Shapes y además, aprenderás a optimizar tu código con las variables nativas custom properties.
Descubrirás la revolución que ha supuesto Flexbox en el mundo del layout web. Javier te enseñará todas las posibilidades de alineación de elementos. Para ello, te explicará las propiedades del contenedor y del contenido, y las capacidades de alineaciones con un eje principal, uno cruzado y ejes alternativos.
Continuarás descubriendo las nuevas reglas del juego con CSS Grid cambiando por completo la forma en que estructuras tu código y planteas el layout. Aprenderás algunas funciones de retícula, las propiedades de distribución y tamaño y cómo puedes plantear una retícula que se adapte a diferentes tamaños de pantalla con las funciones repeat y minmax.
Javier te explicará más técnicas avanzadas con CSS Grid sobre las áreas de retícula, la alineación y orden, anidación y por medio de un ejemplo, verás cómo puedes usar Grid y Flexbox de forma combinada en un proyecto.
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.
¿Cuál es el proyecto del curso?
Realizarás un ejercicio libre con una o varias de las técnicas aprendidas. Javier realizará una página informativa sobre la conquista del Polo Sur, tú puedes elegir la temática y el proyecto que quieras.
Proyectos de estudiantes del curso
¿A quién está dirigido este curso online?
A cualquier persona que tenga interés por el diseño y las técnicas modernas de layout con CSS Grid, Flexbox y otras técnicas modernas.
Requisitos y materiales
Para realizar este curso es necesario tener conocimientos sólidos de HTML y CSS, un ordenador y un editor de código.
Opiniones
- hace 8 meses
An Amazing course to learn Flexbox & Grid and some advanced animations.
- hace 8 meses
increíble
- creative_250792PLUShace 9 meses
Cours très instructif, agréable, très complet
- hace 1 año
Es un curso muy bueno
- hace 1 año
Um curso prático e direto, com ênfase em um entendimento passo a passo.
También disfruta mucho en su faceta como profesor de Diseño Web en workshops y escuelas de renombre como Elisava, IDEP.
Usobiaga entiende la web en su globalidad, no solo lo bonita que puede quedar en la pantalla del ordenador, sino su usabilidad en diferentes dispositivos y circunstancias.
En sus palabras “creo que tan importante como lo estética es lo rápido que cargue o lo bien que responda, y me parece que en nuestra industria nos olvidamos a menudo de eso”.
Contenidos
- U1
Introducción
- Presentación
- Influencias
- U2
Dando forma al layout
- Las viewport units
- Imágenes con object-fit
- CSS columns
- CSS shapes
- Variables en CSS
- U3
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
- U4
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
- U5
CSS grid avanzado
- Áreas en la retícula
- Alineación y orden
- Anidación
- Grid (y flexbox) en práctica
- U6
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
- PF
Proyecto final
- Técnicas de layout web
Qué esperar de un curso de Domestika
Aprende a tu ritmo
Disfruta aprendiendo desde casa, sin horarios y a tu ritmo. Tú decides cuándo seguir con cada unidad.
Aprende de los mejores profesionales
Aprende los métodos y técnicas más útiles con los mejores profesionales del sector creativo.
Conoce a profesores expertos
Cada profesor te transmitirá sus conocimientos con pasión, ofreciéndote explicaciones claras y una perspectiva profesional en cada lección.
Certificados
PLUSSi eres Plus, obtén un certificado personalizado y firmado por tu profesor. Compártelo en tu porfolio, en las redes sociales o donde quieras.
Ponte en primera fila
La alta calidad de los vídeos permitirá que no te pierdas ni un solo detalle. Gracias al acceso ilimitado, podrás ver las lecciones todas las veces que necesites para perfeccionar tus habilidades.
Comparte conocimientos e ideas
Pregunta, pide opinión y ofrece soluciones. Comparte tu experiencia de aprendizaje con otros estudiantes de la comunidad tan apasionados por la creatividad como tú.
Conecta con una comunidad creativa global
Esta comunidad cuenta con millones de usuarios de todo el mundo, personas curiosas y con ganas de explorar y expresar su creatividad.
Realiza cursos profesionalmente producidos
Domestika selecciona cuidadosamente los profesores y produce cada curso internamente para garantizar una experiencia de aprendizaje online excelente.
Preguntas frecuentes
El curso está orientado a personas con conocimientos básicos de CSS que desean profundizar en layouts avanzados, técnicas modernas y experimentación con propiedades recientes. No es necesario ser experto, pero sí conocer los fundamentos de HTML y CSS.
Debes tener conocimientos básicos de HTML y CSS, así como un editor de código y navegador moderno. No se requieren herramientas especiales ni experiencia en frameworks.
Aprenderás a crear layouts avanzados y responsivos con Flexbox y CSS Grid, animaciones parallax, formas personalizadas, uso de unidades de viewport, control de imágenes y columnas, variables CSS y transformaciones 3D para interfaces web innovadoras.
El curso abarca alineación de elementos, propiedades avanzadas, diferencias entre Flexbox y Grid, layouts responsivos, grids anidados, áreas personalizadas, técnicas de distribución y cuándo elegir cada uno según el diseño.
Se utilizan vh y vw para adaptar tamaños de bloques, textos e imágenes al tamaño de la ventana del navegador, logrando interfaces responsive y evitando problemas de scroll horizontal o mala proporción.
Sí, aprenderás a implementar animaciones parallax, cabeceras fijas y efectos sincronizados al desplazamiento usando CSS puro y técnicas avanzadas de interacción visual.
Sí, el curso cubre cómo ajustar imágenes usando object-fit, object-position, media queries y técnicas para lograr imágenes adaptables a cualquier contenedor y pantalla.