• Como utilizar VSCode & Emmet para crear markup a partir de un diseño y BEM de marcado de clases de componentes
III & IV. 25 y 28 Oct
2. Concepto de modelo de cajas
• Explicar como funciona el modelo de cajas y ejemplificar como utilizar las 4 capas
V. 4 Nov
3. Flexbox
• Explicar para que sirve y como utilizarlo para crear un diseño fluido (responsivo) flexible al viewport
VI & VII. 8 y 11 Nov
4. Flexbox para centrar elementos
5. Flexbox para agrupar componentes
• Explicar como utilizar flexbox para centrar elementos y como utilizarlo para agrupar elementos que se vean bien en cualquier dispositivo
VIII. 18 Nov
6. Imágenes
• Explicar como cargar una imagen, como optimizarla, los atributos que debe llevar para que sea accesible y ejemplo de como incluirla en el HTML & en el CSS y por qué utilizar una u otra.
IX & X. 22 y 25 Nov
7. Stacking context z-index
• Explicar como crear stacking context para posicionar algunos elementos encima de otros
XI & XII. 29 Nov y 3 Dic
8. Posición de elementos (relative, absolute, fixed & sticky) 9. Grid
• Explicar la posición de elementos y ejemplo de como aplicarlo para crear un elemento fijo y para posicionar un elemento dentro de otro.
• Explicar qué es grid, que resuelve y como utilizarlo para crear el layout de una página completa y para centrar elementos.
XIII. 6 Dic
10. Keyframes
• Explicar que son los keyframes y como utilizarlos para mejorar la experiencia de usuario por medio de animaciones