O que significa “mobile-first”

Parte da seção Frontend Prático do Journey de HTML da Coddy. Lição 6 de 35.

Mobile-first é uma estratégia de design em que você cria seu site primeiro para dispositivos móveis e, depois, aprimora-o progressivamente para telas maiores.
A ideia principal é que a maioria dos usuários agora navega na web pelo celular, então começar com telas pequenas garante que seu site funcione bem para a maioria dos visitantes.

Comece escrevendo os estilos para dispositivos móveis:

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

Depois, use consultas de mídia para adaptar seu design a telas maiores:

/* Estilos para dispositivos mais largos que 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Essa abordagem garante que seu site funcione bem em telas pequenas primeiro e, em seguida, aprimora a experiência para usuários em dispositivos maiores.

Desafio

Fácil

Você recebeu um HTML com um menu de navegação simples. Sua tarefa é estilizá-lo usando a abordagem mobile-first.

1. Estilos para dispositivos móveis primeiro

Faça cada item do menu ocupar toda a largura do contêiner (empilhados verticalmente).
Faça os links terem display: block para que ocupem toda a largura. O restante da estilização (cores, bordas etc.) fica a seu critério. O resultado pode ser semelhante ao da imagem de exemplo abaixo.

2. Estilos para telas maiores

Uma media query já foi fornecida para telas com min-width: 768px.
Dentro dela, altere o layout do menu para horizontal usando display: flex para o .menu.
Ajuste o espaçamento entre os itens do menu para que corresponda ao da imagem de exemplo abaixo.

Experimente você mesmo

<!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>