├── README.md └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # ⭐️ Taller de Flexbox + CSS Grid con Teffcode ⭐️ 2 | 3 | ## 📝 Nuestra agenda: 4 | 5 | 1. `9:45 - 9:50` 👋🏼 [Llegada](#-llegada) 6 | 2. `9:50 - 9:55` 😄 [Bienvenida: Para quién es este taller y código de conducta](#-bienvenida-para-quién-es-este-taller-y-código-de-conducta) 7 | 3. `9:55 - 10:00` 👀 [Visión general del taller y preguntas iniciales](#-visión-general-del-taller-y-preguntas-iniciales) 8 | 4. `10:00 - 10:05` 🍡 [Repaso general de las propiedades básicas de Flexbox](#-repaso-general-de-las-propiedades-básicas-de-flexbox) 9 | 5. `10:05 - 10:10` 🌱 [Explicación teórica y práctica de la propiedad flex-grow](#-explicación-teórica-y-práctica-de-la-propiedad-flex-grow) 10 | 6. `10:10 - 10:15` 👖 [Explicación teórica y práctica de la propiedad flex-shrink](#-explicación-teórica-y-práctica-de-la-propiedad-flex-shrink) 11 | 7. `10:15 - 10:20` 📏 [Explicación teórica y práctica de la propiedad flex-basis](#-explicación-teórica-y-práctica-de-la-propiedad-flex-basis) 12 | 8. `10:20 - 10:25` 💥 [Explicación teórica y práctica de la propiedad flex](#-explicación-teórica-y-práctica-de-la-propiedad-flex) 13 | 9. `10:25 - 10:30` ❓ [Q&A](#-qa) 14 | 10. `10:30 - 10:40` 📇 [Maquetación de componente de Card usando la propiedad flex-grow](#-maquetación-de-componente-de-card-usando-la-propiedad-flex-grow) 15 | 11. `10:40 - 10:50` 👍🏼 [Maquetación de componente de Feedback usando la propiedad flex](#-maquetación-de-componente-de-feedback-usando-la-propiedad-flex) 16 | 12. `10:50 - 11:00` 🎮 [Kahoot](#-kahoot) 17 | 13. `11:00 - 11:05` 🥪 [Break time](#-break-time) 18 | 14. `11:05 - 11:10` 🍱 [Repaso general de propiedades básicas de CSS Grid](#-repaso-general-de-propiedades-básicas-de-css-grid) 19 | 15. `11:10 - 11:15` 🩲 [Explicación teórica y práctica del valor auto-fit y auto-fill](#-explicación-teórica-y-práctica-del-valor-auto-fit-y-auto-fill) 20 | 16. `11:15 - 11:25` 📦 [Maquetación de container de Cards usando CSS Grid](#-maquetación-de-container-de-cards-usando-css-grid) 21 | 17. `11:25 - 11:35` 🧐 [Actividad: ¿Qué usarías: Flexbox o CSS Grid?](#-actividad-qué-usarías-flexbox-o-css-grid) 22 | 18. `11:35 - 11:40` ❓ [Q&A](#-qa-1) 23 | 19. `11:40 - 11:41` 📄 [Documentación recomendada](#-documentación-recomendada) 24 | 20. `11:41 - 11:42` 🤓 [Mis cursos recomendados](#-mis-cursos-recomendados) 25 | 21. `11:42 - 11:43` 🔗 [Cheat Sheets](#-cheat-sheets) 26 | 22. `11:43 - 11:45` 😫 [Despedida](#-despedida) 27 | 28 | ## 👋🏼 Llegada 29 | 30 | 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. 31 | 32 | ↑ [Volver a la agenda](#-nuestra-agenda) 33 | 34 | ## 😄 Bienvenida: Para quién es este taller y código de conducta 35 | 36 | 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. 37 | 38 | Los requerimientos para este taller son: 39 | * Conocimientos básicos en CSS 40 | * Conocimientos generales de qué es y cómo funciona Flexbox 41 | * Conocimientos generales de qué es y cómo funciona CSS Grid 42 | 43 | Por esta razón, este taller está dirigido a estudiantes de Platzi que completaron el [Curso de Frontend Developer](https://platzi.com/cursos/frontend-developer/) y/o el [Curso Práctico de Frontend Developer](https://platzi.com/cursos/frontend-developer-practico/). Por supuesto, responderemos dudas generales de estas dos tecnologías: Flexbox y CSS Grid. 44 | 45 | Antes de comenzar con este taller te invito a que leas el [código de conducta de Platzi](https://platzi.com/blog/codigo-conducta-platzi/) ya que es de vital importancia que en este taller seamos buenas personas, respetemos la diversidad y generemos una conversación positiva. 46 | 47 | ↑ [Volver a la agenda](#-nuestra-agenda) 48 | 49 | ## 👀 Visión general del taller y preguntas iniciales 50 | 51 | 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. 52 | 53 | ↑ [Volver a la agenda](#-nuestra-agenda) 54 | 55 | ## 🍡 Repaso general de las propiedades básicas de Flexbox 56 | 57 | Guía de propiedades y valores: [A Complete Guide to Flexbox por CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 58 | 59 | ↑ [Volver a la agenda](#-nuestra-agenda) 60 | 61 | ## 🌱 Explicación teórica y práctica de la propiedad flex-grow 62 | 63 | ![1](https://user-images.githubusercontent.com/25943655/215044531-012e4aab-4016-4a3d-b061-11decb4a41fc.png) 64 | 65 | ✨ [Código interactivo aquí · Solo propiedad display y valor flex en el padre](https://codepen.io/teffcode/pen/jOpzOba) 66 | 67 | ![2](https://user-images.githubusercontent.com/25943655/215044008-acf84dd4-a946-419a-80aa-1a8a43008d71.png) 68 | 69 | ✨ [Código interactivo aquí · flex-grow: 1 en los ítems](https://codepen.io/teffcode/pen/yLqKRaJ) 70 | 71 | ![3](https://user-images.githubusercontent.com/25943655/215046467-3da09da0-7955-475e-942f-9e9ef5d6a028.png) 72 | 73 | ✨ [Código interactivo aquí · flex-grow: 1, flex-grow: 3 y flex-grow: 3 en los ítems](https://codepen.io/teffcode/pen/VwBXEPG) 74 | 75 | ↑ [Volver a la agenda](#-nuestra-agenda) 76 | 77 | ## 👖 Explicación teórica y práctica de la propiedad flex-shrink 78 | 79 | ![4](https://user-images.githubusercontent.com/25943655/215048914-5be723e3-b7b1-427a-91a0-40c6d8e86810.png) 80 | 81 | ✨ [Código interactivo aquí · flex-grow & flex-shrink](https://codepen.io/teffcode/pen/vYaRVxQ) 82 | 83 | ↑ [Volver a la agenda](#-nuestra-agenda) 84 | 85 | ## 📏 Explicación teórica y práctica de la propiedad flex-basis 86 | 87 | ![5](https://user-images.githubusercontent.com/25943655/215050771-5f1e55e2-1fd0-4e44-aaf8-90650cb576df.png) 88 | 89 | ✨ [Código interactivo aquí · flex-grow, flex-shrink & flex-basis: 50%](https://codepen.io/teffcode/pen/yLqKREM) 90 | 91 | ✨ [Código interactivo aquí · flex-grow, flex-shrink & flex-basis: 100%](https://codepen.io/teffcode/pen/BaPrqON) 92 | 93 | ↑ [Volver a la agenda](#-nuestra-agenda) 94 | 95 | ## 💥 Explicación teórica y práctica de la propiedad flex 96 | 97 | ![6](https://user-images.githubusercontent.com/25943655/215052565-d94b44e3-182b-464b-b9a9-9f3bf10d6e8d.png) 98 | 99 | ✨ [Código interactivo aquí · flex: 1](https://codepen.io/teffcode/pen/oNMqaPQ) 100 | 101 | ↑ [Volver a la agenda](#-nuestra-agenda) 102 | 103 | ## ❓ Q&A 104 | 105 | En este espacio responderemos preguntas acerca de la propiedad `flex` antes de comenzar con la maquetación de la Card usando esta propiedad. 106 | 107 | ↑ [Volver a la agenda](#-nuestra-agenda) 108 | 109 | ## 📇 Maquetación de componente de Card usando la propiedad flex-grow 110 | 111 | ![7](https://user-images.githubusercontent.com/25943655/215053228-8b67d4ad-9de6-4a9e-a823-6f2b1729564e.png) 112 | 113 | ✨ [Código interactivo aquí · Card con flex-grow](https://codepen.io/teffcode/pen/WNKzaVR) 114 | 115 | ↑ [Volver a la agenda](#-nuestra-agenda) 116 | 117 | ## 👍🏼 Maquetación de componente de Feedback usando la propiedad flex] 118 | 119 | ![8](https://user-images.githubusercontent.com/25943655/215053787-d4329ee3-7a21-4c63-9282-2db862f601f9.png) 120 | 121 | ✨ [Código interactivo aquí · Card + Feedback con flex: 1 & animation](https://codepen.io/teffcode/pen/wvxmQYr) 122 | 123 | ↑ [Volver a la agenda](#-nuestra-agenda) 124 | 125 | ## 🎮 Kahoot 126 | 127 | ↑ [Volver a la agenda](#-nuestra-agenda) 128 | 129 | ## 🥪 Break time 130 | 131 | En este espacio tendremos 5 minuticos de tiempo libre para despejarnos y volver con la segunda parte del taller. 132 | 133 | ↑ [Volver a la agenda](#-nuestra-agenda) 134 | 135 | ## 🍱 Repaso general de propiedades básicas de CSS Grid 136 | 137 | Guía de propiedades y valores: [A Complete Guide to CSS Grid por CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) 138 | 139 | ↑ [Volver a la agenda](#-nuestra-agenda) 140 | 141 | ## 🩲 Explicación teórica y práctica del valor auto-fit y auto-fill 142 | 143 | *"`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."* 144 | 145 | *"`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."* 146 | 147 | Explicación con ejemplos, aquí: [Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` por Sara Soueidan](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/) 148 | 149 | ↑ [Volver a la agenda](#-nuestra-agenda) 150 | 151 | ## 📦 Maquetación de container de Cards usando CSS Grid 152 | 153 | ![9](https://user-images.githubusercontent.com/25943655/215055170-4a077ee4-2bc5-4bda-9858-ebd46e58b004.png) 154 | 155 | ✨ [Código interactivo aquí · Contenedor de cards con CSS Grid](https://codepen.io/teffcode/pen/KKBRqpm) 156 | 157 | ↑ [Volver a la agenda](#-nuestra-agenda) 158 | 159 | ## 🧐 Actividad: ¿Qué usarías: Flexbox o CSS Grid? 160 | 161 | ↑ [Volver a la agenda](#-nuestra-agenda) 162 | 163 | ## ❓ Q&A 164 | 165 | En este espacio responderemos preguntas acerca de Flexbox y/o CSS Grid. 166 | 167 | ↑ [Volver a la agenda](#-nuestra-agenda) 168 | 169 | ## 📄 Documentación recomendada 170 | 171 | * [A Complete Guide to Flexbox por CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 172 | 173 | * [A Complete Guide to CSS Grid por CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) 174 | 175 | * [Artículo: Profundizando en la propiedad Flex de Ahmad Shadeed](https://ishadeed.com/article/css-flex-property/) 176 | 177 | * [Conceptos de Flexbox por Samantha Ming](https://www.samanthaming.com/flexbox30/) 178 | 179 | ↑ [Volver a la agenda](#-nuestra-agenda) 180 | 181 | ## 🤓 Mis cursos recomendados 182 | 183 | * [Curso de Frontend Developer](https://platzi.com/cursos/frontend-developer/) 184 | 185 | * [Curso Práctico de Frontend Developer](https://platzi.com/cursos/frontend-developer-practico/) 186 | 187 | * [Curso Práctico de Maquetación y Animaciones con CSS](https://platzi.com/cursos/animaciones-css-practico/) 188 | 189 | * [Curso Profesional de CSS Grid Layout](https://platzi.com/cursos/css-grid-layout/) 190 | 191 | * [Curso de Diseño Web con CSS Grid y Flexbox](https://platzi.com/cursos/flexbox-css-grid/) 192 | 193 | ↑ [Volver a la agenda](#-nuestra-agenda) 194 | 195 | ## 🔗 Cheat Sheets 196 | 197 | | [CSS Grid Cheat Sheet: Contenedores (Parte 1) por @teffcode](https://platzi.com/blog/css-grid-cheat-sheet-contenedores/) | 198 | |--| 199 | | | 200 | 201 | 202 | | [CSS Grid Cheat Sheet: Items (Parte 2) por @teffcode](https://platzi.com/blog/css-grid-cheat-sheet-items/) | 203 | |--| 204 | | | 205 | 206 | | [Tweet por @NikkiSiapno](https://twitter.com/NikkiSiapno/status/1554429773866307586?s=20&t=j6f55r4bPZWHj2C1pNdm-Q) | 207 | |--| 208 | | | 209 | 210 | | [Tweet por @catalinmpit](https://twitter.com/catalinmpit/status/1492894277172670468?s=20&t=j6f55r4bPZWHj2C1pNdm-Q) | 211 | |--| 212 | | | 213 | 214 | | [Tweet por @Prathkum](https://twitter.com/Prathkum/status/1378726463013187584?s=20&t=j6f55r4bPZWHj2C1pNdm-Q) | 215 | |--| 216 | | | 217 | 218 | | [A Practical Cheat Sheet for CSS Flexbox (Containers) por The Voracious Developer](https://voracious.dev/blog/a-practical-cheat-sheet-for-css-flexbox) | 219 | |--| 220 | | | 221 | 222 | ↑ [Volver a la agenda](#-nuestra-agenda) 223 | 224 | ## 😫 Despedida 225 | 226 | 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. 227 | 228 | Nos vemos pronto ! 229 | 230 | ↑ [Volver a la agenda](#-nuestra-agenda) 231 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 50 | 51 | 52 |
53 |

Flexbox

54 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tenetur ipsum fugit deleniti dolor alias nulla! Nulla nisi excepturi iste ipsa sapiente tenetur labore eligendi exercitationem dolorum harum, vel voluptas.

55 | 56 |
57 |
58 |
👍🏼
59 |
👎🏼
60 |
61 | 62 | 63 | --------------------------------------------------------------------------------