O teu primeiro projeto web.
Um ficheiro, um botão e uma ideia que começa a funcionar. Aprende o que liga o código ao que vês no ecrã.
Uma coisa muda.
Escolhe uma coisa pequena que queiras pôr a funcionar. Neste guia, vais criar uma página com um contador: escreves um ficheiro, abres no navegador e alteras o comportamento. O objetivo é conseguires explicar o que mudou quando carregaste no botão.
Começa pelo resultado que queres construir
Para este exercício precisas de um computador, um editor de texto simples e um navegador. Guarda o ficheiro com a extensão .html; confirma que o editor não acrescentou .txt. Não precisas de instalar uma biblioteca ou de criar uma conta na Forma.
Numa página web, o HTML dá estrutura ao conteúdo, o CSS define a apresentação e o JavaScript acrescenta comportamento. Vamos usar os três no mesmo ficheiro para que consigas ver a relação entre eles. É um ponto de partida para a web, não uma regra sobre qual deve ser a primeira linguagem de toda a gente.
Cria um contador num único ficheiro
Cria um ficheiro chamado index.html e copia este exemplo. Abre-o no navegador. O texto começa em zero e aumenta sempre que carregas no botão. Os dados ficam apenas nesta página; atualizar o navegador volta ao início.
<!doctype html>
<html lang="pt-PT">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>O meu primeiro projeto</title>
<style>
body { font-family: system-ui; padding: 2rem; }
button { font: inherit; padding: 1rem; cursor: pointer; }
</style>
<h1>Pequenos passos</h1>
<p id="resultado" aria-live="polite">Cliques: 0</p>
<button type="button" id="contar">Dar mais um passo</button>
<script>
let cliques = 0;
const resultado = document.querySelector("#resultado");
document.querySelector("#contar").addEventListener("click", () => {
cliques = cliques + 1;
resultado.textContent = "Cliques: " + cliques;
});
</script>
</html>Segue o caminho entre o clique e o resultado
A variável cliques guarda o número atual. O seletor #contar encontra o botão pelo identificador. addEventListener associa uma função ao evento click: quando o evento acontece, somamos um e substituímos o texto do resultado. A função só corre quando o botão recebe esse evento.
O elemento button já tem comportamento de teclado. Experimenta chegar até ele com Tab e ativá-lo com Enter. O atributo aria-live pede que tecnologias de apoio anunciem a atualização sem deslocar o foco.
Muda uma coisa e verifica o que acontece
Antes de editar, escreve o resultado que esperas. Faz uma alteração de cada vez, guarda o ficheiro e atualiza o navegador. Se algo falhar, a consola das ferramentas de programador pode indicar a linha do problema.
- Carrega três vezes: o texto deve mostrar Cliques: 3.
- Troca a soma de 1 por uma soma de 2. Depois de atualizar e carregar três vezes, deves ver Cliques: 6.
- Altera apenas o texto do botão. O contador deve continuar a funcionar.
- Acrescenta um segundo botão que coloque cliques a zero e atualize o resultado. Testa contar, repor e contar novamente.
Escolhe o próximo passo pelo que ainda não consegues fazer
Se o seletor te confundiu, pratica encontrar elementos. Se a função ainda parece magia, escreve a sequência em português e compara-a com cada linha. Se já consegues explicar tudo, transforma o contador numa pequena lista de tarefas e pensa em como guardar o estado entre visitas.
Ao escolher formação, procura requisitos claros, exercícios que consigas executar e uma forma de verificar os resultados. Vídeos vistos e projetos compreendidos medem coisas diferentes. Guarda uma versão tua deste exercício e uma nota com o erro que aprendeste a resolver.