Curso de CSS Grid 💚

Apuntes de estudiantes 😍

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?

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