← Web Dev
🎨

HTML5 & CSS3 : Structurer & Styliser

Débutant
🧠Comprendre en lisant n'est pas savoir écrire.🧠Un module est fini quand tu peux le reproduire fenêtre fermée.🧠Écris le problème en français avant d'écrire du code.🧠Une question impossible cache trois questions faciles.🧠Retape le code à la main. Puis referme et réécris-le.🧠Essaie d'abord, cherche ensuite.🧠Cherche « comment on écrit ça », jamais « qu'est-ce que je dois faire ».🧠Pour comprendre du code, casse-le.⌨️Une fonction qui plante sur un cas limite n'est pas finie.⌨️Si un bloc a un nom clair, il mérite d'être une fonction.⌨️Savoir lire une erreur vaut plus que connaître dix méthodes.⌨️Diagnostiquer, c'est éliminer dans l'ordre — pas essayer au hasard.⌨️Une optimisation sans mesure avant/après est une croyance.🔍Regarde le fichier avant de le charger.🔍Une performance anormalement bonne est une hypothèse à réfuter.🔍Cette valeur existe-t-elle à l'instant où je dois prédire ?🔍fit sur le train, transform partout.🔍Un chiffre qu'on ne sait pas raconter est un chiffre qu'on n'a pas compris.🔍Un graphique sans question n'a rien à dire.🤖Un score d'entraînement parfait n'est jamais une bonne nouvelle.🤖Le jeu de test ne se regarde qu'une fois.🤖Plus tu essaies de configurations, plus ton meilleur score est optimiste.🤖Un seuil de décision est un arbitrage économique, pas un réglage technique.🤖Commence toujours par une baseline. Note son score.🤖Le meilleur modèle n'est pas le plus précis, c'est celui qu'on peut maintenir.🚀Un modèle en production n'est pas un livrable, c'est un système vivant.🚀Un secret publié est un secret compromis.🚀Pour chaque permission : que se passe-t-il si cette machine est compromise ?🚀Un post-mortem qui cherche un coupable ne produit aucune amélioration.🚀« Nous n'utilisons pas cette variable » n'est pas une garantie d'équité.🚀Rends l'arbitrage explicite et chiffré. Ne le tranche pas en silence.🚀Un résultat qu'on ne sait pas reproduire est une anecdote.

🎯 Objectifs d'apprentissage

À l'issue de ce module, tu seras capable de :

  • 01Structurer une page avec du HTML sémantique et accessible
  • 02Construire des mises en page responsives avec Flexbox et Grid
  • 03Atteindre un score d'accessibilité supérieur à 90 sur Lighthouse

Prérequis

Aucun

📖 Lectures de référence

Sélection d'expert — les ressources gratuites sont signalées.

MDN Web Docs — Learn Web Development

Gratuit

Mozilla

Gratuit, en français, et c'est la documentation que les développeurs professionnels consultent quotidiennement.

Every Layout

Payant

Bell & Andrew

~60 €. Change durablement la façon de penser la mise en page CSS. Rentabilisé dès le premier projet.

HTML5 : sémantique et structure

⏱ 50 min

HTML (HyperText Markup Language) définit la structure d'une page web. HTML5 introduit des balises sémantiques qui donnent du sens au contenu.

Structure d'une page HTML5 complète

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeGraft Academy</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <a href="/">Accueil</a>
      <a href="/parcours">Parcours</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Introduction au Machine Learning</h1>
      <p>Le ML permet aux machines d'apprendre depuis les données.</p>
    </article>
    <aside>Ressources complémentaires</aside>
  </main>
  <footer>© 2026 CodeGraft Academy</footer>
</body>
</html>

Balises sémantiques clés : <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.

Formulaires — essentiels pour les applications :

<form action="/submit" method="POST">
  <input type="email" name="email" required placeholder="ton@email.com">
  <input type="password" name="mdp" minlength="8">
  <select name="niveau">
    <option value="debutant">Débutant</option>
    <option value="avance">Avancé</option>
  </select>
  <button type="submit">S'inscrire</button>
</form>

Ressource : MDN Web Docs (référence absolue) — https://developer.mozilla.org/fr/docs/Web/HTML

✍️ Exercices de la leçon

2 exercices

Fais-les dans l'ordre, dans un vrai fichier .py — pas dans ta tête. Ne déplie la correction qu'après avoir écrit quelque chose, même faux.

🔧

Exercice A — Une page projet en HTML sémantique

Application directe · Tu appliques ce que tu viens de lire.

Crée une page HTML5 complète présentant un projet ML : titre, description, métriques obtenues, auteur, et un formulaire de contact.

Contraintes :
1. structure sémantique complète — header, nav, main, article, aside, footer
2. un seul h1 sur la page, et une hiérarchie de titres sans trou (pas de h3 sans h2 au-dessus)
3. chaque champ du formulaire associé à son label
4. lang="fr" et la balise viewport

Passe ensuite la page au [validateur du W3C](https://validator.w3.org/) : elle doit sortir sans erreur.

🎯

Exercice B — Sortir de la soupe de div

Page blanche · Aucun squelette : à toi de choisir la méthode.

Page blanche. Refonte et démonstration.

Voici une page qui « marche » visuellement :

<div class="top">
  <div class="menu">
    <div class="lien" onclick="go('/')">Accueil</div>
    <div class="lien" onclick="go('/blog')">Blog</div>
  </div>
</div>
<div class="contenu">
  <div class="gros-titre">Mon article</div>
  <div class="texte">Le contenu de l'article…</div>
  <div class="petit-titre">Commentaires</div>
</div>
<div class="bas">© 2026</div>
  1. 1.réécris-la en HTML sémantique
  2. 2.prouve que ta version est meilleure — trouve au moins trois différences concrètes et vérifiables
  3. 3.teste la navigation au clavier uniquement, sans souris, sur les deux versions
  4. 4.explique pourquoi onclick sur un div est un problème et pas seulement un choix de style

Le point 3 est le cœur de l'exercice. Débranche ta souris pour de vrai.

🤖

Question sur cette leçon ? Clique sur 💬 Demander au tuteur en bas à droite.