Construye un header responsive con HTML semántico

Germán García

Hace 9 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

Hace 9 meses•editado

el figma esta en el readme del proyecto en git

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

Germán García

Hace 9 meses

gracias Pablo

Ariel Hernán Contini

Hace 8 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;

/* 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

Hace 8 meses

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

Hace 9 meses

Genial

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:

el figma esta en el readme del proyecto en git

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

gracias Pablo

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.

  /* 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;

/* 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;

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.

Genial

Construye un header responsive con HTML semántico

Progreso del curso

Fundamentos de Mobile First

Estructura Mobile First

Optimización de Performance y Accesibilidad