Temario y recursos del Curso de CSS Grid Layout
Temario del Curso de CSS Grid Layout
Lleva tus conocimientos de CSS a otro nivel
¿De dónde venimos y en dónde estamos?
- ¿Cómo fue pensado CSS cuando se creó?
- Limitaciones de CSS y el problema de los elementos flotantes
- Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
Control de alineamiento
- Técnicas de alineamiento antes de CSS Grid: margin y line-height
- Técnicas de alineamiento antes de CSS Grid: table-cell y positions
- Técnicas de alineamiento de CSS Grid: pros y contras
- Modos de escritura y ejes de alineamiento + Reto
- Propiedades físicas y lógicas en CSS + Quiz
- Técnicas de alineamiento con Flexbox
- Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
- Grid y las relaciones padre e hijos inmediatos + Quíz
- Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
- ¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
- Creando nuestro contenedor: ¿display: grid o display: inline-grid?
- Creando filas, columnas y espaciado + Reto
- Alineamiento en el elemento contenedor + Quiz
- Generación automática de tracks + Quíz
- Funciones: repeat(), minmax() y fit-content() + Quíz
Propiedades y valores para los elementos hijos
- ¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
- Ubicación + Reto
- Alineamiento en los elementos hijos + Quiz
- ¡Manos al código! Fase de ubicación y alineamiento
- Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Para este curso vas a necesitar
4 Horas de contenido
16 Horas de práctica
Conocimientos previos
- HTML.
- CSS.
Software para este curso
- Navegador web.
- Editor de código
Para este curso vas a necesitar
4 Horas de contenido
16 Horas de práctica
Conocimientos previos
- HTML.
- CSS.
Software para este curso
- Navegador web.
- Editor de código
Lleva tus conocimientos de CSS a otro nivel
¿De dónde venimos y en dónde estamos?
- ¿Cómo fue pensado CSS cuando se creó?
- Limitaciones de CSS y el problema de los elementos flotantes
- Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
Control de alineamiento
- Técnicas de alineamiento antes de CSS Grid: margin y line-height
- Técnicas de alineamiento antes de CSS Grid: table-cell y positions
- Técnicas de alineamiento de CSS Grid: pros y contras
- Modos de escritura y ejes de alineamiento + Reto
- Propiedades físicas y lógicas en CSS + Quiz
- Técnicas de alineamiento con Flexbox
- Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
- Grid y las relaciones padre e hijos inmediatos + Quíz
- Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
- ¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
- Creando nuestro contenedor: ¿display: grid o display: inline-grid?
- Creando filas, columnas y espaciado + Reto
- Alineamiento en el elemento contenedor + Quiz
- Generación automática de tracks + Quíz
- Funciones: repeat(), minmax() y fit-content() + Quíz
Propiedades y valores para los elementos hijos
- ¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
- Ubicación + Reto
- Alineamiento en los elementos hijos + Quiz
- ¡Manos al código! Fase de ubicación y alineamiento
- Continuando con la fase de ubicación y alineamiento
