Hola :) En este repositorio encontrarás toda la documentación que utilizamos en los cursos de CSS Grid y Diseño Web con CSS Grid y Flexbox. Adicional, también encontrarás algunos apuntes de las clases y los slides para que puedas estudiar con mucho más detalle (pero, son sólo para ti 🤫).

Para comenzar, solo queremos recordarte que este contenido es exclusivo de Platzi 🎉

1. Curso de CSS Grid
2. Curso de Diseño Web con CSS Grid y Flexbox

Curso de CSS Grid 💚

1. Tips para que lleves tus conocimientos de CSS a otro nivel + Quices
2. ¿Cómo fue pensado CSS cuando se creó?
3. Limitaciones de CSS y el problema de los elementos flotantes
4. Herramientas que nos han facilitado el camino
5. ¿CSS Grid es una idea nueva? La evolución de la especificación
6. ¿Qué significa Grid para CSS?
7. Técnicas de alineamiento antes de CSS Grid (Parte 1)
8. Técnicas de alineamiento antes de CSS Grid (Parte 2)
9. Pros y contras de las técnicas de alineamiento antes de CSS Grid
10. Modos de escritura y ejes de alineamiento + Reto
11. Propiedades físicas y lógicas en CSS + Quíz
12. Técnicas de alineamiento con Flexbox
13. Dibujemos con CSS + Reto
14. Grid y las relaciones padre e hijos inmediatos + Quíz
15. Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
16. ¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
17. Creando nuestro contenedor: ¿display: grid o display: inline-grid?
18. Creando filas, columnas y espaciado + Reto
19. Alineamiento + Quíz
20. Generación automática de tracks + Quíz
21. Funciones: repeat(), minmax() y fit-content() + Quíz
22. ¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
23. Ubicación + Reto
24. Alineamiento + Quíz
25. ¡Manos al código! Fase de ubicación y alineamiento (Parte 1))
26. ¡Manos al código! Fase de ubicación y alineamiento (Parte 2)
27. Diseño responsivo sin media queries + Reto
28. ¿Vendrá algo más para esta especificación?

Apuntes de estudiantes 😍

• Harrinson Quintero 👉🏼 Sus notas y su Twitter

1. Tips para que lleves tus conocimientos de CSS a otro nivel + Quices

Slides: Click aquí

2. ¿Cómo fue pensado CSS cuando se creó?

Slides: Click aquí

3. Limitaciones de CSS y el problema de los elementos flotantes

Slides: Click aquí

4. Herramientas que nos han facilitado el camino

Slides: Click aquí

5. ¿CSS Grid es una idea nueva? La evolución de la especificación

Slides: Click aquí

6. ¿Qué significa Grid para CSS?

Slides: Click aquí

7. Técnicas de alineamiento antes de CSS Grid (Parte 1)

Slides: Click aquí

Haz click aquí para ver la documentación de esta clase 👀

Documentación:

• Alinear elementos de bloque en CSS3 (2016)

Código:

• Alignment techniques · margin · initial
• Alignment techniques · margin · final
• Alignment techniques · line-height · initial
• Alignment techniques · line-height · final

Apuntes de la clase:

8. Técnicas de alineamiento antes de CSS Grid (Parte 2)

Slides: Click aquí

Haz click aquí para ver la documentación de esta clase 👀

Documentación:

• Alinear elementos de bloque en CSS3 (2016)
• A Complete Guide to the Table Element

Código:

• Alignment techniques · table-cell · initial
• Alignment techniques · table-cell · final
• Alignment techniques · positions · initial
• Alignment techniques · positions · final

Apuntes de la clase:

9. Pros y contras de las técnicas de alineamiento antes de CSS Grid

Slides: Click aquí

10. Modos de escritura y ejes de alineamiento + Reto

Slides: Click aquí

11. Propiedades físicas y lógicas en CSS + Quíz

Slides: Click aquí

12. Técnicas de alineamiento con Flexbox

Slides: Click aquí

Haz click aquí para ver la documentación de esta clase 👀

Documentación:

A Complete Guide to Flexbox

Código:

• Alignment techniques · Flexbox · inital
• Alignment techniques · Flexbox · final

Apuntes de la clase:

13. Dibujemos con CSS + Reto

Slides: Click aquí

14. Grid y las relaciones padre e hijos inmediatos + Quíz

Slides: Click aquí

15. Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

Slides: Click aquí

16. ¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos

Slides: Click aquí

17. Creando nuestro contenedor: ¿display: grid o display: inline-grid?

Slides: Click aquí

18. Creando filas, columnas y espaciado + Reto

Slides: Click aquí

19. Alineamiento + Quíz

Slides: Click aquí

20. Generación automática de tracks + Quíz

Slides: Click aquí

21. Funciones: repeat(), minmax() y fit-content() + Quíz

Slides: Click aquí

22. ¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto

Slides: Click aquí

Haz click aquí para ver la documentación de esta clase 👀

• Código

Apuntes de la clase:

23. Ubicación + Reto

Slides: Click aquí

24. Alineamiento + Quíz

Slides: Click aquí

25. ¡Manos al código! Fase de ubicación y alineamiento (Parte 1)

Slides: Click aquí

Haz click aquí para ver la documentación de esta clase 👀

• Código

Apuntes de la clase:

26. ¡Manos al código! Fase de ubicación y alineamiento (Parte 2)

Slides: Click aquí

Haz click aquí para ver la documentación de esta clase 👀

• Código para iniciar
• Código final

Apuntes de la clase:

27. Diseño responsivo sin media queries + Reto

Slides: Click aquí

28. ¿Vendrá algo más para esta especificación?

Slides: Click aquí

Curso de Diseño Web con CSS Grid y Flexbox 💚

1. Todo sobre el diseño de páginas web acaba de cambiar
2. La importancia de recordar las herramientas existentes
3. Flujo normal del documento: Display block, inline e inline-block
4. Contextos de formato: Formato de Contexto de Bloque (BFC)
5. Posicionamiento + Dinámica: ¿Cómo se vería?
6. Diferencias entre Flexbox y CSS Grid
7. Similitudes entre Flexbox y CSS Grid
8. ¿Puedo trabajar con Flexbox y CSS Grid al tiempo?
9. Dinámica: ¿Qué usarías? (Parte 1)
10. Dinámica: ¿Qué usarías? (Parte 2) + Reto
11. ¿Cuándo usar Flexbox y cuándo usar CSS Grid?
12. ¿Qué son los Modern CSS Layouts?
13. Patrones para usar como punto de partida
14. Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout
15. Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect
16. Dinámica: No puedo dejar de ver
17. Design System y detalles visuales a tener en cuenta
18. Tendencias de diseño UI/UX: Fase de inspiración y creatividad
19. Wireframes y comunicación visual simple, intuitiva y atractiva
20. Figma para devs: Auto Layout y Neumorphism (Parte 1)
21. Figma para devs: Auto Layout y Neumorphism (Parte 2)
22. Primeros pasos y estructura inicial
23. Ubicación y creación de elementos
24. Entendiendo las versiones de CSS. ¿Existirá CSS4?
25. CSS Subgrid
26. Native CSS Massonry Layout
27. CSS feature queries: @supports
28. Nosotros y el futuro de la web: Tips para seguir aprendiendo y mantenerse al día

1. Todo sobre el diseño de páginas web acaba de cambiar

Slides: Click aquí

2. La importancia de recordar las herramientas existentes

3. Flujo normal del documento: Display block, inline e inline-block

Slides: Click aquí

4. Contextos de formato: Formato de Contexto de Bloque (BFC)

Slides: Click aquí

5. Posicionamiento + Dinámica: ¿Cómo se vería?

Slides: Click aquí

6. Diferencias entre Flexbox y CSS Grid

Slides: Click aquí

7. Similitudes entre Flexbox y CSS Grid

Slides: Click aquí

8. ¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

Slides: Click aquí

9. Dinámica: ¿Qué usarías? (Parte 1)

Slides: Click aquí

10. Dinámica: ¿Qué usarías? (Parte 2) + Reto

Slides: Click aquí

11. ¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Slides: Click aquí

12. ¿Qué son los Modern CSS Layouts?

Slides: Click aquí

13. Patrones para usar como punto de partida

14. Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

Slides: Click aquí

15. Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Slides: Click aquí

16. Dinámica: No puedo dejar de ver

Slides: Click aquí

17. Design System y detalles visuales a tener en cuenta

Slides: Click aquí

18. Tendencias de diseño UI/UX: Fase de inspiración y creatividad

Slides: Click aquí

19. Wireframes y comunicación visual simple, intuitiva y atractiva

Slides: Click aquí

20. Figma para devs: Auto Layout y Neumorphism (Parte 1)

Slides: Click aquí

21. Figma para devs: Auto Layout y Neumorphism (Parte 2)

Slides: Click aquí

22. Primeros pasos y estructura inicial

Slides: Click aquí

23. Ubicación y creación de elementos

24. Entendiendo las versiones de CSS. ¿Existirá CSS4?

25. CSS Subgrid

Slides: Click aquí

26. Native CSS Massonry Layout

Slides: Click aquí

27. CSS feature queries: @supports

28. Nosotros y el futuro de la web: Tips para seguir aprendiendo y mantenerse al día

Slides: Click aquí