En este curso de CSS Grid vamos a aprender todo lo necesario para utilizar y saber desenvolvernos con las propiedades Grid implementadas en el lenguaje de marcas CSS.
Con CSS Grid podemos crear estructuras de grilla en dos dimensiones de manera que nuestros layouts serán mucho más versátiles. Así podemos crear y maquetar nuestras páginas web de una manera más dinámica y moderna para todos los soportes que hoy en día consumen la web: teléfono, tablet y ordenador.
Además a lo largo de las diferentes lecciones vamos a ir aplicando los conocimientos aprendidos para ir profundizando poco a poco en el uso del Grid y entender por qué se maqueta de esta manera para así podamos terminar siendo unos maestros en la maquetación CSS.
Empezaremos por lo más básico: ¿qué es CSS Grid o Grid Layout? viendo su origen, estado actual en la W3C y para qué sirve. Seguido veremos las bases del layout para entender por qué es importante la web responsive y cómo podemos trabajar con columnas y estructuras en bloque. A partir de aquí veremos practicaremos con las propiedades flex de CSS Flexbox para entender de menos a más layout, columnas y una dimensión.
Con todo este contexto de capas bien asentado nos adentraremos en CSS Grid viendo las bases y cómo funciona. Trabajaremos nombre y posicionamiento de la grilla, repeaters, y grid template areas para construir las grillas de una manera dinámica.
Finalmente extenderemos nuestros conocimientos con los alineamientos de elementos del grid y las propiedades auto-fit y auto-fill. ¡Y no queda ahí la cosa!, lograremos construir nuestra propia web complementos con CSS Grid.
Sin duda este curso es muy interesante si queréis aprender a maquetar vuestros propios proyectos utilizando propiedades modernas de CSS con CSS Grid.
Tened en cuenta que para realizar el curso necesitaréis conocimientos básicos de HTML y CSS de cara a poder entender algunas cuestiones y programar pero no os preocupeis porque en Boluda.com teneis cursos de CSS para poder completar vuestra experiencia en línea.
Todos los capítulos de este curso:
- Curso de CSS Grid #1. ¿Qué es CSS Grid?
- Curso de CSS Grid #2. Empezamos las bases del layout
- Curso de CSS Grid #3. Trabajamos en una dimensión con Flexbox
- Curso de CSS Grid #4. Trabajamos en dos dimensiones con CSS Grid
- Curso de CSS Grid #5. Nombres y posicionamiento en línea
- Curso de CSS Grid #6. Repeat en CSS Grid
- Curso de CSS Grid #7. Grid Template Areas
- Curso de CSS Grid #8. Alineamiento de elementos del grid
- Curso de CSS Grid #9. Grid Auto-fit y Auto-fill
- Curso de CSS Grid #10. Montamos nuestra web con CSS Grid