Lista de Exercícios Práticos: Design Responsivo e Media Queries

Contexto: Nas semanas anteriores, focamos em construir layouts incríveis para telas grandes (Desktops). Agora, o seu objetivo é utilizar Media Queries para adaptar esses mesmos componentes para tablets e celulares, garantindo uma experiência de uso perfeita em qualquer tamanho de tela.

Exercício 1: Menu de Navegação Adaptável

Em telas grandes, é comum termos a logo de um lado e os links de navegação do outro. Porém, em telas de celulares, esse formato espreme os links ou faz com que eles vazem da tela. O objetivo é transformar a barra de navegação horizontal em um layout empilhado quando acessada por dispositivos móveis.
Instruções:

1. Crie uma estrutura de cabeçalho (logo e menu de links) utilizando Flexbox para distribuí-los em extremidades opostas (padrão desktop).
2. Adicione uma Media Query no seu CSS para interceptar telas com largura máxima de 768px (padrão comum para tablets/celulares).
3. Dentro dessa Media Query, altere o comportamento do Flexbox do cabeçalho para que os elementos (logo e menu) fiquem empilhados verticalmente (um embaixo do outro).
4. Garanta que, no formato empilhado, tanto a logo quanto os links fiquem perfeitamente centralizados na tela.

Dica Visual: No layout mobile, adicione um pequeno espaçamento inferior (margin-bottom) na logo para que ela não fique grudada nos links do menu abaixo dela.
Resultado Esperado:
$$Imagem de barra de navegação que no desktop fica na horizontal e no celular se transforma em uma lista vertical centralizada$$

Exercício 2: Catálogo de Produtos (Quebra de Grid Inteligente)

Uma loja virtual não pode exibir 4 produtos lado a lado na tela de um celular, pois as imagens ficariam minúsculas. O objetivo é adaptar o número de colunas da nossa grade (Grid) gradativamente, conforme o espaço da tela diminui.
Instruções:

1. Crie uma área de catálogo de produtos usando CSS Grid. Configure-a inicialmente para exibir 4 colunas de tamanhos iguais em telas grandes.
2. Crie uma primeira Media Query para telas médias (ex: max-width: 1024px para tablets). Nessa regra, instrua o CSS Grid a reduzir o layout para 2 colunas.
3. Crie uma segunda Media Query para telas pequenas (ex: max-width: 600px para celulares). Nessa regra, instrua o CSS Grid a reduzir o layout para apenas 1 coluna, fazendo com que cada produto ocupe a largura total da tela.

Desafio Extra (Pesquisa): Sabia que é possível resolver este mesmo problema de adaptação de colunas sem usar nenhuma Media Query? Pesquise sobre as propriedades auto-fit e minmax do CSS Grid e tente refazer este exercício utilizando apenas uma linha de código inteligente no seu grid-template-columns original!
Dica Visual: Aproveite a Media Query do celular (1 coluna) para também reduzir levemente as margens laterais da página, dando mais espaço de respiro para os cartões de produto.
Resultado Esperado:
$$Imagem de catálogo de produtos exibindo 4 colunas no computador, 2 colunas no tablet e 1 coluna ocupando toda a tela no celular$$

Exercício 3: Seção Hero (Inversão de Ordem Visual)

A “Seção Hero” é aquela área principal logo no topo do site. No desktop, é muito comum termos um texto persuasivo do lado esquerdo e uma grande imagem do lado direito. No mobile, se empilharmos naturalmente, o texto ficará em cima e a imagem embaixo. Mas e se o cliente exigir que a imagem apareça primeiro no celular?
Instruções:

1. Crie uma seção contendo dois blocos: um bloco de texto (título, parágrafo, botão) escrito primeiro no HTML, e um bloco de imagem escrito em seguida.
2. Use Flexbox ou Grid para colocá-los lado a lado no desktop (50% do espaço para cada).
3. Crie uma Media Query para celulares (max-width: 768px) e mude a disposição para que fiquem empilhados verticalmente.
4. O Grande Desafio: Ainda dentro da Media Query, utilize uma propriedade específica do Flexbox (ou do Grid) para inverter a ordem visual dos elementos, fazendo com que a imagem, mesmo estando em segundo lugar no HTML, seja exibida acima do texto na tela do celular.

Dica Visual: No formato desktop, o texto geralmente fica alinhado à esquerda. Aproveite a Media Query do mobile para centralizar todo o texto (text-align: center), o que funciona muito melhor em telas estreitas.
Resultado Esperado:
$$Imagem de banner principal com texto na esquerda e foto na direita no desktop, que ao mudar para o celular exibe a foto no topo e o texto centralizado logo abaixo$$

Exercício 4: Tipografia e Espaçamentos Fluidos

Títulos gigantes e margens enormes ficam incríveis em monitores largos, mas quebram completamente o design em telas minúsculas. O Design Responsivo não é apenas sobre mover caixas, é também sobre ajustar detalhes.
Instruções:

1. Crie um artigo na sua página contendo um título principal (<h1>) bem grande (ex: 3rem ou mais) e um container com um espaçamento interno (padding) bastante generoso (ex: 80px).
2. Crie uma Media Query para telas de celulares.
3. Dentro da Media Query, não altere o layout das caixas, mas reduza o tamanho da fonte do título principal para um tamanho mais confortável para leitura móvel (ex: 1.8rem).
4. Na mesma Media Query, reduza drasticamente o espaçamento interno (padding) do container, para que o texto não fique espremido no meio de uma tela pequena.

Dica Visual: Utilize unidades relativas (como rem para fontes) desde o começo. Ajustar tipografia no mobile é o que separa um site amador de um site profissional. Verifique se o tamanho da fonte não está forçando a criação de uma barra de rolagem horizontal (o maior inimigo do mobile!).
Resultado Esperado:
$$Imagem de texto com letras gigantes e muito espaço ao redor no desktop, que se ajustam para tamanhos proporcionais e margens menores em uma tela de celular$$

Desafio Master: Menu Hamburger (Sem JavaScript!)

No Exercício 1, nós apenas empilhamos os links em telas menores. Mas em aplicativos reais, nós escondemos esses links atrás de um ícone de “Hamburger” (três listras). Normalmente usamos JavaScript para fazer isso funcionar, mas existe um truque avançado chamado “Checkbox Hack” que permite fazer isso apenas com CSS!
Instruções:

1. No HTML do seu cabeçalho, adicione um <input type=“checkbox” id=“menu-toggle”> e um <label for=“menu-toggle”> contendo o ícone do hamburger (você pode usar o símbolo ☰ do HTML). Coloque-os antes da sua lista de links (<ul>).
2. No CSS padrão (desktop), oculte o checkbox e a label (ícone do hamburger) usando display: none. O menu de links deve aparecer normalmente.
3. Dentro da Media Query de celulares (max-width: 768px), inverta a lógica: mostre a label (ícone) e esconda a lista de links (display: none). Oculte o checkbox sempre.
4. A Mágica: Ainda dentro da Media Query, crie uma regra CSS usando a pseudo-classe :checked no input e o seletor de irmãos (~ ou +) para mirar no menu. A regra será mais ou menos assim: “Quando o input estiver checado, encontre o menu logo abaixo dele e mude o display para flex (ou block)”.

Dica Visual: No mobile, quando o menu abrir, use position: absolute nele, com top: 60px (ou a altura do seu cabeçalho), left: 0 e width: 100%. Isso fará com que os links “caiam” por cima do conteúdo do site, igual aos aplicativos de verdade!
Resultado Esperado:
$$Imagem de uma barra de navegação no celular exibindo apenas a logo e um ícone de hamburger. Ao clicar no ícone, um menu suspenso com os links aparece abaixo$$