CSS, Arquitectura CSS, Maquetación web

Taller de CSS Grid Layout

Formación para dominar esta nueva especificación de la W3C para maquetar y colocar información dentro de nuestros websites

Material disponible

Intermedio

6 Clases 12 h

Comprar curso

O suscríbete a 200+ cursos

Guardar curso

En este curso vamos a impartir una formación esencial para los desarrolladores frontend dedicados a la maquetación de sitios y aplicaciones basadas en web. Se trata de un Curso de CSS Grid Layout, en el que conocerás el estándar más nuevo y potente para la maquetación de contenidos, mediante una rejilla.

CSS Grid Layout es una especificación de la W3C para maquetar y colocar información dentro de una página, organizando mejor el espacio de los elementos de nuestro proyecto, tanto vertical como horizontalmente. La rejilla estándar además logra una mejor adaptación a los diferentes tamaños de pantalla y dispositivos, reduciendo el peso de un sitio. Gracias a este módulo, podemos estructurar el contenido de la página con una rejilla de filas y columnas, para después ir indicando dónde queremos colocar cada elemento dentro de ella.

Qué aprenderé en el Taller de CSS Grid Layout

El Taller de CSS Grid Layout se dividirá en 3 bloques de contenidos repartidos a lo largo de 6 clases con una duración, cada una de ellas, de 90 minutos por clase:

Bloque 1 (clases 1 y 2): teoría, conceptos clave y ejemplos de las propiedades del -contenedor y los ítem
Bloque 2 (clases 2 y 3): ejemplos de aplicación de Grid Layout.
Bloque 3 (clases 5 y 6): diferencias con Flexbox y coexistencia entre ambos.

Objetivos del curso

CSS Grid Layout es un concepto diferente pero compatible con Flexbox, cuya combinación ofrece también muy buenos resultados. Uno de los objetivos de este nuevo taller es conocer las diferencias entre ambos y entender cuándo se debería aplicar uno y otro.

Si no tienes conocimientos en Flexbox te recomendamos el Taller Profesional Flexbox que impartimos con nuestra docente Diana Aceves y en el que podrás aprender a sacar el máximo provecho de esta potente herramienta de CSS.

Por qué debes aprender CSS Grid Layout

La forma en que maquetamos sitios web ha sufrido una constante evolución, directamente relacionada con la aparición de nuevas especificaciones CSS a lo largo del tiempo. Desde las primeras páginas basadas en tablas, pasando por el tradicional modelo de caja o el más reciente Flexbox, los diseñadores siempre han echado en falta un sistema de rejilla, existente desde siempre en medios más tradicionales.

Hasta ahora, si queríamos usar una rejilla, estábamos obligados a usar un framework CSS no estándar, lo que agregaba peso a nuestro CSS y aumentaba el tiempo y esfuerzo del navegador a la hora de interpretar un código, a la vez que complicaba el mantenimiento de los diseños.

Por fin disponemos de un mecanismo CSS estándar para crear un Grid Layout, lo que ha permitido dar un salto de calidad en el diseño de una página web a la hora de crearla, mantenerla y optimizarla.

Qué tengo que saber

Este nuevo Taller de CSS Grid Layout está dirigido a desarrolladores con experiencia con HTML y CSS, y preferiblemente conocimientos de Flexbox, que deseen aprender de forma amena y de calidad esta gran herramienta a la hora de crear el layout de sitios y aplicaciones web.

Clases y contenidos

Primeros pasos con CSS Grid Layout Gratis

Introducción a CSS Grid Layout y sus propiedades.

Más atributos y valores del estándar CSS Grid Layout

Terminamos el Bloque 1 (clases 1 y 2) dedicado a la teoría, conceptos clave y ejemplos de las propiedades del contenedor y los ítem

Práctica con ejemplos y aplicación del estándar CSS Grid en casos reales

Comenzamos el bloque 2 de contenidos (clases 2 y 3) en el que tratamos ejemplos de aplicación de Grid Layout.

Nuevos ejemplos prácticos de aplicación de CSS Grid Layout

Continuamos con más modelos de aplicación de Grid Layout para entender y dominar sus propiedades

Auto-placement en CSS Grid Layou

Continuamos profundizando en con más aspectos y ejemplos de Auto-placement, además de propiedades como Grid-Auto- Flow y repasamos diferencias/coexistencia con Flexbox.

Ejemplos reales de aplicación de Grid Layout

En está última sesión nos centramos en resolver un problema concreto con autofit y autofill para continuar adentrándonos con ejemplos de Layouts reales.

Comprar curso

Valoraciones

Judith Neumann

Ricardo Gonart

JuanRa Hortal Blesa

Alejandro Narvaja

Fran Gómez

Oihana Alberdi

Luis D.

Elena Reifs Hernando

Diana es una excelente formadora. El taller de Flexbox que impartió fué buenísimo y éste de Grid excelente.

gabriel Pedrozo

ezequiel alvarez

Diana es muy buena, me hubiese gustado que hiciese un proyecto simple entero. Los mediadores un desastre no saben del tema, no filtran las preguntas y atrasan conviertiendo el curso en denso

abraham cayetano

Victor Rodriguez

Irene Gómez de la Fuente

Carlos Eusebio Martínez Carrión

Ingrid Carolina Peláez

Muy buena profesora, gran dominio de la materia! 100% recomendada.

Josep Tarrega Juan

María José García Lorite

Visualnacert

Sergio Forés

Muy completo y con buen ritmo.

ALVARO HERRANZ

Ernesto Moscoso

La instructora va de lo simple a lo complejo en forma didáctica y amena, de tal modo que todo resulta muy sencillo. Un curso muy recomendable.

Franklin Palomino

Alvaro Ramirez Castillo

Demasiado bueno el curso de grid layout

BERNARDINO VEGA DE LA ROSA

Pablo GP

Antonio Berbel Gonzalez

Todo muy claro u muy didáctico

Edilmer

Excelente curso con ejemplos muy prácticos. Diana explica de manera extraordinariamente clara y didáctica. Ojalá una actualización de todo su material.

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.