Ficha 01 · HTML, CSS, JavaScript e composição visual

Exercício 1 · Semântica vs genérico

Classifica cada uma destas tags como semântica ou genérica: div, <header>, span, <article>, <section>, <nav>. Explica em uma frase porque as tags semânticas são preferíveis sempre que existe uma adequada.

Exercício 2 · Box model na prática

Um elemento tem padding: 16px, border: 2px solid, margin: 24px. Desenha (em texto) as quatro camadas do box model, da mais interna para a mais externa, e explica qual delas usarias para "afastar este elemento do vizinho ao lado" e qual para "dar respiro entre o texto e o rebordo do elemento".

Exercício 3 · Flexbox ou Grid

Para cada situação, indica se usarias Flexbox ou Grid: (a) uma barra de navegação com 4 links alinhados numa linha; (b) uma galeria de fotografias organizada em 3 colunas e várias linhas; (c) um cabeçalho com logótipo à esquerda e botão à direita.

Exercício 4 · Depurar um bug de JavaScript

O seguinte código não faz nada quando se clica no botão:

<script>
  document.querySelector("#btn").addEventListener("click", () => alert("Clicado!"));
</script>
<button id="btn">Clicar</button>

Identifica o bug e corrige-o.

Exercício 5 · Validação de formulário

Escreve o código JavaScript que impede o envio de um formulário se o campo #email estiver vazio, mostrando uma mensagem de erro nesse caso.

Exercício 6 · Escolher o framework certo

Para cada projeto, indica o tipo de framework mais adequado e justifica: (a) um site institucional de 5 páginas, maioritariamente estático; (b) um dashboard interno com dados que mudam constantemente; (c) validar o design de uma app móvel antes de programar.

Exercício 7 · Aplicar hierarquia visual

Uma página tem título, subtítulo, três parágrafos e um botão de ação, todos com font-size: 16px e a mesma cor. Reescreve (em tabela) o tamanho e o peso que darias a cada elemento para criar hierarquia visual clara, e explica a escolha do botão de ação.