Clase 50 de 56 • Curso Definitivo de HTML y CSS
Contenido del curso
Este curso tiene una versión actualizada.
HTML y CSS: Fundamentos para Desarrolladores Web
Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales
Fundamentos del Desarrollo Backend
Comprende el Rol y las Habilidades de un Desarrollador Full Stack
Diferencias entre Páginas Web Estáticas y Dinámicas
Creación de Formularios Web Efectivos con HTML
Creación de Formularios HTML con Campos de Fecha y Hora
Autocompletado y Requerimiento en Formularios HTML
Creación de Menús Desplegables con Select y Data List en HTML
Diferencias entre botones submit e input en formularios HTML
Introducción a CSS: Estilos y Aplicaciones Básicas
Implementación Básica de CSS en HTML
Pseudo Clases y Pseudo Elementos en CSS
Anatomía de una Regla CSS: Selectores y Declaraciones
Modelo de Caja en CSS: Margen, Relleno y Bordes
Herencia en CSS: Cómo Funciona y Afecta a los Estilos
Especificidad y Orden de Declaración en CSS
Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente
Buenas prácticas en CSS: Especificidad y uso adecuado de selectores
Combinadores CSS: Hermanos Adyacentes y Especificidad
Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos
Combinadores CSS: Hijos y Descendientes
Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes
Comprensión del uso de em en CSS: medidas relativas de fuente
Uso de REM en CSS para Fuentes y Dimensiones
"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"
Posicionamiento en CSS: Static, Absolute y Relative
CSS: Display Block, Inline e Inline-Block
Posicionamiento de Layout Básico en CSS
Posicionamiento y Estilos con Display Flex en CSS
Posicionamiento Vertical con Flexbox en CSS
Uso de Variables Custom en CSS para Optimizar Estilos
Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas
Responsive Design: Estrategias Mobile First
Patrones de Diseño Responsive: Mobile First a Desktop
Media Queries para Diseño Responsive Mobile y Tablet
Patrón Layout Shifter en Diseño Mobile First
Patrón de Diseño Responsive: Column Drop en CSS
Diseño Responsive: Estrategias y Ejemplos Prácticos
Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas
Cuando se trata de optimizar un proyecto siguiendo el enfoque mobile first, es esencial garantizar que la carga de la página sea rápida y eficiente. Aquí te dejo algunos consejos valiosos para lograrlo:
Divide el código CSS: Evita cargar todos los media queries en un solo archivo CSS, ya que esto puede aumentar considerablemente el tamaño del archivo y, por ende, afectar la velocidad de carga. A medida que empieces a implementar breakpoints o media queries, divídelos en diferentes archivos según sea necesario y cárgalos de manera selectiva.
Utiliza un archivo CSS dedicado al mobile: Comienza con un archivo base como style.css o mobile.css, que contenga lo esencial para que el diseño móvil se visualice correctamente.
Selecciona los breakpoints adecuados: No es necesario adaptar tu diseño a todos los dispositivos existentes, sino a aquellos más comunes. Por ejemplo, las dimensiones comunes para móviles empiezan en 320 píxeles de ancho. Más allá de eso, 375 y 414 píxeles suelen ser buenos puntos de inicio para móviles.
La elección adecuada de breakpoints es crucial para un diseño eficiente y funcional en diversos dispositivos. Una herramienta útil es el sitio web "my device io", donde puedes encontrar datos sobre los viewports de diferentes dispositivos:
Ancho mínimo móvil: Los dispositivos móviles más pequeños generalmente tienen un ancho de 320 píxeles, por lo que este debería ser tu punto de inicio.
Variedad en las dimensiones: Además de 320 píxeles para móviles, considera 768 y 800 píxeles para tablets. No te preocupes por demasiados breakpoints, entre 3 y 4 será suficiente para gestionar un código eficiente y fácil de mantener.
Al analizar sitios web de grandes compañías, podemos aprender de sus estrategias de diseño responsive. Aquí te presento algunos ejemplos:
Dropbox utiliza un patrón fluido donde todo el contenido se presenta inicialmente en un 100% en sentido vertical. A medida que el viewport se adapta, ciertos contenedores limitan su crecimiento ajustando el contenido vertical automáticamente.
GitHub emplea el patrón de layout shifter. En dispositivos móviles, el menú cambia drásticamente en su UI, moviendo elementos clave, como el formulario de registro, según el tamaño del viewport. Este tipo de patrón permite reorganizar el contenido para que se adapte óptimamente en cada tamaño de pantalla.
Smashing Magazine utiliza el patrón column drop, donde el contenido se ajusta de tres columnas a dos, y finalmente a una sola columna conforme se reduce el viewport. Este patrón es útil para manejar layouts con diferentes niveles de contenido, utilizando CSS Grid Layout para la implementación.
Además de los patrones comunes discutidos, existen otros enfoques que puedes encontrar al explorar la web. Dribbble, por ejemplo, implementa un diseño en cuadrícula que se ajusta al tamaño del dispositivo. Este tipo de diseño es similar al utilizado por plataformas como Instagram o Pinterest y se logra utilizando CSS Grid Layout.
Por último, te animo a que, mientras navegas, explores y analices diferentes patrones de diseño que usen las páginas que visitas regularmente. Comparte cualquier patrón interesante o inusual que encuentres: no solo favorece tu aprendizaje, sino que contribuye al intercambio de ideas en la comunidad. Flexbox y CSS Grid Layout son herramientas poderosas que merecen ser exploradas más a fondo en cursos como los que ofrece Platzi.
