Começar pelo significado e pela estrutura
HTML não serve apenas para colocar texto na tela. Títulos, regiões, links, listas e formulários comunicam às pessoas e aos navegadores como a página está organizada. Uma estrutura documental bem pensada facilita a navegação, a manutenção e a evolução do conteúdo.
Fazer o layout funcionar em qualquer tela
CSS transforma essa estrutura numa experiência visual. Você praticará espaçamento, hierarquia e layout responsivo para manter a página legível em um celular ou em uma tela ampla. O objetivo não é encolher uma composição de desktop, mas permitir que o conteúdo se adapte naturalmente.
Adicionar comportamento sem perder clareza
Os fundamentos de JavaScript introduzem interação: responder a entradas, atualizar a interface e conectar o comportamento ao conteúdo. Acessibilidade e SEO tornam-se verificações práticas: as pessoas conseguem navegar e os mecanismos de busca entendem a estrutura? A etapa reúne essas bases em páginas limpas e responsivas.
Do conceito ao código funcional
Estes trechos mostram como os conceitos de cada nível aparecem em projetos reais. São pontos de partida para ler, questionar, adaptar e testar — não código para copiar sem entender.
Dar significado à estrutura
A página usa uma região principal, hierarquia clara de títulos e uma lista real. A grade CSS combina minmax() e auto-fit para reorganizar cartões conforme o espaço disponível.
<main class="program-page">
<section class="intro" aria-labelledby="page-title">
<p class="eyebrow">Community learning</p>
<h1 id="page-title">Build your first web project</h1>
<p>Learn by making a page people can actually use.</p>
<a class="button" href="#apply">Explore the program</a>
</section>
<section aria-labelledby="outcomes-title">
<h2 id="outcomes-title">What you will practise</h2>
<ul class="outcomes">
<li>Structure content with HTML</li>
<li>Shape a responsive layout with CSS</li>
<li>Add useful behavior with JavaScript</li>
</ul>
</section>
</main>
<style>
.outcomes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
</style>Criar uma interação acessível
O botão controla a resposta e expõe seu estado com aria-expanded. O botão nativo já funciona pelo teclado; o JavaScript atualiza a resposta visível e o estado anunciado por tecnologias assistivas.
const questions = document.querySelectorAll("[data-faq]");
questions.forEach((question) => {
const button = question.querySelector("button");
const answer = question.querySelector("[data-answer]");
button.addEventListener("click", () => {
const isOpen = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!isOpen));
answer.hidden = isOpen;
});
});Leia e depois adapteAltere um requisito, preveja o resultado e execute o código para conferir. Na revisão, explique a escolha feita e uma melhoria que faria a seguir.