9:45 - 9:50👋🏼 Llegada9:50 - 9:55😄 Bienvenida: Para quién es este taller y código de conducta9:55 - 10:00👀 Visión general del taller y preguntas iniciales10:00 - 10:05🍡 Repaso general de las propiedades básicas de Flexbox10:05 - 10:10🌱 Explicación teórica y práctica de la propiedad flex-grow10:10 - 10:15👖 Explicación teórica y práctica de la propiedad flex-shrink10:15 - 10:20📏 Explicación teórica y práctica de la propiedad flex-basis10:20 - 10:25💥 Explicación teórica y práctica de la propiedad flex10:25 - 10:30❓ Q&A10:30 - 10:40📇 Maquetación de componente de Card usando la propiedad flex-grow10:40 - 10:50👍🏼 Maquetación de componente de Feedback usando la propiedad flex10:50 - 11:00🎮 Kahoot11:00 - 11:05🥪 Break time11:05 - 11:10🍱 Repaso general de propiedades básicas de CSS Grid11:10 - 11:15🩲 Explicación teórica y práctica del valor auto-fit y auto-fill11:15 - 11:25📦 Maquetación de container de Cards usando CSS Grid11:25 - 11:35🧐 Actividad: ¿Qué usarías: Flexbox o CSS Grid?11:35 - 11:40❓ Q&A11:40 - 11:41📄 Documentación recomendada11:41 - 11:42🤓 Mis cursos recomendados11:42 - 11:43🔗 Cheat Sheets11:43 - 11:45😫 Despedida
En este espacio estaremos esperando 5 minuticos mientras los y las estudiantes se unen a la llamada. Pasados estos 5 minutos daremos inicio al taller.
Hola ! Te doy la bienvenida a este taller de Flexbox + CSS Grid en donde aprenderemos a usar la propiedad flex de Flexbox, los valores auto-fit y auto-fill de CSS Grid y a diferenciar cuándo usar Flexbox y cuándo usar CSS Grid en casos de la vida real.
Los requerimientos para este taller son:
- Conocimientos básicos en CSS
- Conocimientos generales de qué es y cómo funciona Flexbox
- Conocimientos generales de qué es y cómo funciona CSS Grid
Por esta razón, este taller está dirigido a estudiantes de Platzi que completaron el Curso de Frontend Developer y/o el Curso Práctico de Frontend Developer. Por supuesto, responderemos dudas generales de estas dos tecnologías: Flexbox y CSS Grid.
Antes de comenzar con este taller te invito a que leas el código de conducta de Platzi ya que es de vital importancia que en este taller seamos buenas personas, respetemos la diversidad y generemos una conversación positiva.
En este espacio hablaremos de la agenda para que tengamos un panorama más amplio de lo que veremos en este taller y también, responderemos algunas preguntas iniciales.
Guía de propiedades y valores: A Complete Guide to Flexbox por CSS Tricks
✨ Código interactivo aquí · Solo propiedad display y valor flex en el padre
✨ Código interactivo aquí · flex-grow: 1 en los ítems
✨ Código interactivo aquí · flex-grow: 1, flex-grow: 3 y flex-grow: 3 en los ítems
✨ Código interactivo aquí · flex-grow & flex-shrink
✨ Código interactivo aquí · flex-grow, flex-shrink & flex-basis: 50%
✨ Código interactivo aquí · flex-grow, flex-shrink & flex-basis: 100%
✨ Código interactivo aquí · flex: 1
En este espacio responderemos preguntas acerca de la propiedad flex antes de comenzar con la maquetación de la Card usando esta propiedad.
✨ Código interactivo aquí · Card con flex-grow
✨ Código interactivo aquí · Card + Feedback con flex: 1 & animation
En este espacio tendremos 5 minuticos de tiempo libre para despejarnos y volver con la segunda parte del taller.
Guía de propiedades y valores: A Complete Guide to CSS Grid por CSS Tricks
"auto-fill RELLENA la fila con tantas columnas como puedan caber. Por lo tanto, crea columnas implícitas cada vez que cabe una nueva columna, porque está tratando de LLENAR la fila con tantas columnas como sea posible. Las columnas recién agregadas pueden estar vacías, pero seguirán ocupando un espacio designado en la fila."
"auto-fit AJUSTA las columnas ACTUALMENTE DISPONIBLES en el espacio al expandirlas para que ocupen cualquier espacio disponible. El navegador hace eso después de LLENAR ese espacio adicional con columnas adicionales (como con auto-fill) y luego colapsar las vacías."
Explicación con ejemplos, aquí: Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit por Sara Soueidan
✨ Código interactivo aquí · Contenedor de cards con CSS Grid
En este espacio responderemos preguntas acerca de Flexbox y/o CSS Grid.
| CSS Grid Cheat Sheet: Contenedores (Parte 1) por @teffcode |
|---|
 |
| CSS Grid Cheat Sheet: Items (Parte 2) por @teffcode |
|---|
 |
| Tweet por @NikkiSiapno |
|---|
 |
| Tweet por @catalinmpit |
|---|
 |
| Tweet por @Prathkum |
|---|
 |
| A Practical Cheat Sheet for CSS Flexbox (Containers) por The Voracious Developer |
|---|
 |
Hemos llegado al final de este taller. Espero lo hayas disfrutado bastante. Luego de este taller, recibirás un correo con un pequeño formulario para que me dejes tu feedback y sugerencias de temas para próximos talleres.
Nos vemos pronto !
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent