Qué significa “mobile-first”

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 6 de 35.

Mobile-first es una estrategia de diseño en la que construyes tu sitio web primero para dispositivos móviles y luego lo mejoras progresivamente para pantallas más grandes.
La idea principal es que la mayoría de los usuarios ahora navegan por la web desde sus teléfonos, por lo que empezar por lo pequeño garantiza que tu sitio funcione bien para la mayoría de los visitantes.

Comienza escribiendo los estilos para móviles:

body {
  font-size: 16px;
  padding: 10px;
}

Luego, utiliza media queries para adaptar tu diseño a pantallas más grandes:

/* Estilos para dispositivos con un ancho superior a 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Este enfoque garantiza que su sitio funcione bien primero en pantallas pequeñas y luego mejore la experiencia para los usuarios en dispositivos más grandes.

Desafío

Fácil

Se te proporciona un HTML con un menú de navegación sencillo. Tu tarea es darle estilo utilizando el mobile-first approach (enfoque de primero el móvil).

1. Estilos para móviles primero

Haz que cada elemento del menú ocupe todo el ancho del contenedor (apilados verticalmente).
Haz que los enlaces sean display: block para que ocupen todo el ancho. El resto del estilo (colores, bordes, etc.) depende de ti. Puede verse como en la imagen de ejemplo a continuación.

2. Estilos para pantallas más grandes

Ya se proporciona una media query para pantallas con min-width: 768px.
Dentro de ella, cambia el diseño del menú a horizontal utilizando display: flex para la clase .menu.
Ajusta el espaciado entre los elementos del menú para que coincida con la imagen de ejemplo a continuación.

Hoja de referencia

Mobile-first es una estrategia de diseño en la que construyes tu sitio web para dispositivos móviles primero y luego lo mejoras progresivamente para pantallas más grandes.

Comienza escribiendo los estilos para móviles:

body {
  font-size: 16px;
  padding: 10px;
}

Luego, utiliza media queries para adaptar tu diseño a pantallas más grandes:

/* Styles for devices wider than 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Este enfoque garantiza que tu sitio funcione bien en pantallas pequeñas primero y luego mejore la experiencia para los usuarios en dispositivos más grandes.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>