└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | 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 🤫).
4 |
5 | > Para comenzar, solo queremos recordarte que este contenido es exclusivo de Platzi 🎉
6 |
7 | 1. [Curso de CSS Grid](#curso-de-css-grid-)
8 | 2. [Curso de Diseño Web con CSS Grid y Flexbox](#curso-de-diseño-web-con-css-grid-y-flexbox-)
9 |
10 | # Curso de CSS Grid 💚
11 |
12 | 1. [Tips para que lleves tus conocimientos de CSS a otro nivel + Quices](#1-tips-para-que-lleves-tus-conocimientos-de-CSS-a-otro-nivel--quices)
13 | 2. [¿Cómo fue pensado CSS cuando se creó?](#2-cómo-fue-pensado-css-cuando-se-creó)
14 | 3. [Limitaciones de CSS y el problema de los elementos flotantes](#3-limitaciones-de-css-y-el-problema-de-los-elementos-flotantes)
15 | 4. [Herramientas que nos han facilitado el camino](#4-herramientas-que-nos-han-facilitado-el-camino)
16 | 5. [¿CSS Grid es una idea nueva? La evolución de la especificación](#5-css-grid-es-una-idea-nueva-la-evolución-de-la-especificación)
17 | 6. [¿Qué significa Grid para CSS?](#6-qué-significa-grid-para-css)
18 | 7. [Técnicas de alineamiento antes de CSS Grid (Parte 1)](#7-técnicas-de-alineamiento-antes-de-css-grid-parte-1)
19 | 8. [Técnicas de alineamiento antes de CSS Grid (Parte 2)](#8-técnicas-de-alineamiento-antes-de-css-grid-parte-2)
20 | 9. [Pros y contras de las técnicas de alineamiento antes de CSS Grid](#9-pros-y-contras-de-las-técnicas-de-alineamiento-antes-de-css-grid)
21 | 10. [Modos de escritura y ejes de alineamiento + Reto](#10-modos-de-escritura-y-ejes-de-alineamiento--reto)
22 | 11. [Propiedades físicas y lógicas en CSS + Quíz](#11-propiedades-físicas-y-lógicas-en-css--quíz)
23 | 12. [Técnicas de alineamiento con Flexbox](#12-técnicas-de-alineamiento-con-flexbox)
24 | 13. [Dibujemos con CSS + Reto](#13-dibujemos-con-css--reto)
25 | 14. [Grid y las relaciones padre e hijos inmediatos + Quíz](#14-grid-y-las-relaciones-padre-e-hijos-inmediatos--quíz)
26 | 15. [Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto](#15-lines-tracks-cell-area-gutters-grid-axis-grid-row-grid-column-reto)
27 | 16. [¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos](#16-iniciemos-nuestro-proyecto-fase-de-creatividad-e-identificación-de-elementos)
28 | 17. [Creando nuestro contenedor: ¿display: grid o display: inline-grid?](#17-creando-nuestro-contenedor-display-grid-o-display-inline-grid)
29 | 18. [Creando filas, columnas y espaciado + Reto](#18-creando-filas-columnas-y-espaciado--reto)
30 | 19. [Alineamiento + Quíz](#19-alineamiento--quíz)
31 | 20. [Generación automática de tracks + Quíz](#20-generación-automática-de-tracks--quíz)
32 | 21. [Funciones: repeat(), minmax() y fit-content() + Quíz](#21-funciones-repeat-minmax-y-fit-content--quíz)
33 | 22. [¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto](#22-manos-al-código-fase-de-construcción-de-la-grid-principal-de-nuestro-proyecto)
34 | 23. [Ubicación + Reto](#23-ubicación--reto)
35 | 24. [Alineamiento + Quíz](#24-alineamiento--quíz)
36 | 25. [¡Manos al código! Fase de ubicación y alineamiento (Parte 1)](#25-manos-al-código-fase-de-ubicación-y-alineamiento-parte-1))
37 | 26. [¡Manos al código! Fase de ubicación y alineamiento (Parte 2)](#26-manos-al-código-fase-de-ubicación-y-alineamiento-parte-2)
38 | 27. [Diseño responsivo sin media queries + Reto](#27-diseño-responsivo-sin-media-queries--reto)
39 | 28. [¿Vendrá algo más para esta especificación?](#28-vendrá-algo-más-para-esta-especificación)
40 |
41 | ## Apuntes de estudiantes 😍
42 |
43 | * Harrinson Quintero 👉🏼 [Sus notas](https://www.notion.so/Notas-Curso-de-CSS-Grid-Layout-aab64c07f7bf41ce88a93ac6178f69f5) y [su Twitter](https://twitter.com/Jhaqual)
44 |
45 | ## 1. Tips para que lleves tus conocimientos de CSS a otro nivel + Quices
46 |
47 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQFfekgdU/0jutcPgG2ibsiVm_JON5yg/view?utm_content=DAEQFfekgdU&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
48 |
49 |
50 | Haz click aquí para ver la documentación de esta clase 👀
51 |
52 |
53 |
54 | * [Guía para aprender CSS](https://www.smashingmagazine.com/2019/01/how-to-learn-css/)
55 | * [Quíces de JS y CSS para que repases conceptos](https://gist.github.com/teffcode)
56 | * [Qué es Platzi Master](https://platzi.com/blog/que-es-platzi-master/)
57 |
58 |
59 | **Cursos Recomendados:**
60 |
61 | * [Curso de Frontend Developer](https://platzi.com/clases/frontend-developer/)
62 | * [Curso Definitivo de HTML y CSS](https://platzi.com/clases/html-css/)
63 |
64 | **Apuntes de la clase:**
65 |
66 | 
67 |
68 |
69 | ## 2. ¿Cómo fue pensado CSS cuando se creó?
70 |
71 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQE_Q6irY/D-8q5MwKUdXQxdFsaCoNjg/view?utm_content=DAEQE_Q6irY&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
72 |
73 |
74 | Haz click aquí para ver la documentación de esta clase 👀
75 |
76 |
77 |
78 | **Apuntes de la clase:**
79 |
80 |
81 | 
82 | 
83 | 
84 | 
85 |
86 |
87 | ## 3. Limitaciones de CSS y el problema de los elementos flotantes
88 |
89 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQKtu0pgw/0_OUYnbKV5OCsD7Tek97bw/view?utm_content=DAEQKtu0pgw&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
90 |
91 |
92 | Haz click aquí para ver la documentación de esta clase 👀
93 |
94 |
95 |
96 | * [The Noodle incident](https://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
97 | * [Columnas Falsas](https://alistapart.com/article/fauxcolumns/)
98 | * [Propuesta de Responsive Design](https://alistapart.com/article/responsive-web-design/)
99 | * [Código de las cards flotantes](https://github.com/abookapart/new-css-layout-code/blob/master/chapter1/float3.html)
100 |
101 | **Apuntes de la clase:**
102 |
103 | 
104 | 
105 | 
106 | 
107 | 
108 |
109 |
110 | ## 4. Herramientas que nos han facilitado el camino
111 |
112 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQFDCuuD8/fLp8L0dB1yRslr8m3pMPMA/view?utm_content=DAEQFDCuuD8&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
113 |
114 |
115 | Haz click aquí para ver la documentación de esta clase 👀
116 |
117 |
118 |
119 | **Apuntes de la clase:**
120 |
121 | 
122 | 
123 | 
124 | 
125 | 
126 |
127 |
128 | ## 5. ¿CSS Grid es una idea nueva? La evolución de la especificación
129 |
130 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQN8YEp4w/v1Z88OOvAodndxddKS4BBQ/view?utm_content=DAEQN8YEp4w&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
131 |
132 |
133 | Haz click aquí para ver la documentación de esta clase 👀
134 |
135 |
136 |
137 | * [A brief history of CSS until 2016](https://www.w3.org/Style/CSS20/history.html)
138 | * [CSS Advanced Layout Module (2007)](https://www.w3.org/TR/2007/WD-css3-layout-20070809/)
139 | * [Giving Content Priority with CSS3 Grid Layout (By Rachel Andrew in 2012)](https://24ways.org/2012/css3-grid-layout/)
140 | * [Establishing Web Standards](https://medium.com/net-magazine/establishing-web-standards-12f7f4308982)
141 |
142 | **Apuntes de la clase:**
143 |
144 | 
145 |
146 |
147 | ## 6. ¿Qué significa Grid para CSS?
148 |
149 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQOVE8yQU/-irgEI-4MpOp4FHYqJmlZg/view?utm_content=DAEQOVE8yQU&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
150 |
151 |
152 | Haz click aquí para ver la documentación de esta clase 👀
153 |
154 |
155 |
156 | * [The Story of CSS Grid, from Its Creators](t.ly/lph3)
157 |
158 |
159 | ## 7. Técnicas de alineamiento antes de CSS Grid (Parte 1)
160 |
161 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPvl0m0Zs/o4ZuT2i7lVDw3QX1yLpDUg/view?utm_content=DAEPvl0m0Zs&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
162 |
163 |
164 | Haz click aquí para ver la documentación de esta clase 👀
165 |
166 |
167 |
168 | **Documentación:**
169 |
170 | * [Alinear elementos de bloque en CSS3 (2016)](https://www.wextensible.com/temas/css3-alinear/block.html)
171 |
172 | **Código:**
173 |
174 | * [Alignment techniques · margin · initial](https://codepen.io/teffcode_/pen/YzGNOgQ)
175 | * [Alignment techniques · margin · final](https://codepen.io/teffcode_/pen/oNzBPVB)
176 | * [Alignment techniques · line-height · initial](https://codepen.io/teffcode_/pen/JjREaVK?editors=1100)
177 | * [Alignment techniques · line-height · final](https://codepen.io/teffcode_/pen/ExgZeJV?editors=1100)
178 |
179 | **Apuntes de la clase:**
180 |
181 | 
182 | 
183 |
184 |
185 | ## 8. Técnicas de alineamiento antes de CSS Grid (Parte 2)
186 |
187 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPv-8YXhU/f-h1db2rteK-JrSBlWQCmQ/view?utm_content=DAEPv-8YXhU&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
188 |
189 |
190 | Haz click aquí para ver la documentación de esta clase 👀
191 |
192 |
193 |
194 | **Documentación:**
195 |
196 | * [Alinear elementos de bloque en CSS3 (2016)](https://www.wextensible.com/temas/css3-alinear/block.html)
197 | * [A Complete Guide to the Table Element](https://css-tricks.com/complete-guide-table-element/)
198 |
199 | **Código:**
200 |
201 | * [Alignment techniques · table-cell · initial](https://codepen.io/teffcode_/pen/MWjJqdM?editors=1100)
202 | * [Alignment techniques · table-cell · final](https://codepen.io/teffcode_/pen/oNzBPRB)
203 | * [Alignment techniques · positions · initial](https://codepen.io/teffcode_/pen/bGwgxXm)
204 | * [Alignment techniques · positions · final](https://codepen.io/teffcode_/pen/gOwgdVe?editors=1100)
205 |
206 | **Apuntes de la clase:**
207 |
208 | 
209 | 
210 |
211 |
212 | ## 9. Pros y contras de las técnicas de alineamiento antes de CSS Grid
213 |
214 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPx_rxzag/bZs1WSOkdrs4i9brspUiTA/view?utm_content=DAEPx_rxzag&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
215 |
216 |
217 | Haz click aquí para ver la documentación de esta clase 👀
218 |
219 |
220 |
221 | * [Alinear elementos de bloque en CSS3 (2016)](https://www.wextensible.com/temas/css3-alinear/block.html)
222 |
223 |
224 | ## 10. Modos de escritura y ejes de alineamiento + Reto
225 |
226 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPwdLmsWI/GfZVmQN4tivhrfzEMRSjkw/view?utm_content=DAEPwdLmsWI&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
227 |
228 |
229 | Haz click aquí para ver la documentación de esta clase 👀
230 |
231 |
232 |
233 | * [CSS Writing Modes (By Jen Simmons in 2016)](https://24ways.org/2016/css-writing-modes/)
234 |
235 | **Reto:**
236 |
237 | * [Modos de escritura](https://codepen.io/teffcode_/pen/YzGZGNw?editors=1100)
238 |
239 | **Documentación en español para el reto:**
240 |
241 | * [Propiedad direction](https://developer.mozilla.org/es/docs/Web/CSS/direction)
242 | * [Propiedad writing-mode](https://developer.mozilla.org/es/docs/Web/CSS/writing-mode)
243 |
244 | > Recuerda mostrarnos en los comentarios cualquier cosita que hagas :D Así, todos podemos aprender de todos !
245 |
246 |
247 | ## 11. Propiedades físicas y lógicas en CSS + Quíz
248 |
249 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPwadrvmg/ldmhPG0L9qzRRhjTaYO9KQ/view?utm_content=DAEPwadrvmg&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
250 |
251 |
252 | Haz click aquí para ver la documentación de esta clase 👀
253 |
254 |
255 |
256 | * [CSS Logical Properties (by Estefany Aguilar in 2019)](https://ultimatecourses.com/blog/css-logical-properties)
257 | * [Quíz de la clase](https://gist.github.com/teffcode/a693b0ffc907c7b0745d0f9d7d711cfd)
258 |
259 |
260 | ## 12. Técnicas de alineamiento con Flexbox
261 |
262 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPwlhbCcE/TI_WagM_hIe6RoURIJOJeA/view?utm_content=DAEPwlhbCcE&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
263 |
264 |
265 | Haz click aquí para ver la documentación de esta clase 👀
266 |
267 |
268 |
269 | **Documentación:**
270 |
271 | [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
272 |
273 | **Código:**
274 |
275 | * [Alignment techniques · Flexbox · inital](https://codepen.io/teffcode_/pen/mdrRzJX?editors=1100)
276 | * [Alignment techniques · Flexbox · final](https://codepen.io/teffcode_/pen/dypNgoR)
277 |
278 | **Apuntes de la clase:**
279 |
280 | 
281 |
282 |
283 | ## 13. Dibujemos con CSS + Reto
284 |
285 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPwqvMuoM/HEntrkxBUyi9yl8ALkuiNQ/view?utm_content=DAEPwqvMuoM&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
286 |
287 |
288 | Haz click aquí para ver la documentación de esta clase 👀
289 |
290 |
291 |
292 | **Inspiración:**
293 |
294 | * [A single div](https://a.singlediv.com/)
295 | * [No tengas miedo a dibujar con CSS](https://dev.to/raulmar/no-tengas-miedo-a-dibujar-con-css-1ck)
296 | * [dotCSS 2016 - Wenting Zhang - Make CSS your secret super drawing tool](https://www.youtube.com/watch?v=Y0_FMCji3iE&ab_channel=dotconferences)
297 |
298 | **Código:**
299 |
300 | * [Ilustración utilizada](https://gigantic.store/gigantic-flat-design-illustration-bundle-2/)
301 | * [Dibujemos con CSS · final](https://codepen.io/teffcode_/pen/YzGNJyE)
302 |
303 | **Reto:**
304 |
305 | * [Dibujarte CSS · Sitio Web](https://dibujartecss.musarte.dev/)
306 | * [Dibujarte CSS · Repo para que puedas hacer PR con tu dibujito](https://github.com/musartedev/dibujarte-css)
307 |
308 | > No se te olvide compartir en los comentarios tu dibujo !!!
309 |
310 |
311 | ## 14. Grid y las relaciones padre e hijos inmediatos + Quíz
312 |
313 | **Slides:** [Click aquí](https://www.canva.com/design/DAEW0j7Iqqk/4wH6BM4jurjRl9rba-spuQ/view?utm_content=DAEW0j7Iqqk&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
314 |
315 |
316 | Haz click aquí para ver la documentación de esta clase 👀
317 |
318 |
319 |
320 | * [A simple visual cheatsheet for CSS Grid Layout](https://grid.malven.co/)
321 | * [Solución del quíz](https://codepen.io/teffcode_/pen/BaLWLOJ?editors=1000)
322 |
323 |
324 | ## 15. Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
325 |
326 | **Slides:** [Click aquí](https://www.canva.com/design/DAEW0pSs00Q/MnL5x4rrSaC7U5F_-1fWQQ/view?utm_content=DAEW0pSs00Q&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
327 |
328 |
329 | Haz click aquí para ver la documentación de esta clase 👀
330 |
331 |
332 |
333 |
334 | ## 16. ¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
335 |
336 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQWdX-R6U/UNyZt4I2GoerlNT43617rA/watch?utm_content=DAEQWdX-R6U&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
337 |
338 |
339 | Haz click aquí para ver la documentación de esta clase 👀
340 |
341 |
342 |
343 | **Inspiración:**
344 |
345 | * [Deconstruction Poster Design Collection](https://www.zekagraphic.com/portfolio/deconstruction/)
346 | * [3 ways to experiment with latest UI trend—asymmetrical grids & layouts](https://dribbble.com/stories/2020/02/05/asymmetrical-layouts-ui-design?utm_campaign=2020-02-18&utm_medium=email&utm_source=courtside-20200218)
347 | * [Cure unique nail wax boutique](https://www.awwwards.com/sites/cure-unique-nail-wax-boutique)
348 |
349 | **Imágenes Gratis:**
350 |
351 | * [Pexels](https://www.pexels.com/)
352 | * [Pixabay](https://pixabay.com/es/)
353 | * [Freepik](https://www.freepik.es/fotos-populares)
354 |
355 | **Fuentes:**
356 |
357 | * [Google Fonts](https://fonts.google.com/)
358 |
359 | **Colores:**
360 |
361 | * [Color Hunt](https://colorhunt.co/)
362 | * [My Color Space](https://mycolor.space/gradient?ori=to+top&hex=%23051937&hex2=%23A8EB12&sub=1)
363 | * [HTML Color Codes](https://htmlcolorcodes.com/color-names/)
364 |
365 |
366 | ## 17. Creando nuestro contenedor: ¿display: grid o display: inline-grid?
367 |
368 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPfFLZaPQ/KCwKnf-IVl5Rinrh1eGSCA/view?utm_content=DAEPfFLZaPQ&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
369 |
370 |
371 | Haz click aquí para ver la documentación de esta clase 👀
372 |
373 |
374 |
375 | * [Digging Into The Display Property: The Two Values Of Display](https://www.smashingmagazine.com/2019/04/display-two-value/)
376 |
377 |
378 | ## 18. Creando filas, columnas y espaciado + Reto
379 |
380 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPC3ca3BQ/Dldv9zjYSIE0LBb-BzEQng/view?utm_content=DAEPC3ca3BQ&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
381 |
382 |
383 | Haz click aquí para ver la documentación de esta clase 👀
384 |
385 |
386 |
387 | **Código:**
388 |
389 | * [Creación de filas y columnas](https://codepen.io/teffcode_/pen/mdrJqGg)
390 |
391 |
392 | ## 19. Alineamiento + Quíz
393 |
394 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPfCLFLTM/wthWMlp0-8TWRlSbb_hhlg/watch?utm_content=DAEPfCLFLTM&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
395 |
396 |
397 | Haz click aquí para ver la documentación de esta clase 👀
398 |
399 |
400 |
401 | **Documentación:**
402 |
403 | * [CSS Grid: Justification and Alignment](https://www.digitalocean.com/community/tutorials/css-align-justify)
404 |
405 | **Código:**
406 |
407 | * [Alineamiento](https://codepen.io/teffcode_/pen/RwGaZoe)
408 |
409 |
410 | ## 20. Generación automática de tracks + Quíz
411 |
412 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPfzybVv4/CpeBRCEEO0stZ8Ivj1Ovfg/view?utm_content=DAEPfzybVv4&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
413 |
414 |
415 | Haz click aquí para ver la documentación de esta clase 👀
416 |
417 |
418 |
419 | * [The Difference Between Explicit and Implicit Grids](https://css-tricks.com/difference-explicit-implicit-grids/)
420 |
421 | **Fuente de los diseños mostrados en la clase:**
422 |
423 | * [Una nueva imagen para la Ópera de Saint Etienne](https://brandemia.org/una-nueva-imagen-para-la-opera-de-saint-etienne)
424 | * [Sceumorphic UI](https://dribbble.com/shots/10856261-Sceumorphic-UI)
425 |
426 |
427 | ## 21. Funciones: repeat(), minmax() y fit-content() + Quíz
428 |
429 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPgUjpekM/vSqGiNbCVGEsz-X1Wu2uxw/view?utm_content=DAEPgUjpekM&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
430 |
431 |
432 | Haz click aquí para ver la documentación de esta clase 👀
433 |
434 |
435 |
436 | **Documentación:**
437 |
438 | * [Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/)
439 | * [A Deep Dive Into CSS Grid minmax()](https://ishadeed.com/article/css-grid-minmax/)
440 |
441 | **Código:**
442 |
443 | * [minmax()](https://codepen.io/teffcode_/pen/dypMVQo?editors=1100)
444 |
445 |
446 | ## 22. ¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
447 |
448 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPhfyIeP0/eeIEaOeZkFHP3osqh69P3g/view?utm_content=DAEPhfyIeP0&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
449 |
450 |
451 | Haz click aquí para ver la documentación de esta clase 👀
452 |
453 |
454 |
455 | * [Código](https://codepen.io/teffcode_/pen/BaLWgEj?editors=1100)
456 |
457 | **Apuntes de la clase:**
458 |
459 | 
460 |
461 |
462 | ## 23. Ubicación + Reto
463 |
464 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPg4rXU0g/Dsqsl-wmfJYpnJD--BUNsQ/view?utm_content=DAEPg4rXU0g&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
465 |
466 |
467 | Haz click aquí para ver la documentación de esta clase 👀
468 |
469 |
470 |
471 | **Fuente del diseño mostrado en la clase:**
472 |
473 | * [Photo social app, continuation of previous style](https://dribbble.com/shots/7050067-Photo-social-app-continuation-of-previous-style?utm_source=pinterest&utm_campaign=pinterest_shot&utm_content=Photo+social+app%2C+continuation+of+previous+style&utm_medium=Social_Share)
474 |
475 |
476 | ## 24. Alineamiento + Quíz
477 |
478 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPhN3s25E/dGrYaKR7Sbeyak9YhutA7A/view?utm_content=DAEPhN3s25E&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
479 |
480 |
481 | Haz click aquí para ver la documentación de esta clase 👀
482 |
483 |
484 |
485 | **Código:**
486 |
487 | * [Ubicación](https://codepen.io/teffcode_/pen/vYXGWNg?editors=1100)
488 |
489 |
490 | ## 25. ¡Manos al código! Fase de ubicación y alineamiento (Parte 1)
491 |
492 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPhfyIeP0/eeIEaOeZkFHP3osqh69P3g/view?utm_content=DAEPhfyIeP0&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
493 |
494 |
495 | Haz click aquí para ver la documentación de esta clase 👀
496 |
497 |
498 |
499 | * [Código](https://codepen.io/teffcode_/pen/poEeXmr)
500 |
501 | **Apuntes de la clase:**
502 |
503 | 
504 |
505 |
506 | ## 26. ¡Manos al código! Fase de ubicación y alineamiento (Parte 2)
507 |
508 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPhfyIeP0/eeIEaOeZkFHP3osqh69P3g/view?utm_content=DAEPhfyIeP0&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
509 |
510 |
511 | Haz click aquí para ver la documentación de esta clase 👀
512 |
513 |
514 |
515 | * [Código para iniciar](https://codepen.io/teffcode_/pen/XWjMLwq?editors=1100)
516 | * [Código final](https://codepen.io/teffcode_/pen/yLabgPV?editors=1100)
517 |
518 | **Apuntes de la clase:**
519 |
520 | 
521 |
522 |
523 | ## 27. Diseño responsivo sin media queries + Reto
524 |
525 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQblSFlg0/fee3yNTklUUEH9TZdYL9aA/watch?utm_content=DAEQblSFlg0&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
526 |
527 |
528 | Haz click aquí para ver la documentación de esta clase 👀
529 |
530 |
531 |
532 | * [Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/)
533 | * [Ejemplo de Sara Soueidan con auto-fill y auto-fill](https://codepen.io/SaraSoueidan/pen/JrLdBQ?editors=1100)
534 | * [Ejemplo de Jen Simmons usando auto-fit (inspecciona el elemento main)](https://labs.jensimmons.com/2016/examples/spices-1.html)
535 |
536 |
537 | ## 28. ¿Vendrá algo más para esta especificación?
538 |
539 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQcFeFq8M/r5Y96ODgGbsnDoYPtJ--4Q/view?utm_content=DAEQcFeFq8M&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
540 |
541 |
542 | Haz click aquí para ver la documentación de esta clase 👀
543 |
544 |
545 |
546 | * [A book apart](https://abookapart.com/)
547 |
548 |
549 |
550 | # Curso de Diseño Web con CSS Grid y Flexbox 💚
551 |
552 | 1. [Todo sobre el diseño de páginas web acaba de cambiar](#1-todo-sobre-el-diseño-de-páginas-web-acaba-de-cambiar)
553 | 2. [La importancia de recordar las herramientas existentes](#2-la-importancia-de-recordar-las-herramientas-existentes)
554 | 3. [Flujo normal del documento: Display block, inline e inline-block](#3-flujo-normal-del-documento-display-block-inline-e-inline-block)
555 | 4. [Contextos de formato: Formato de Contexto de Bloque (BFC)](#4-contextos-de-formato-formato-de-contexto-de-bloque-bfc)
556 | 5. [Posicionamiento + Dinámica: ¿Cómo se vería?](#5-posicionamiento--dinámica-cómo-se-vería)
557 | 6. [Diferencias entre Flexbox y CSS Grid](#7-diferencias-entre-flexbox-y-css-grid)
558 | 7. [Similitudes entre Flexbox y CSS Grid](#8-similitudes-entre-flexbox-y-css-grid)
559 | 8. [¿Puedo trabajar con Flexbox y CSS Grid al tiempo?](#9-puedo-trabajar-con-flexbox-y-css-grid-al-tiempo)
560 | 9. [Dinámica: ¿Qué usarías? (Parte 1)](#10-dinámica-qué-usarías-parte-1)
561 | 10. [Dinámica: ¿Qué usarías? (Parte 2) + Reto](#11-dinámica-qué-usarías-parte-2--reto)
562 | 11. [¿Cuándo usar Flexbox y cuándo usar CSS Grid?](#12-cuándo-usar-flexbox-y-cuándo-usar-css-grid)
563 | 12. [¿Qué son los Modern CSS Layouts?](#13-qué-son-los-modern-css-layouts)
564 | 13. [Patrones para usar como punto de partida](#14-patrones-para-usar-como-punto-de-partida)
565 | 14. [Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout](#15-layouts-super-centered-the-deconstructed-pancake-sidebar-says-pancake-stack-classic-holy-grail-layout)
566 | 15. [Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect](#16-layouts-12-span-grid-ram-repeat-auto-minmax-line-up-clamping-my-style-respect-for-aspect)
567 | 16. [Dinámica: No puedo dejar de ver](#17-dinámica-no-puedo-dejar-de-ver)
568 | 17. [Design System y detalles visuales a tener en cuenta](#18-design-system-y-detalles-visuales-a-tener-en-cuenta)
569 | 18. [Tendencias de diseño UI/UX: Fase de inspiración y creatividad](#19-tendencias-de-diseño-uiux-fase-de-inspiración-y-creatividad)
570 | 19. [Wireframes y comunicación visual simple, intuitiva y atractiva](#20-wireframes-y-comunicación-visual-simple-intuitiva-y-atractiva)
571 | 20. [Figma para devs: Auto Layout y Neumorphism (Parte 1)](#20-figma-para-devs-auto-layout-y-neumorphism-parte-1)
572 | 21. [Figma para devs: Auto Layout y Neumorphism (Parte 2)](#21-figma-para-devs-auto-layout-y-neumorphism-parte-2)
573 | 22. [Primeros pasos y estructura inicial](#22-primeros-pasos-y-estructura-inicial)
574 | 23. [Ubicación y creación de elementos](#23-ubicación-y-creación-de-elementos)
575 | 24. [Entendiendo las versiones de CSS. ¿Existirá CSS4?](#24-entendiendo-las-versiones-de-css-existirá-css4)
576 | 25. [CSS Subgrid](#25-css-subgrid)
577 | 26. [Native CSS Massonry Layout](#26-native-css-massonry-layout)
578 | 27. [CSS feature queries: @supports](#27-css-feature-queries-supports)
579 | 28. [Nosotros y el futuro de la web: Tips para seguir aprendiendo y mantenerse al día](#28-nosotros-y-el-futuro-de-la-web-tips-para-seguir-aprendiendo-y-mantenerse-al-día)
580 |
581 | ## 1. Todo sobre el diseño de páginas web acaba de cambiar
582 |
583 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQFpuHLco/nb-w5JtFmlNT8jtGGPsVmw/view?utm_content=DAEQFpuHLco&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
584 |
585 |
586 | Haz click aquí para ver la documentación de esta clase 👀
587 |
588 |
589 |
590 |
591 | ## 2. La importancia de recordar las herramientas existentes
592 |
593 |
594 | Haz click aquí para ver la documentación de esta clase 👀
595 |
596 |
597 |
598 |
599 | ## 3. Flujo normal del documento: Display block, inline e inline-block
600 |
601 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQhmEDz9Q/h2_nIuVWdck7j14uBhcz2Q/view?utm_content=DAEQhmEDz9Q&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
602 |
603 |
604 | Haz click aquí para ver la documentación de esta clase 👀
605 |
606 |
607 |
608 |
609 | ## 4. Contextos de formato: Formato de Contexto de Bloque (BFC)
610 |
611 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQhjn-ddU/E28ZQQKmU5t6nC2QS8mbSw/view?utm_content=DAEQhjn-ddU&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
612 |
613 |
614 | Haz click aquí para ver la documentación de esta clase 👀
615 |
616 |
617 |
618 | * [Understanding CSS Layout And The Block Formatting Context](https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/)
619 |
620 |
621 | ## 5. Posicionamiento + Dinámica: ¿Cómo se vería?
622 |
623 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQhmoxgqg/yApl4zSE9ricNZ4u9qNnYA/view?utm_content=DAEQhmoxgqg&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
624 |
625 |
626 | Haz click aquí para ver la documentación de esta clase 👀
627 |
628 |
629 |
630 |
631 | ## 6. Diferencias entre Flexbox y CSS Grid
632 |
633 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQipHoNps/2pZaCBcJ6umcGrs43cNLIg/watch?utm_content=DAEQipHoNps&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
634 |
635 |
636 | Haz click aquí para ver la documentación de esta clase 👀
637 |
638 |
639 |
640 | * [A Complete Guide to Flexbox | CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
641 | * [Conceptos Básicos de flexbox](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox)
642 | * [A Complete Guide to Grid | CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)
643 | * [CSS Grid Layout | MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout)
644 |
645 |
646 | ## 7. Similitudes entre Flexbox y CSS Grid
647 |
648 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQigPkB18/WsdAshZB7AcMUsEfjF9Drg/watch?utm_content=DAEQigPkB18&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
649 |
650 |
651 | Haz click aquí para ver la documentación de esta clase 👀
652 |
653 |
654 |
655 |
656 | ## 8. ¿Puedo trabajar con Flexbox y CSS Grid al tiempo?
657 |
658 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQiq8ZCCk/8AFV-DehwDyKfK4rvn-8mA/view?utm_content=DAEQiq8ZCCk&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
659 |
660 |
661 | Haz click aquí para ver la documentación de esta clase 👀
662 |
663 |
664 |
665 | * [Dog Lovers · Image](https://dribbble.com/shots/11956611-Dog-Lovers)
666 |
667 |
668 | ## 9. Dinámica: ¿Qué usarías? (Parte 1)
669 |
670 | **Slides:** [Click aquí](https://www.canva.com/design/DAEP4guzK4E/YOOvFsNswxXdG83x7O4LNQ/view?utm_content=DAEP4guzK4E&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
671 |
672 |
673 | Haz click aquí para ver la documentación de esta clase 👀
674 |
675 |
676 |
677 | **Código:**
678 |
679 | * [App bar top · Flexbox](https://codepen.io/teffcode_/pen/MWKwdwX?editors=1100)
680 | * [App bar top · CSS Grid](https://codepen.io/teffcode_/pen/oNbXRqx?editors=1100)
681 | * [Dialog](https://codepen.io/teffcode_/pen/oNbXRyx?editors=1100)
682 |
683 |
684 | ## 10. Dinámica: ¿Qué usarías? (Parte 2) + Reto
685 |
686 | **Slides:** [Click aquí](https://www.canva.com/design/DAEPy-G9uoY/wiPhWBmw2HDph6XhKMDwTw/view?utm_content=DAEPy-G9uoY&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
687 |
688 |
689 | Haz click aquí para ver la documentación de esta clase 👀
690 |
691 |
692 |
693 | **Código:**
694 |
695 | * (Navigation Rail · Flexbox)[https://codepen.io/teffcode_/pen/pogJmmY]
696 | * (Navigation Rail · CSS Grid)[https://codepen.io/teffcode_/pen/RwrPzrx]
697 | * (List)[https://codepen.io/teffcode_/pen/BajNgKO]
698 |
699 |
700 | ## 11. ¿Cuándo usar Flexbox y cuándo usar CSS Grid?
701 |
702 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQjFaoxe4/v9SlBO-AWQ0XmbI8AocYPw/view?utm_content=DAEQjFaoxe4&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
703 |
704 |
705 | Haz click aquí para ver la documentación de esta clase 👀
706 |
707 |
708 |
709 | * [TENDENCIAS EN DISEÑO WEB PARA 2020](https://www.callibree.com/tendencias-en-diseno-web-para-2020/)
710 | * [Travel User Interface](https://dribbble.com/shots/2473268-Travel-User-Interface)
711 | * [Cards](https://co.pinterest.com/pin/295478425557557759/)
712 | * [UI exploration for Workfy](https://dribbble.com/shots/9980757-UI-exploration-for-Workfy?utm_source=pinterest&utm_campaign=pinterest_shot&utm_content=UI+exploration+for+Workfy&utm_medium=Social_Share)
713 |
714 |
715 | ## 12. ¿Qué son los Modern CSS Layouts?
716 |
717 | **Slides:** [Click aquí](https://www.canva.com/design/DAEP5ILaOpw/r1x0uwDErPaAOHMEVWB-RA/watch?utm_content=DAEP5ILaOpw&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
718 |
719 |
720 | Haz click aquí para ver la documentación de esta clase 👀
721 |
722 |
723 |
724 |
725 | ## 13. Patrones para usar como punto de partida
726 |
727 |
728 | Haz click aquí para ver la documentación de esta clase 👀
729 |
730 |
731 |
732 | * [Here is the collection of 91 patterns](https://csslayout.io/patterns/)
733 | * [Relearn CSS layout](https://every-layout.dev/)
734 |
735 |
736 | ## 14. Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout
737 |
738 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQjtR-Zk8/aw3k0--GkkF5lwbNUdNP1A/watch?utm_content=DAEQjtR-Zk8&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
739 |
740 |
741 | Haz click aquí para ver la documentación de esta clase 👀
742 |
743 |
744 |
745 | * [One line layouts](https://web.dev/one-line-layouts/)
746 |
747 |
748 | ## 15. Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect
749 |
750 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQjtR-Zk8/aw3k0--GkkF5lwbNUdNP1A/watch?utm_content=DAEQjtR-Zk8&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
751 |
752 |
753 | Haz click aquí para ver la documentación de esta clase 👀
754 |
755 |
756 |
757 | * [One line layouts](https://web.dev/one-line-layouts/)
758 |
759 |
760 | ## 16. Dinámica: No puedo dejar de ver
761 |
762 | **Slides:** [Click aquí](https://www.canva.com/design/DAEP495rHJU/htRUusEMyRvBTexxztk6Ow/view?utm_content=DAEP495rHJU&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
763 |
764 |
765 | Haz click aquí para ver la documentación de esta clase 👀
766 |
767 |
768 |
769 | * [Can't unsee](https://cantunsee.space/)
770 |
771 |
772 | ## 17. Design System y detalles visuales a tener en cuenta
773 |
774 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQjsUUkws/60UJcBNwhiQDQQ1sW5Vb-w/view?utm_content=DAEQjsUUkws&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
775 |
776 |
777 | Haz click aquí para ver la documentación de esta clase 👀
778 |
779 |
780 |
781 | * [Design System Shopify](https://polaris.shopify.com/design/polaris-is-changing)
782 | * [10 great design systems and how to learn (and steal) from them](https://uxdesign.cc/10-great-design-systems-and-how-to-learn-and-steal-from-them-4b9c6f168fa6)
783 | * [A comprehensive guide to design systems](https://www.invisionapp.com/inside-design/guide-to-design-systems/)
784 | * [Design Systems Gallery](https://designsystemsrepo.com/design-systems/)
785 | * [Space, Grids, and Layouts](https://www.designsystems.com/)
786 | * [Everything you need to know about Design Systems](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969#:~:text=What%20is%20a%20Design%20System%3F&text=A%20Design%20System%20is%20the,tools%20and%20the%20new%20technologies.)
787 |
788 | **Tarea:**
789 |
790 | * [What are design tokens?](https://piccalil.li/tutorial/what-are-design-tokens/)
791 |
792 |
793 | ## 18. Tendencias de diseño UI/UX: Fase de inspiración y creatividad
794 |
795 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQnJdEqpM/51ypRyMSnIjL0hquHoXu4A/view?utm_content=DAEQnJdEqpM&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
796 |
797 |
798 | Haz click aquí para ver la documentación de esta clase 👀
799 |
800 |
801 |
802 | * [UX/UI Design Trends 2020 · Video](https://www.youtube.com/watch?v=Y5KCDWi7h9o&feature=youtu.be&ab_channel=Envato)
803 | * [Principios de diseño de UI](https://medium.com/17seven/ui-design-principles-c6e5e63690f0)
804 | * [How I Use CSS Grid and Flexbox to Create a One-Page Website — Part 2](https://medium.com/better-programming/how-i-use-css-grid-and-flexbox-to-create-a-one-page-website-part-2-e575edb422fe)
805 | * [Cómo Airbnb diseña para la confianza](https://www.ted.com/talks/joe_gebbia_how_airbnb_designs_for_trust?language=es#t-525681)
806 | * [UX/UI Design Trends 2020](https://www.youtube.com/watch?v=Y5KCDWi7h9o&feature=youtu.be&ab_channel=Envato)
807 | * [8 UI design trends for 2020](https://uxdesign.cc/8-ui-ux-design-trends-for-2020-68e37b0278f6)
808 | * [100 lessons for the year to come](https://trends.uxdesign.cc/)
809 |
810 |
811 | ## 19. Wireframes y comunicación visual simple, intuitiva y atractiva
812 |
813 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQnFZTeMo/MK4oKIC18ZQE9_QT5JzVrg/view?utm_content=DAEQnFZTeMo&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
814 |
815 |
816 | Haz click aquí para ver la documentación de esta clase 👀
817 |
818 |
819 |
820 | * [UI/UX design guide with terms, explanations, tips and trends](https://medium.com/swlh/ui-ux-design-guide-with-terms-explanations-tips-and-trends-754b9356d914)
821 | * [Free online mockups](https://app.moqups.com/#)
822 |
823 |
824 | ## 20. Figma para devs: Auto Layout y Neumorphism (Parte 1)
825 |
826 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQo_o1hv8/1Nb6OZt78mj7Ha7Jm4TgEw/view?utm_content=DAEQo_o1hv8&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
827 |
828 |
829 | Haz click aquí para ver la documentación de esta clase 👀
830 |
831 |
832 |
833 | * [Tweet · Figma Auto Layout](https://twitter.com/figmadesign/status/1329455521355730945)
834 | * [Auto Layout · Video](https://www.youtube.com/watch?v=354CzVoFMS8&ab_channel=UXenEspa%C3%B1ol)
835 | * [Office Hours: Auto Layout · Video](https://www.youtube.com/watch?v=u4K2m-3MmQQ&ab_channel=Figma)
836 | * [Figma Community: el GitHub para l@s diseñador@es](https://www.uifrommars.com/figma-community-github-disenadores/?utm_source=uiFromMars%27+Astronauts&utm_campaign=c74c84681b-EMAIL_FIGMA-COMMUNITY_2020_10_16&utm_medium=email&utm_term=0_7ac156ca04-c74c84681b-116139761)
837 | * [Design more, resize less, with Auto Layout](https://www.figma.com/blog/announcing-auto-layout/)
838 | * [3 useful tips for designing neumorphic interfaces (soft UI)](https://dribbble.com/stories/2020/03/05/neumorphism-ui-tips)
839 | * [Neumorphism the right way — A 2020 Design Trend](https://medium.com/@artofofiare/neumorphism-the-right-way-a-2020-design-trend-386e6a09040a)
840 | * [Figma](https://www.figma.com/)
841 | * [Create dynamic designs with Auto Layout](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-Layout)
842 | * [Inspiración para el diseño del reproductor de música](https://co.pinterest.com/pin/576671927272675751/)
843 |
844 |
845 | ## 21. Figma para devs: Auto Layout y Neumorphism (Parte 2)
846 |
847 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQo_o1hv8/1Nb6OZt78mj7Ha7Jm4TgEw/view?utm_content=DAEQo_o1hv8&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
848 |
849 |
850 | Haz click aquí para ver la documentación de esta clase 👀
851 |
852 |
853 |
854 | * [Tweet · Figma Auto Layout](https://twitter.com/figmadesign/status/1329455521355730945)
855 | * [Auto Layout · Video](https://www.youtube.com/watch?v=354CzVoFMS8&ab_channel=UXenEspa%C3%B1ol)
856 | * [Office Hours: Auto Layout · Video](https://www.youtube.com/watch?v=u4K2m-3MmQQ&ab_channel=Figma)
857 | * [Figma Community: el GitHub para l@s diseñador@es](https://www.uifrommars.com/figma-community-github-disenadores/?utm_source=uiFromMars%27+Astronauts&utm_campaign=c74c84681b-EMAIL_FIGMA-COMMUNITY_2020_10_16&utm_medium=email&utm_term=0_7ac156ca04-c74c84681b-116139761)
858 | * [Design more, resize less, with Auto Layout](https://www.figma.com/blog/announcing-auto-layout/)
859 | * [3 useful tips for designing neumorphic interfaces (soft UI)](https://dribbble.com/stories/2020/03/05/neumorphism-ui-tips)
860 | * [Neumorphism the right way — A 2020 Design Trend](https://medium.com/@artofofiare/neumorphism-the-right-way-a-2020-design-trend-386e6a09040a)
861 | * [Figma](https://www.figma.com/)
862 | * [Create dynamic designs with Auto Layout](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-Layout)
863 | * [Inspiración para el diseño del reproductor de música](https://co.pinterest.com/pin/576671927272675751/)
864 |
865 |
866 | ## 22. Primeros pasos y estructura inicial
867 |
868 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQppONI-Y/qDjhUSJY7rxBO8mc2uI99A/view?utm_content=DAEQppONI-Y&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
869 |
870 |
871 | Haz click aquí para ver la documentación de esta clase 👀
872 |
873 |
874 |
875 |
876 | ## 23. Ubicación y creación de elementos
877 |
878 |
879 | Haz click aquí para ver la documentación de esta clase 👀
880 |
881 |
882 |
883 | * [Neumorphism initial](https://codepen.io/teffcode_/pen/OJRgNaE?editors=1100)
884 | * [Neumorphism final](https://codepen.io/teffcode_/pen/rNMwePa)
885 |
886 |
887 | ## 24. Entendiendo las versiones de CSS. ¿Existirá CSS4?
888 |
889 |
890 | Haz click aquí para ver la documentación de esta clase 👀
891 |
892 |
893 |
894 |
895 | ## 25. CSS Subgrid
896 |
897 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQpysfGjs/lRJPDQkNjqkLM7Z3BxXFyQ/view?utm_content=DAEQpysfGjs&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
898 |
899 |
900 | Haz click aquí para ver la documentación de esta clase 👀
901 |
902 |
903 |
904 |
905 | ## 26. Native CSS Massonry Layout
906 |
907 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQpysfGjs/lRJPDQkNjqkLM7Z3BxXFyQ/view?utm_content=DAEQpysfGjs&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
908 |
909 |
910 | Haz click aquí para ver la documentación de esta clase 👀
911 |
912 |
913 |
914 | * [Native CSS Masonry Layout In CSS Grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/)
915 |
916 |
917 | ## 27. CSS feature queries: @supports
918 |
919 |
920 | Haz click aquí para ver la documentación de esta clase 👀
921 |
922 |
923 |
924 | * [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/)
925 | * [Get Ready for `display: contents;`](https://css-tricks.com/get-ready-for-display-contents/)
926 |
927 |
928 | ## 28. Nosotros y el futuro de la web: Tips para seguir aprendiendo y mantenerse al día
929 |
930 | **Slides:** [Click aquí](https://www.canva.com/design/DAEQqIapf1s/ROxFyghXOVkKAw8UV69JkA/view?utm_content=DAEQqIapf1s&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton)
931 |
932 |
933 | Haz click aquí para ver la documentación de esta clase 👀
934 |
935 |
936 |
937 |
--------------------------------------------------------------------------------