Ficha 02 · Layout, responsivo e publicação

Parte I · Layout

Exercício 1 · Flexbox vs Grid (10 pts)

Quando usar Flexbox e quando Grid? Dá um exemplo de cada.

Exercício 2 · Navbar com Flexbox (15 pts)

Escreve o CSS para uma navbar com logo à esquerda e menu à direita, alinhados verticalmente ao centro, com 16 px de espaço entre links.

• Início
• Recursos
• Sobre

```css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.menu {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0; padding: 0;
}
.menu a { text-decoration: none; color: inherit; }

Exercício 3 · Galeria responsiva (15 pts)

Escreve o CSS para uma galeria de cards que tem colunas de mínimo 240 px, preenche automaticamente o espaço e tem 20 px de gap — sem usar media queries.

Parte II · Responsivo

Exercício 4 · Mobile-first (10 pts)

Reescreve este CSS desktop-first em mobile-first:

.menu { display: flex; }
@media (max-width: 768px) {
  .menu { display: none; }
}

Exercício 5 · Toque (10 pts)

Que cuidados ter no design responsivo para toque (mobile/tablet)?

Parte III · Acessibilidade

Exercício 6 · Auditoria (20 pts)

Identifica 5 problemas de acessibilidade e corrige:

<div onclick="abrir()">Abrir</div>
<img src="grafico.png">
<input type="text" placeholder="Email">
<a href="#" style="outline:none;">Link</a>
<p style="color:#aaa; background:#ccc;">Importante</p>

Parte IV · Publicação

Exercício 7 · Deploy (10 pts)

Indica 3 opções gratuitas para alojar uma página estática com HTTPS automático.

Exercício 8 · Antes de publicar (10 pts)

Lista 5 verificações a fazer antes de pôr o site no ar.