Commencer par le sens et la structure
Le HTML ne sert pas seulement à placer du texte à l’écran. Les titres, repères, liens, listes et formulaires indiquent aux personnes comme aux navigateurs l’organisation d’une page. Une structure documentaire réfléchie facilite la navigation, la maintenance et l’évolution du contenu.
Adapter la mise en page à chaque écran
Le CSS transforme cette structure en expérience visuelle. Vous pratiquerez les espacements, la hiérarchie et les mises en page responsives pour garder une lecture confortable sur un téléphone comme sur un grand écran. Il ne s’agit pas de réduire une composition de bureau, mais de faire évoluer le contenu naturellement.
Ajouter des interactions sans perdre en clarté
Les bases de JavaScript introduisent l’interaction : répondre aux actions, actualiser l’interface et relier le comportement au contenu. L’accessibilité et le SEO deviennent ensuite des vérifications concrètes : la page est-elle navigable et sa structure compréhensible pour les moteurs de recherche ? L’étape réunit ces bases dans des pages propres et responsives.
Du concept au code qui fonctionne
Ces extraits montrent comment les notions de chaque niveau prennent forme dans un projet. Ils servent de points de départ à lire, questionner, adapter et tester — pas de code à copier sans le comprendre.
Donner du sens à la structure
La page utilise une zone principale, une hiérarchie de titres et une vraie liste. La grille CSS combine minmax() et auto-fit pour réorganiser les cartes selon l’espace disponible au lieu d’imposer une mise en page de bureau.
<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>Rendre une interaction accessible
Le bouton contrôle sa réponse et expose son état avec aria-expanded. Le bouton HTML natif fonctionne déjà au clavier ; JavaScript met à jour l’affichage et l’état annoncé aux technologies d’assistance.
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;
});
});Lisez, puis adaptezModifiez une exigence, prévoyez le résultat, puis exécutez le code pour vérifier. En revue, expliquez le compromis choisi et une amélioration que vous apporteriez ensuite.