Skip to content

Metzeldor/layouts-responsivos-alura

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Layouts Responsivos

Este proyecto se enfoca en el desarrollo de layouts responsivos y adaptables a diferentes tamaños de pantalla. A través del curso "Layouts Responsivos" en Alura Latam, doy especial agradecimiento a la instructora del curso Tatiani Meneghini

Uso de EMMET

Aprendí a utilizar EMMET, una herramienta que te permitirá generar bloques de código de manera eficiente, ahorrando tiempo durante el desarrollo web. Con EMMET podrás crear rápidamente estructuras HTML y CSS utilizando una sintaxis sencilla y abreviada.

Unidades de Medida Relativas

Comprendí la importancia y el uso de las unidades de medida relativas, como "rem", para crear diseños flexibles y adaptables a diferentes tamaños de pantalla. Estas unidades permiten establecer tamaños y espacios proporcionales, facilitando la adaptación del diseño a distintos dispositivos.

Imágenes Responsivas

Exploré los diferentes tipos de imágenes y aprendí a utilizar SVG y técnicas para que las imágenes se adapten correctamente a los dispositivos móviles y pantallas de diferentes tamaños. Esto garantizará que las imágenes se vean nítidas y bien proporcionadas en cualquier dispositivo.

Configuración del Viewport

Conocí la importancia de la configuración del viewport y la propiedad initial-scale, la cual afecta el nivel de zoom aplicado en un sitio web. Aprenderás cómo configurar correctamente el viewport para garantizar una experiencia de usuario consistente en dispositivos móviles y de escritorio.

Ocupación de Pantalla Completa

Aprendí cómo lograr que las imágenes ocupen todo el tamaño de la pantalla en dispositivos móviles, así como establecer límites para evitar la pixelación en pantallas más grandes. Esto te permitirá aprovechar al máximo el espacio disponible en diferentes dispositivos.

Uso de Variables CSS

Utilicé variables de CSS para definir propiedades importantes, como colores y fuentes, de manera más concisa y reutilizable en tu proyecto. Las variables CSS te ayudarán a mantener un código limpio, organizado y fácilmente modificable.

Mobile First

Aprendí el concepto de Mobile First para diseñar y desarrollar sitios web que se adapten de manera óptima a diferentes tamaños de dispositivos, desde móviles hasta tablets y escritorios. El enfoque Mobile First prioriza la experiencia en dispositivos móviles y luego se adapta a pantallas más grandes, asegurando un diseño responsivo y amigable para el usuario.

Releases

No releases published

Packages

No packages published