## Tarea
Evaluar la capacidad de respuesta y adaptabilidad del sitio web que presenta información sobre diferentes alimentos. La página web está diseñada actualmente para ser responsiva en la primera parte y adaptable en la segunda parte. Hay **4 puntos de quiebre** a considerar:
- `300px`: Smartphones pequeños.
- `480px`: Smartphones grandes.
- `720px`: Tabletas.
- `1200px`: Escritorios.

Abrir la página web en una nueva ventana utilizando el botón "Abrir vista previa en nueva ventana" en la esquina inferior izquierda del entorno de pruebas. Cambiar el ancho de la ventana de visualización y observar las diferencias en el diseño y los estilos en cada punto de quiebre.

> Nota
>
> Si se necesita ayuda sobre cómo proceder, hay instrucciones en una grabación debajo del entorno de pruebas.

Mejora tus habilidades de estilizado dominando técnicas avanzadas de CSS para el diseño web moderno. Posiciona y gestiona elementos con precisión utilizando estrategias avanzadas de posicionamiento. Crea transiciones suaves y animaciones atractivas para mejorar la experiencia del usuario. Transforma y manipula elementos para lograr efectos visuales dinámicos. Construye diseños responsivos que se adapten a diferentes dispositivos y aprende a optimizar tu flujo de trabajo con preprocesadores CSS como Sass.

Investigue qué pueden esperar los estudiantes de este curso avanzado de estilos en HTML y CSS. ¿Qué conocimientos previos se requieren antes de comenzar el curso? ¿Qué temas se abordarán en el mismo?

Posicionamiento y gestión de elementos en páginas web. Estudio de las diferentes propiedades de posicionamiento, uso del orden de apilamiento para controlar la visibilidad de elementos superpuestos y manejo del desbordamiento de contenido.

Investigue el potencial de las transiciones y aprenda cómo mejorar la experiencia del usuario. Descubra cómo animar propiedades de manera suave y gradual, creando transiciones de estado sin interrupciones.

Aprenda sobre la propiedad animation y cómo puede utilizarse para crear diseños dinámicos y atractivos. Descubra cómo crear animaciones complejas utilizando keyframes y cómo controlar la animación.

Explora la propiedad de transformación, que permite modificar la apariencia y posición de los elementos en una página web. Aprende a escalar, rotar, sesgar y trasladar elementos en dos y tres dimensiones. Combina múltiples transformaciones para crear efectos más complejos.

Los principios y técnicas utilizados en el diseño adaptativo/responsivo buscan que los sitios web y aplicaciones sean accesibles y visualmente atractivos en diferentes dispositivos, tamaños de pantalla y orientaciones.

Aprende sobre los preprocesadores en CSS y cómo pueden ayudar a escribir un código más eficiente y mantenible. Comprende cómo utilizar preprocesadores para simplificar el flujo de trabajo y generar un código CSS más limpio.

Desafío: Inspeccionar Diseño Adaptable

Tarea

Awesome!

Desafío: Inspeccionar Diseño Adaptable

Tarea