Module 1 — Fondamentaux du web et structure HTML
- Comment fonctionne une page web : navigateur, DOM, ressources, rendering (bases)
- Structure d’un document : doctype, head, meta, charset, viewport
- Balises sémantiques : header, nav, main, section, article, footer
- Hiérarchie des titres : H1–H6, logique de document, erreurs fréquentes
- Liens, listes, médias : bonnes pratiques d’usage et de lisibilité
- Mise en application encadrée : créer une page structurée “propre” et cohérente
Module 2 — Contenus, formulaires et accessibilité de base
- Images : alt, figure/figcaption, formats web, dimensions
- Tableaux : quand les utiliser, structure thead/tbody, lisibilité
- Formulaires : input, label, fieldset/legend, types, validation HTML
- Messages d’erreur : principes UX, clarté, aide contextuelle
- Accessibilité : navigation clavier, focus, aria (principes), pièges courants
- Mise en application encadrée : construire un formulaire accessible (contact/inscription)
Module 3 — CSS : cascade, sélecteurs et organisation des styles
- Cascade, héritage et spécificité : comprendre pourquoi “ça ne marche pas”
- Sélecteurs : classes, combinators, pseudo-classes (:hover, :focus, :nth-child)
- Modèle de boîte : margin/padding/border, box-sizing, overflow
- Unités : px, em, rem, %, vw/vh, clamp() (principes)
- Variables CSS : définir des tokens simples (couleurs, espacements)
- Mise en application encadrée : mettre en place une base CSS réutilisable
Module 4 — Typographie, couleurs et composants UI
- Typographie web : font-family, fallback, lisibilité, échelle typographique
- Couleurs : contrastes, états (hover/active/disabled), cohérence de palette
- Styles de composants : boutons, liens, cartes, badges, alertes
- Icônes : SVG vs font icons, bonnes pratiques d’intégration
- États et micro-interactions : transitions, focus visible, feedback utilisateur
- Mise en application encadrée : construire un mini-kit UI (3–5 composants)
Module 5 — Mises en page modernes : Flexbox
- Logique Flex : axes, alignement, distribution, wrap
- Cas d’usage : navigation, colonnes, cartes, alignements verticaux
- Gestion des espacements : gap, marges, auto, align-self
- Pièges fréquents : largeur, flex-basis, shrink/grow
- Stratégies de layouts responsives simples avec Flexbox
- Mise en application encadrée : créer une grille de cartes responsive avec Flex
Module 6 — Mises en page avancées : CSS Grid
- Concepts Grid : lignes/colonnes, zones, fractions (fr), minmax()
- Gabarits : grid-template-areas, layouts de page complets
- Responsive avec Grid : auto-fit/auto-fill, grilles adaptatives
- Combiner Flex + Grid : critères de choix selon composants/layout
- Gestion de la densité : alignements, espaces, équilibre visuel
- Mise en application encadrée : construire un layout page complet (header/main/aside/footer)
Module 7 — Responsive design et compatibilité multi-écrans
- Approche mobile-first : breakpoints, progressive enhancement
- Media queries : largeur, orientation, préférences utilisateur (dark mode, reduce motion)
- Images responsives : srcset/sizes (principes), object-fit, formats modernes
- Stratégies de contenu : prioriser, réorganiser, éviter la surcharge
- Tests : outils responsive, check-lists, détection des cassures
- Mise en application encadrée : adapter une page desktop en version mobile-first
Module 8 — Qualité front : performance, SEO, accessibilité (niveau avancé)
- Performance : CSS critique (principes), limiter les reflows, poids des assets
- Accessibilité : contrastes, focus management, landmarks, erreurs formulaires
- SEO on-page : sémantique, titres, meta, maillage (bases)
- Bonnes pratiques de maintenance : naming (BEM), architecture CSS, composants
- Validation : HTML/CSS validators, audits (Lighthouse – principes)
- Mise en application encadrée : audit rapide d’une page + plan de corrections






