Fundamentos de Diseño Web Moderno y Estructuras CSS

Diseño Web Moderno y Estrategia Mobile First

Una tendencia actual a la hora de diseñar páginas web es: diseñar primero pensando en los móviles. Mobile First significa: diseñar primero pensando en los dispositivos móviles.

Flexbox y Distribución de Elementos

• Si queremos distribuir los hijos de un contenedor de una forma equitativa (dejando el mismo espacio entre ellos) en una única dimensión, usamos: space-evenly.
• Para cambiar el eje principal en Flexbox se usa la propiedad: flex-direction.
• ¿Qué propiedad convierte un contenedor en un flex container?: display: flex.

Propiedades de Fondo y Visualización de Imágenes

¿Qué valor de background-size asegura que se vea toda la imagen y respetando el aspect ratio (proporción)?: contain.

Para adaptar una imagen de fondo se usa la propiedad background-size:

• 100%: se expandirá hasta el máximo tamaño de su contenedor, pero cambia la proporción.
• contain: la imagen se escalará e intentará ocupar todo el área sin variar su proporción; se verá toda la imagen.
• cover: manteniendo la proporción, cubrirá el área completa, lo que hará que se pueda recortar.

CSS Grid Layout y Estructuras de Cuadrícula

• ¿Qué significa grid-column: 1 / 4 en Grid Layout?: va desde la línea 1 hasta la 4, ocupando 3 columnas.
• ¿Qué propiedad o propiedades de Grid permiten nombrar las líneas de la cuadrícula?: grid-template-columns y grid-template-rows.
• La función minmax() de CSS se puede meter dentro de repeat(), pero repeat() no se puede meter dentro de minmax(): verdadero.
• En un sistema de cuadrícula de 12 columnas (sin grid), ¿qué ancho ocupa .col-4?: 33%.
• Tendrá que contener tantas columnas para que sumen el 100% del ancho: row.
• Se aplica para que se muestren bien alineadas las columnas de una cuadrícula: float: left.

Responsive Design y Media Queries

• ¿Cuál es el propósito del atributo initial-scale=1.0 en la etiqueta <meta name="viewport">?: indica el nivel de zoom inicial al cargar la página.
• Sirve para crear diferentes estilos según el dispositivo en el que se esté visualizando: Media Queries.
• ¿Qué hace display: none en una media query?: oculta el elemento si se cumple la condición.
• Selecciona la media query que solo se aplica a dispositivos apaisados u horizontales: landscape.

Modelo de Caja y Variables CSS

• ¿Para qué sirve box-sizing: border-box en el contexto de diseño en cuadrícula?: permite que los paddings y bordes se incluyan en el ancho total.
• Se aplica al crear una cuadrícula para que no se descuadren las columnas: box-sizing: border-box.
• ¿Para qué sirve :root al declarar variables CSS?: declara variables globales.