Patrones de diseño Responsive Web Design

Este repositorio contiene ejemplos y prácticas de patrones comunes de diseño responsivo aplicados con HTML y CSS para que una página web se adapte a distintos tamaños de pantalla y dispositivos.

¿Qué es el diseño web responsivo?

El diseño web responsivo (Responsive Web Design, RWD) es un enfoque para construir sitios web que se adapten automáticamente al tamaño y características de la pantalla del dispositivo (como móviles,smartv´s ,tablets o computadoras de escritorio) proporcionando una experiencia de usuario óptima sin importar el tamaño de pantalla.

¿Qué encontrarás en este proyecto?

Este proyecto muestra patrones de layout responsivo que ayudan a estructurar el diseño de una página web de forma flexible. Algunos patrones que se pueden incluir son:

• Tiny Tweaks: Ajustes menores como espaciados y tamaños de fuente basados en el tamaño de pantalla.
• Column Drop: Transformación de columnas horizontales en filas cuando la pantalla se hace estrecha.
• Mostly Fluid / Layout Shifter / Off Canvas: Patrones para reorganizar layouts según dispositivos.

Tecnologías usadas

• HTML
• CSS (media queries, grids / flexbox)

¿Cómo usar este proyecto?

Cómo ejecutarlo

1. Clona este repositorio
2. Abre index.html
   • (recomendacion) usa VS Code
3. Explora cada carpera con los diferentes patrones de diseño
   • (recomendacion) usa un navegador dev para usar la función inspección y ver mejor el RWD.

Autor

Cesar Alan Gonzalez Ruiz
LinkedIn: Cesar Alan Gonzalez Ruiz (https://www.linkedin.com/in/cesar-alan-gonzalez-ruiz-35ab42372)
GitHub: https://github.com/cesar1997alan