O que significa “mobile-first”

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 6 de 35.

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

Comece escrevendo estilos mobile:

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

Em seguida, use media queries para adaptar seu design para 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 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 mobile primeiro

Faça com que cada item do menu ocupe a largura total do contêiner (empilhados verticalmente).
Faça com que os links tenham display: block para que ocupem a largura total. O restante da estilização (cores, bordas, etc.) fica a seu critério. Pode se parecer com o exemplo na imagem 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 a classe .menu.
Ajuste o espaçamento entre os itens do menu para que corresponda à imagem de exemplo abaixo.

Folha de consulta

Mobile-first é uma estratégia de design onde você constrói seu site para dispositivos móveis primeiro, e depois o aprimora progressivamente para telas maiores.

Comece escrevendo os estilos para dispositivos móveis:

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

Em seguida, use media queries para adaptar seu design para 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 em telas pequenas primeiro, e depois aprimora a experiência para usuários em dispositivos maiores.

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>