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, o aprimora progressivamente para telas maiores.
A ideia principal é que a maioria das pessoas 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;
}

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

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

Essa abordagem garante que seu site funcione bem primeiro em telas pequenas e, depois, aprimore 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. Primeiro, os estilos para dispositivos móveis

Faça com que cada item do menu ocupe toda a largura do contêiner (empilhados verticalmente).
Faça com que os links tenham display: block para ocuparem toda a largura. O restante da estilização (cores, bordas etc.) fica a seu critério. O resultado pode ficar parecido com o da imagem de exemplo abaixo.

2. Estilos para telas maiores

Uma consulta de mídia para telas com min-width: 768px já foi fornecida.
Dentro dela, altere o layout do menu para horizontal usando display: flex para o .menu.
Adicione um margin-right a cada item do menu (.menu li) para espaçá-los, como na 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>