#Web frontend : structure, style, comportement
Une interface réussie se juge à trois choses : le HTML dit ce que contient la page, le CSS la rend lisible partout, le JavaScript enrichit sans casser. Ce module suit exactement cet ordre : sémantique d'abord, mise en forme ensuite, comportement enfin, puis mesure continue (accessibilité, performance) et outillage. Chaque chapitre part d'un comportement observable dans le navigateur et en déduit les techniques.
#Prérequis
- Savoir créer des fichiers et ouvrir une page locale dans un navigateur (un serveur statique simple suffit pour débuter).
- Bases de programmation : variables, conditions, fonctions (utile dès le chapitre JavaScript).
- Aucune notion de design graphique n'est requise.
#Objectifs
- Écrire un document HTML sémantique et des formulaires utilisables au clavier.
- Composer des mises en page Flexbox et Grid, responsives, compatibles thème sombre.
- Ajouter du comportement avec un budget JavaScript maîtrisé et des erreurs annoncées.
- Mesurer LCP, INP et CLS puis corriger les goulots principaux.
- Installer un workflow (formatage, lint, tests, CI) qui protège chaque commit.
#Fil rouge du module
Un même mini-projet traverse les chapitres : un formulaire d'inscription, écrit en HTML sémantique, stylé sobrement, validé côté client avec annonces ARIA, puis mesuré avec et sans bibliothèque lourde. À la fin du parcours, vous saurez justifier chaque octet embarqué et chaque attribut que vous écrivez.
#Mini-atelier d'entrée
Reprenez ce formulaire d'inscription : champs email et mot de passe avec labels liés, attribut required, validation côté client, message d'erreur annoncé dans une zone aria-live. Mesurez ensuite le chargement avec la DevTools Network (throttling 4G), puis ajoutez une bibliothèque UI complète et recommencez la mesure. Comparez le poids total et le LCP : c'est la première décision d'arbitrage coût/bénéfice que ce module vous apprendra à documenter.