Axe 5 — Frontend : HTML & CSS
🎯 Objectif global : maîtriser les fondations visuelles du web — sémantique, accessibilité, responsive.
Prérequis
Section intitulée « Prérequis »Axes 1, 2 et 4.
Objectifs
Section intitulée « Objectifs »À l'issue de cet axe, tu sauras :
- Écrire du HTML sémantique et accessible (ARIA, navigation clavier)
- Maîtriser Flexbox et CSS Grid pour toute mise en page
- Construire un design responsive mobile-first avec media et container queries
- Atteindre un score Lighthouse > 95 sur les 4 axes
- Choisir entre BEM, ITCSS, utility-first (Tailwind)
Contenu de l’axe
Section intitulée « Contenu de l’axe » 5.1 — HTML sémantique Structure, sectionnement, formulaires, médias, ARIA, OpenGraph, données structurées.
5.2 — CSS moderne Sélecteurs, box model, Flexbox, Grid, responsive, variables, animations, méthodologies.
5.3 — Accessibilité (a11y) WCAG 2.2 AA, contraste, clavier, lecteurs d'écran, axe-core, patterns accessibles.
Projet de l’axe
Section intitulée « Projet de l’axe »Refonte Lighthouse — partir d’une page volontairement catastrophique (que des <div>, outline: none, contraste #aaa sur blanc, formulaire sans <label>…) et la réécrire pour atteindre ≥ 95 sur les 4 axes Lighthouse. Mesure automatisée via Chrome headless + Lighthouse CI.
Ressources clés
Section intitulée « Ressources clés »- MDN — HTML et CSS — developer.mozilla.org
- CSS in Depth — Keith J. Grant
- web.dev/learn/ — Google
- A Complete Guide to Flexbox / Grid — CSS-Tricks
- Refactoring UI — Adam Wathan & Steve Schoger
- A11y Project — a11yproject.com