Maquetación: Flexbox, Grid y diseño adaptable
Esta presentación es de pantalla ancha
Sus láminas están pensadas para pantallas anchas (Escritorio o Laptop). Girando el teléfono o a pantalla completa se ven como se diseñaron; aquí mismo se leen recompuestas en una columna.
Si el teléfono no gira solo, quita el bloqueo de rotación y ponlo de lado.
Índice de contenido
- PortadaLámina 01
- Dónde encaja esta sesiónLámina 02
- Objetivos de la sesiónLámina 03
- El problema de la retículaLámina 04
- Dos ejes, dos herramientasLámina 05
- El contenedor y sus hijosLámina 06
- El eje principal y el cruzadoLámina 07
- Repartir a lo largoLámina 08
- Alinear a lo anchoLámina 09
- Laboratorio: el eje en vivoLámina 10
- Crecer, encoger, baseLámina 11
- Cuándo envolverLámina 12
- Para qué sirve de verdadLámina 13
- La retícula explícitaLámina 14
- La unidad frLámina 15
- repeat, minmax y auto-fitLámina 16
- Laboratorio: la retícula en vivoLámina 17
- Colocar por líneasLámina 18
- Áreas con nombreLámina 19
- Huecos y alineaciónLámina 20
- Retícula implícitaLámina 21
- Flexbox o GridLámina 22
- Qué significa adaptableLámina 23
- La consulta de mediosLámina 24
- Elegir los puntos de quiebreLámina 25
- Medidas que se adaptan solasLámina 26
- Laboratorio: el portafolio adaptableLámina 27
- Imágenes que no desbordanLámina 28
- Errores frecuentesLámina 29
- Actividad de aprendizajeLámina 30
- Fuentes de consulta y cierreLámina 31
Contenido relacionado
Otras piezas del Aula para seguir.
Código y webAntecedentes y terminología de Internet
Qué es la red, de dónde viene y con qué vocabulario se habla de ella.
Luis E. Maldonado Gil27 láminas
Código y webCSS: selectores, cascada y modelo de caja
Cómo se aplica el estilo y por qué una regla gana sobre otra.
Luis E. Maldonado Gil34 láminas
Código y webSlider con Image Slider Maker y VS Code
Generar un carrusel y llevarlo a una página escribiendo el HTML a mano.
Luis E. Maldonado Gil24:11