Passo 1: A estrutura
Chegou a hora de juntar tudo. Vamos construir um app de verdade, e todo app começa igual: pelos elementos na tela.
Estudar esta lição interativa →Este é o momento pelo qual o curso inteiro trabalhou: construir um aplicativo completo, do zero, só com o que você aprendeu. Será uma lista de tarefas, o projeto de estreia clássico de quem programa, porque ele exige um pouco de tudo: variáveis, funções, eventos, DOM, decisões. Vamos montá-lo em passos pequenos, e em cada passo você verá o app funcionando um pouco mais.
O primeiro passo de qualquer app é decidir o que existe na tela. O nosso precisa de três coisas: um campo de texto (input) onde se digita a tarefa, um botão para adicionar e uma lista vazia (ul) onde as tarefas vão aparecer. Repare que cada um tem um id: são as "alças" pelas quais o JavaScript vai agarrá-los com o querySelector nos próximos passos. Rode e veja o esqueleto:
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Só a estrutura, por enquanto.
Por enquanto é só HTML: o botão não faz nada, e está tudo bem. Construir a estrutura antes do comportamento é o fluxo natural de quem desenvolve: primeiro o palco, depois o espetáculo. Se quiser, já personalize os textos do título e do placeholder.