Construye un header responsive con HTML semántico

Curso de Responsive Design: Maquetación Mobile First

Contenido del curso

Fundamentos de Mobile First

Estructura Mobile First

Optimización de Performance y Accesibilidad

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0018:12

Construye un header responsive con HTML semántico

Curso de Responsive Design: Maquetación Mobile First

Clase 4 de 17

Clase 4 / 17

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;

Comentarios (5)5 comentarios

iecgerman .

Hace 8 meses•editado

no me hagan mucho caso pero creo que nos conviene usar 1.25rem en lugar de 20px que es exactamente la misma medida

/*************************************/

Algún heroe con capa que tenga el figma de proyecto???

en el min 10:35 cuando habla de label-aria, los que gusten repasar como yo este concepto de accesibilidad:

https://platzi.com/cursos/html/atributos-aria-para-accesibilidad-web-co/

faltó el iconito de descargar

Así va quedando online:

Pablo Laterra

el figma esta en el readme del proyecto en git

Si, le pedi a cursor que lo convierta a rem.

Hace 8 meses

gracias Pablo

Ariel Hernán Contini

Hace 7 meses

Hola, si ustedes definen en el body un font-size: 62,5% eso hace que cuando empezamos a utilizar rems hacemos que 1 rem valga 10px, a partir de ahi podemos crear escalando de 10 en 10.

Cristian Acevedo

Hace 6 meses

/* Spacing */

--spacing-4: 4px;

--spacing-8: 8px;

--spacing-12: 12px;

--spacing-16: 16px;

--spacing-20: 20px;

--spacing-24: 24px;

--spacing-28: 28px;

--spacing-32: 32px;

--spacing-36: 36px;

--spacing-40: 40px;

Visney Leonardo Olaya Velasquez

Debes ajustar los breakpoints (puntos de quiebre en tus media queries) basándote estrictamente en cuándo el diseño se rompe o se vuelve incómodo de usar, no en resoluciones de dispositivos específicos del mercado.

Históricamente, los desarrolladores usaban medidas fijas y estandarizadas como 768px para tablets o 1024px para monitores de escritorio. Sin embargo, hoy en día existen miles de tamaños de pantalla diferentes. Si tienes un menú de navegación con muchos enlaces, es muy probable que a los 800px los textos comiencen a encimarse, a verse apretados o a perder legibilidad, incluso si técnicamente sigues estando dentro de una vista de "tablet".

La regla de oro cuando trabajas con la metodología Mobile First es empezar diseñando para la pantalla más pequeña posible e ir estirando la ventana del navegador poco a poco. En el momento exacto en que el contenido se vea asfixiado, requiera más espacio para respirar o la lectura sea difícil, ahí es donde debes introducir un media query para reorganizar el layout, independientemente del número exacto de píxeles que marque la pantalla.

Diego Francisco Merino Huizar

Genial

Fundamentos de Mobile First

Por qué diseñar webs primero para móvil

¿Qué es Mobile First y cómo empezar?

Prepara tu proyecto Mobile First

Estructura Mobile First

Construye un header responsive con HTML semántico

Flexbox y Clamp para crear un Hero responsive

Build mobile-first skill cards with CSS

Cómo CSS Grid Areas reorganiza tu contenido

Patrones responsive con CSS Grid y auto-fit

Optimización de Performance y Accesibilidad

Cambia el layout con Flexbox según la pantalla

Optimiza imágenes con picture y srcset

Fallbacks de Cloudinary en picture elements

Prueba tu web en el teléfono con Live Server

Debug en iOS Safari

inputmode y autocomplete en HTML

Pruebas de rendimiento Mobile First con Lighthouse

Container Queries vs Media Queries en CSS

Code review Mobile First con AI

Construye un header responsive con HTML semántico

Progreso del curso

Fundamentos de Mobile First

Estructura Mobile First

Optimización de Performance y Accesibilidad