Layout web con CSS Grid, Flexbox y otras técnicas modernas
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
- 99% Valoraciones positivas (138)
- 3064 alumnos
- Audio: Español
- Español, Inglés, Portugués, Alemán, Francés, Italiano

Descubre las nuevas retículas y otras formas de diseñar una web con CSS Shapes, variables y efectos parallax
- 99% Valoraciones positivas (138)
- 3064 alumnos
- Online y a tu ritmo
- Audio: Español
- Nivel: Avanzado
- 25 Lecciones (2h 16m)
- Disponible desde la app
- Español, Inglés, Portugués, Alemán, Francés, Italiano
- Acceso ilimitado
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é incluye este curso?
Tabla de contenidos del curso
-
U1U1. Introducción
-
U2U2. Dando forma al layout
-
U3U3. Layout en una dimensión con flexbox
-
U4U4. Layout en dos dimensiones con CSS grid
-
U5U5. CSS grid avanzado
-
U6U6. La tercera dimensión: profundidad y efectos en scroll
-
PFPF Proyecto final
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 alumnos del curso
¿A quién está dirigido?
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
Para realizar este curso es necesario tener conocimientos sólidos de HTML y CSS, un ordenador y un editor de código.

Valoraciones

Un curso de Javier Usobiaga Ferrer
Javier Usobiaga es diseñador web y desarrollador FrontEnd, desde hace más de 10 años y cofundador junto a Marta Armada del estudio Swwweet, especializado en diseñar webs responsive desde la concepción inicial hasta el desarrollo front-end.
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
-
Así son los cursos de Domestika
-
Aprende a tu ritmo
Disfruta de los cursos desde casa, sin horarios ni entregas. Tú marcas tu propia agenda.
-
De la mano del profesor
Aprende técnicas y métodos de gran valor explicados por los grandes expertos del sector creativo.
-
Profesores expertos
Cada profesor imparte solo lo que mejor sabe hacer, asegurando transmitir la pasión y la excelencia en cada lección.
-
Certificado Pro
Acredita tu asistencia al curso con un certificado firmado por el profesor. Consíguelo con tu suscripción a Domestika PRO.
-
En primera fila
Vídeos de máxima calidad para que no pierdas detalle. Y como el acceso es ilimitado, puedes verlos una y otra vez.
-
Comparte conocimiento
Expón tus dudas, pide feedback, aporta soluciones. Comparte el aprendizaje con el resto de los alumnos de la comunidad.
-
Comunidad creativa
Más de 5M creativos y creciendo. Domestika es el entorno ideal para compartir y aprender lo que te apasiona.
-
Cursos producidos profesionalmente
Seleccionamos a los mejores creativos y un equipo profesional produce el curso con ellos. El resultado: sentirás que trabajas mano a mano con los mejores.
Preguntas frecuentes
-
¿Qué son los cursos online de Domestika?
Los cursos de Domestika son unas clases online que te permiten aprender una serie de herramientas y habilidades para realizar un proyecto concreto. Cada paso del proyecto combina vídeos y textos junto a materiales didácticos complementarios. Los cursos también te ofrecen la oportunidad de compartir tus propios proyectos con otros usuarios y con el profesor, creando así una comunidad en torno al curso.
-
¿Cuándo empiezan y cuándo acaban los cursos?
La modalidad de los cursos es 100% online, por tanto una vez estén publicados, los cursos empiezan y acaban cuando tú quieras. Tú marcas el ritmo de la clase. Puedes volver a ver lo que te interese, pasar lo que ya te sepas, hacer preguntas, resolver dudas, compartir tus proyectos y mucho más.
-
¿Qué incluyen los cursos de Domestika?
Los cursos se dividen en diferentes Unidades, cada una de ellas incluyen lecciones, textos explicativos, tareas y prácticas para llevar a cabo tu proyecto paso a paso, recursos y documentos adjuntos complementarios. También tendrás acceso a un Foro exclusivo donde puedes interactuar con todos los alumnos del curso y el profesor, así como compartir tus trabajos y el proyecto que realices, creándose de esta manera una comunidad en torno al curso.
-
¿Te han regalado un curso?
Puedes canjear un curso que te han regalado accediendo a la página de canjeo donde podrás introducir el código de regalo que te han proporcionado.
trax
Súper completo y muy buena explicación, buen ritmo y no te pierdes en el contenido.
netco65
Es increhible lo que se puede lograr con tan solo dos cursos , voy por rl tercero, felicidades!
arielroiter
El curso esta bien. Repasa cosas que podria ver por mi cuenta con la documentacion de la web pero es mas ameno que lo muestre el profesor.
Le faltaria una partepractica donde uno haga a la par algun ejercicio junto a él.
Los ejercicios del curso son del tipo "ya te lo mostré, ahora arreglatelas tu mismo"
nikita_tirita
¡Gracias a Javier estoy entendiendo el flexbox, que me traía por la calle de la amargura!
por muchas vueltas que daba no conseguía ajustar el contenido, los menus se me quedaban con huecos y ahora ya entiendo mejor cómo funciona,¡es un crack!
agomezjuan
Las explicaciones son muy precisas. Aprendí trucos geniales con flexbox sin mucho esfuezo. Lo recomiendo 100%