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í

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

• Guía para aprender CSS
• Quíces de JS y CSS para que repases conceptos
• Qué es Platzi Master

Cursos Recomendados:

• Curso de Frontend Developer
• Curso Definitivo de HTML y CSS

Apuntes de la clase:

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

Slides: Click aquí

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

Apuntes de la clase:

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

Slides: Click aquí

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

• The Noodle incident
• Columnas Falsas
• Propuesta de Responsive Design
• Código de las cards flotantes

Apuntes de la clase:

4. Herramientas que nos han facilitado el camino

Slides: Click aquí

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

Apuntes de la clase:

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

Slides: Click aquí

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

• A brief history of CSS until 2016
• CSS Advanced Layout Module (2007)
• Giving Content Priority with CSS3 Grid Layout (By Rachel Andrew in 2012)
• Establishing Web Standards

Apuntes de la clase:

6. ¿Qué significa Grid para CSS?

Slides: Click aquí

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

• The Story of CSS Grid, from Its Creators

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í

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

• Alinear elementos de bloque en CSS3 (2016)

10. Modos de escritura y ejes de alineamiento + Reto

Slides: Click aquí

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

• CSS Writing Modes (By Jen Simmons in 2016)

Reto:

• Modos de escritura

Documentación en español para el reto:

• Propiedad direction
• Propiedad writing-mode

Recuerda mostrarnos en los comentarios cualquier cosita que hagas :D Así, todos podemos aprender de todos !

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

Slides: Click aquí

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

• CSS Logical Properties (by Estefany Aguilar in 2019)
• Quíz de la clase

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í

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

Inspiración:

• A single div
• No tengas miedo a dibujar con CSS
• dotCSS 2016 - Wenting Zhang - Make CSS your secret super drawing tool

Código:

• Ilustración utilizada
• Dibujemos con CSS · final

Reto:

• Dibujarte CSS · Sitio Web
• Dibujarte CSS · Repo para que puedas hacer PR con tu dibujito

No se te olvide compartir en los comentarios tu dibujo !!!

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

Slides: Click aquí

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

• A simple visual cheatsheet for CSS Grid Layout
• Solución del quíz

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

Slides: Click aquí

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

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

Slides: Click aquí

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

Inspiración:

• Deconstruction Poster Design Collection
• 3 ways to experiment with latest UI trend—asymmetrical grids & layouts
• Cure unique nail wax boutique

Imágenes Gratis:

• Pexels
• Pixabay
• Freepik

Fuentes:

• Google Fonts

Colores:

• Color Hunt
• My Color Space
• HTML Color Codes

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

Slides: Click aquí

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

• Digging Into The Display Property: The Two Values Of Display

18. Creando filas, columnas y espaciado + Reto

Slides: Click aquí

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

Código:

• Creación de filas y columnas

19. Alineamiento + Quíz

Slides: Click aquí

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

Documentación:

• CSS Grid: Justification and Alignment

Código:

• Alineamiento

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

Slides: Click aquí

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

• The Difference Between Explicit and Implicit Grids

Fuente de los diseños mostrados en la clase:

• Una nueva imagen para la Ópera de Saint Etienne
• Sceumorphic UI

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

Slides: Click aquí

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

Documentación:

• Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit
• A Deep Dive Into CSS Grid minmax()

Código:

• minmax()

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í

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

Fuente del diseño mostrado en la clase:

• Photo social app, continuation of previous style

24. Alineamiento + Quíz

Slides: Click aquí

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

Código:

• Ubicación

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í

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

• Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit
• Ejemplo de Sara Soueidan con auto-fill y auto-fill
• Ejemplo de Jen Simmons usando auto-fit (inspecciona el elemento main)

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

Slides: Click aquí

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

• A book apart

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í

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

2. La importancia de recordar las herramientas existentes

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

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

Slides: Click aquí

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

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

Slides: Click aquí

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

• Understanding CSS Layout And The Block Formatting Context

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

Slides: Click aquí

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

6. Diferencias entre Flexbox y CSS Grid

Slides: Click aquí

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

• A Complete Guide to Flexbox | CSS Tricks
• Conceptos Básicos de flexbox
• A Complete Guide to Grid | CSS Tricks
• CSS Grid Layout | MDN

7. Similitudes entre Flexbox y CSS Grid

Slides: Click aquí

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

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

Slides: Click aquí

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

• Dog Lovers · Image

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

Slides: Click aquí

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

Código:

• App bar top · Flexbox
• App bar top · CSS Grid
• Dialog

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

Slides: Click aquí

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

Código:

• (Navigation Rail · Flexbox)[https://codepen.io/teffcode_/pen/pogJmmY]
• (Navigation Rail · CSS Grid)[https://codepen.io/teffcode_/pen/RwrPzrx]
• (List)[https://codepen.io/teffcode_/pen/BajNgKO]

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

Slides: Click aquí

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

• TENDENCIAS EN DISEÑO WEB PARA 2020
• Travel User Interface
• Cards
• UI exploration for Workfy

12. ¿Qué son los Modern CSS Layouts?

Slides: Click aquí

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

13. Patrones para usar como punto de partida

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

• Here is the collection of 91 patterns
• Relearn CSS layout

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

Slides: Click aquí

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

• One line layouts

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

Slides: Click aquí

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

• One line layouts

16. Dinámica: No puedo dejar de ver

Slides: Click aquí

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

• Can't unsee

17. Design System y detalles visuales a tener en cuenta

Slides: Click aquí

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

• Design System Shopify
• 10 great design systems and how to learn (and steal) from them
• A comprehensive guide to design systems
• Design Systems Gallery
• Space, Grids, and Layouts
• Everything you need to know about Design Systems

Tarea:

• What are design tokens?

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

Slides: Click aquí

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

• UX/UI Design Trends 2020 · Video
• Principios de diseño de UI
• How I Use CSS Grid and Flexbox to Create a One-Page Website — Part 2
• Cómo Airbnb diseña para la confianza
• UX/UI Design Trends 2020
• 8 UI design trends for 2020
• 100 lessons for the year to come

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

Slides: Click aquí

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

• UI/UX design guide with terms, explanations, tips and trends
• Free online mockups

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

Slides: Click aquí

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

• Tweet · Figma Auto Layout
• Auto Layout · Video
• Office Hours: Auto Layout · Video
• Figma Community: el GitHub para l@s diseñador@es
• Design more, resize less, with Auto Layout
• 3 useful tips for designing neumorphic interfaces (soft UI)
• Neumorphism the right way — A 2020 Design Trend
• Figma
• Create dynamic designs with Auto Layout
• Inspiración para el diseño del reproductor de música

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

Slides: Click aquí

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

• Tweet · Figma Auto Layout
• Auto Layout · Video
• Office Hours: Auto Layout · Video
• Figma Community: el GitHub para l@s diseñador@es
• Design more, resize less, with Auto Layout
• 3 useful tips for designing neumorphic interfaces (soft UI)
• Neumorphism the right way — A 2020 Design Trend
• Figma
• Create dynamic designs with Auto Layout
• Inspiración para el diseño del reproductor de música

22. Primeros pasos y estructura inicial

Slides: Click aquí

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

23. Ubicación y creación de elementos

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

• Neumorphism initial
• Neumorphism final

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

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

25. CSS Subgrid

Slides: Click aquí

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

26. Native CSS Massonry Layout

Slides: Click aquí

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

• Native CSS Masonry Layout In CSS Grid

27. CSS feature queries: @supports

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

• Using Feature Queries in CSS
• Get Ready for display: contents;

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

Slides: Click aquí

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