HTML et CSS sont les fondations de tout projet Web. Cette formation vous apprend à créer des pages structurées avec les balises sémantiques modernes et à les mettre en forme avec CSS — custom properties, Flexbox, Grid Layout, container queries. Vous apprendrez aussi à rendre vos pages adaptatives grâce au responsive design et aux media queries modernes, à respecter les fondamentaux d’accessibilité RGAA et à exploiter les outils du développeur DevTools et Lighthouse, ainsi que les frameworks dominants en 2026 que sont Tailwind et Bootstrap.

Public visé

Intégrateurs Web, concepteurs Web, développeurs front et chefs de projets techniques.

Prérequis

Avoir suivi cette formation, ou en maîtriser les thèmes abordés :

Initiation à la programmation

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

Structurer une page avec HTML sémantique et accessible
Appliquer des styles CSS modernes — custom properties, sélecteurs récents
Maîtriser le modèle de boîte et les unités fluides — clamp(), viewport units
Concevoir des layouts avec Flexbox et CSS Grid
Construire des formulaires natifs validés
Adapter une page au responsive — mobile first, media queries modernes, container queries
Respecter les fondamentaux d’accessibilité — RGAA, ARIA
Choisir un framework CSS moderne — Tailwind CSS, Bootstrap
Utiliser les outils du développeur — VS Code, DevTools, Lighthouse, validateurs

Programme

Jour 1 - Matin

Contexte Web et HTML sémantique

Le contexte du Web moderne

comprendre la diversité des terminaux
distinguer périphériques, OS et navigateurs
situer les standards du Web et le modèle evergreen browsers

Travaux pratiques :

Explorer une page existante avec différents user agents et tailles d’écran

Outils du développeur Web

mettre en place un environnement de travail avec VS Code
prévisualiser une page localement avec Live Server
inspecter et modifier une page avec les DevTools du navigateur
versionner ses pages avec Git

Travaux pratiques :

Créer un mini-projet HTML versionné avec Git, le servir via Live Server

Structure d’une page HTML

déclarer un document HTML
renseigner les meta essentielles — viewport, description, Open Graph, theme-color
comprendre la hiérarchie et l’imbrication des éléments

Travaux pratiques :

Écrire le squelette d’une page conforme avec ses meta essentielles

Balises sémantiques

structurer le contenu avec les balises sémantiques de page
utiliser les niveaux de titres avec cohérence
savoir quand utiliser div ou span, et quand préférer une balise sémantique

Travaux pratiques :

Refondre une page constituée uniquement de div en HTML sémantique

Jour 1 - Après-midi

Texte, médias et formulaires

Texte, listes et liens

mettre en forme du texte
structurer des listes ordonnées, non ordonnées et de définitions
créer des liens internes et externes, gérer focus et ciblage avec target et rel

Travaux pratiques :

Rédiger un article structuré avec listes, citations et navigation interne

Tableaux de données

construire un tableau de données
utiliser les tableaux uniquement pour des données tabulaires, jamais pour la mise en page
améliorer l’accessibilité avec scope et headers

Travaux pratiques :

Présenter un planning ou un comparatif sous forme de tableau accessible

Médias

intégrer des images responsives — srcset, sizes, <picture>
intégrer audio et vidéo avec sous-titres via <track>
afficher du SVG inline ou en image

Travaux pratiques :

Enrichir une page avec image responsive, vidéo sous-titrée et icône SVG

Formulaires natifs

choisir le bon type de champ
utiliser les balises de formulaires complémentaires
valider côté client avec les attributs natifs
styliser les états — :user-valid, :user-invalid, :focus-visible

Travaux pratiques :

Construire un formulaire de contact validé sans JavaScript

Jour 2 - Matin

CSS — fondamentaux et boîte

Syntaxe et sélecteurs CSS

comprendre la syntaxe d’une règle CSS
maîtriser les sélecteurs essentiels
exploiter les pseudo-classes courantes — :focus-visible, :nth-child, :has()
regrouper avec :is() et :where()

Travaux pratiques :

Styliser une navigation avec différents sélecteurs et pseudo-classes

Cascade, spécificité et héritage

comprendre la cascade et la spécificité
prévoir l’héritage des propriétés
lier les styles à une page — feuille externe, balise <style>, attribut style

Travaux pratiques :

Résoudre des conflits de cascade dans une page existante

Couleurs, typographie et fonds

exprimer une couleur, dont la notation moderne oklch
gérer la typographie et la hiérarchie des tailles
appliquer des fonds, dégradés et bordures

Travaux pratiques :

Appliquer une charte graphique cohérente à une page de présentation

Custom properties — variables CSS

déclarer et utiliser des custom properties avec var() et fallback
centraliser une charte avec les variables CSS
comprendre la portée et l’héritage des custom properties

Travaux pratiques :

Refondre la charte de la TP précédente en custom properties

Modèle de boîte

maîtriser le modèle de boîte
choisir box-sizing pour des tailles prévisibles
distinguer éléments block, inline et inline-block via display

Travaux pratiques :

Construire une carte produit avec espacement et bordures maîtrisés

Jour 2 - Après-midi

Layouts modernes avec Flexbox et Grid

Flexbox

aligner et distribuer en une dimension
gérer l’espacement avec gap et le retour à la ligne avec flex-wrap
résoudre des patterns courants — barre de navigation, centrage, holy grail

Travaux pratiques :

Reproduire un header complet avec logo, navigation et actions alignés

CSS Grid

composer une grille à deux dimensions
placer des éléments avec grid-area et span
créer des grilles fluides avec minmax(), auto-fit et auto-fill

Travaux pratiques :

Réaliser une galerie d’articles fluide en CSS Grid

Logical properties

abstraire la direction d’écriture avec les logical properties
préparer la i18n et le RTL

Travaux pratiques :

Adapter un layout existant pour fonctionner en LTR et en RTL

Positionnement

comprendre le flux normal
positionner ponctuellement avec les modes de positionnement CSS
limiter l’usage de float au wrap d’images

Travaux pratiques :

Ajouter un menu sticky et un bouton fixe à une page

Jour 3 - Matin

Responsive et accessibilité

Stratégie Mobile First

adopter une approche progressive — base mobile, surcharges au-dessus
éviter les pièges classiques de duplication et de surcharges fragiles

Travaux pratiques :

Convertir un site desktop-first en mobile-first

Media Queries modernes

utiliser la syntaxe range — @media (width >= 768px)
détecter les préférences utilisateur — prefers-color-scheme, prefers-reduced-motion
gérer le viewport via la balise meta

Travaux pratiques :

Ajouter un dark mode automatique et adapter les breakpoints

Unités fluides

choisir les unités selon le contexte, dont les unités viewport modernes comme dvh
composer des valeurs fluides avec clamp() pour la typographie et l’espacement
maîtriser aspect-ratio pour préserver les proportions

Travaux pratiques :

Appliquer une typographie fluide à un article long

Container Queries — introduction

adapter un composant à son conteneur plutôt qu’au viewport avec @container
découvrir un cas d’usage simple

Travaux pratiques :

Rendre une carte produit adaptive selon la largeur de son emplacement

Accessibilité numérique

comprendre le RGAA et les enjeux d’un site accessible
s’appuyer sur la sémantique HTML pour l’accessibilité native
enrichir avec ARIA quand nécessaire
soigner contrastes et focus — :focus-visible
auditer une page avec axe DevTools ou Lighthouse

Travaux pratiques :

Auditer et corriger l’accessibilité d’une page existante

Jour 3 - Après-midi

Frameworks modernes et outillage

Frameworks CSS modernes

situer les frameworks dominants — Tailwind CSS en utility-first et Bootstrap à base de composants
choisir selon le projet
intégrer un framework dans une page existante

Travaux pratiques :

Intégrer Tailwind CSS et reproduire un layout de référence

Outillage de qualité

utiliser les DevTools — responsive mode, computed styles, Grid/Flexbox debugger
mesurer la qualité avec Lighthouse
valider le HTML et le CSS avec les validateurs W3C

Travaux pratiques :

Auditer une page avec Lighthouse et appliquer trois améliorations prioritaires

Bonnes pratiques de production

optimiser les images — formats modernes, dimensions adaptées, lazy loading
minimiser les ressources et soigner le chargement
structurer un projet et ses conventions de nommage

Travaux pratiques :

Projet final : finaliser un mini-site de présentation responsive, accessible et performant, avec audit Lighthouse à l’appui

Modalités d’évaluation des acquis

En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Pour aller plus loin

Cette formation donne accès aux formations suivantes :

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-WEB-100 — HTML, CSS, Responsive - Création de pages Web. Domaine : Développement. Niveau : Initiation. Durée : 3 jours (21 heures). Mots-clés : html, css, responsive, web, frontend, développement, initiation. Cylian Formation, Dijon.