Formation HTML, CSS, Responsive - Création de pages Web

Jour 1 - Matin

Le contexte du Web moderne

• Comprendre la diversité des terminaux : mobile, tablette, desktop, TV, liseuse
• Distinguer périphériques, OS et navigateurs
• Situer les standards du Web : HTML, CSS, JavaScript, evergreen browsers

Exemple de travaux pratiques (à titre indicatif)

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

Structure d'une page HTML

• Déclarer un document HTML : doctype, encodage, langue
• Renseigner les meta essentielles : viewport, description, Open Graph, theme-color
• Comprendre la hiérarchie et l'imbrication des éléments

Exemple de travaux pratiques (à titre indicatif)

• Ecrire le squelette d'une page conforme avec ses meta essentielles

Balises sémantiques

• Structurer le contenu avec header, nav, main, section, article, aside, footer
• Utiliser les niveaux de titres (h1 à h6) avec cohérence
• Savoir quand utiliser div ou span, et quand préférer une balise sémantique

Exemple de travaux pratiques (à titre indicatif)

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

Jour 1 - Après-midi

Texte, listes et liens

• Mettre en forme du texte : paragraphes, citations, code
• Structurer des listes : ordonnées, non ordonnées, de définitions
• Créer des liens internes et externes, gérer le focus et le ciblage (target, rel)

Exemple de travaux pratiques (à titre indicatif)

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

Tableaux de données

• Construire un tableau de données : table, thead, tbody, th, td, caption
• Utiliser les tableaux uniquement pour des données tabulaires (jamais pour la mise en page)
• Améliorer l'accessibilité : scope, headers

Exemple de travaux pratiques (à titre indicatif)

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

Médias

• Intégrer des images responsives : srcset, sizes, picture, attributs alt
• Intégrer audio et vidéo : track et sous-titres
• Afficher du SVG inline ou en image

Exemple de travaux pratiques (à titre indicatif)

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

Formulaires natifs

• Choisir le bon type de champ : text, email, url, tel, number, date, color, range
• Utiliser placeholder, datalist, fieldset et legend
• Valider côté client avec les attributs natifs : required, pattern, min / max
• Styliser les états : :user-valid, :user-invalid, :focus-visible

Exemple de travaux pratiques (à titre indicatif)

• Construire un formulaire de contact validé sans JavaScript

Jour 2 - Matin

Syntaxe et sélecteurs CSS

• Comprendre la syntaxe d'une règle CSS : sélecteur, propriété, valeur
• Maîtriser les sélecteurs essentiels : type, classe, id, descendant, enfant
• Exploiter les pseudo-classes courantes : :hover, :focus-visible, :first-child, :nth-child, :has()
• Regrouper avec :is() et :where()

Exemple de travaux pratiques (à titre indicatif)

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

Cascade, spécificité et héritage

• Comprendre la cascade : origine, ordre, spécificité
• Prévoir l'héritage des propriétés
• Lier les styles à une page : feuille externe, balise style, attribut style

Exemple de travaux pratiques (à titre indicatif)

• Résoudre des conflits de cascade dans une page existante

Couleurs, typographie et fonds

• Exprimer une couleur : noms, hex, rgb, hsl, oklch (introduction)
• Gérer la typographie : font-family, line-height, hiérarchie des tailles
• Appliquer des fonds, dégradés et bordures

Exemple de travaux pratiques (à titre indicatif)

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

Custom properties (variables CSS)

• Déclarer et utiliser des custom properties : --nom, var(), fallback
• Centraliser une charte avec les variables CSS
• Comprendre la portée et l'héritage des custom properties

Exemple de travaux pratiques (à titre indicatif)

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

Le modèle de boîte

• Maîtriser le box model : content, padding, border, margin
• Choisir box-sizing pour des tailles prévisibles
• Distinguer éléments block, inline et inline-block : propriété display

Exemple de travaux pratiques (à titre indicatif)

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

Jour 2 - Après-midi

Flexbox

• Aligner et distribuer en une dimension : flex-direction, justify-content, align-items
• 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

Exemple de travaux pratiques (à titre indicatif)

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

CSS Grid

• Composer une grille à deux dimensions : grid-template-columns, grid-template-rows
• Placer des éléments : grid-area, span
• Créer des grilles fluides : minmax(), auto-fit, auto-fill, fr, gap

Exemple de travaux pratiques (à titre indicatif)

• Réaliser une galerie d'articles fluide en CSS Grid

Positionnement

• Comprendre le flux normal
• Positionner ponctuellement : relative, absolute, fixed, sticky
• Limiter l'usage de float au wrap d'images

Exemple de travaux pratiques (à titre indicatif)

• Ajouter un menu sticky et un bouton fixe à une page

Jour 3 - Matin

Stratégie Mobile First

• Adopter une approche progressive : base mobile, surcharges au-dessus
• Eviter les pièges classiques : duplication, surcharges fragiles

Exemple de travaux pratiques (à titre indicatif)

• Convertir un site desktop-first en mobile-first

Media Queries modernes

• Utiliser la syntaxe range
• Détecter les préférences utilisateur : prefers-color-scheme, prefers-reduced-motion
• Gérer le viewport via la balise meta

Exemple de travaux pratiques (à titre indicatif)

• Ajouter un dark mode automatique et adapter les breakpoints

Unités fluides

• Choisir les unités selon le contexte : rem, em, %, vw, vh, dvh
• Composer des valeurs fluides avec clamp() pour la typographie et l'espacement
• Maîtriser aspect-ratio pour préserver les proportions

Exemple de travaux pratiques (à titre indicatif)

• Appliquer une typographie fluide à un article long

Container Queries (introduction)

• Adapter un composant à son conteneur plutôt qu'au viewport : @container
• Découvrir un cas d'usage simple

Exemple de travaux pratiques (à titre indicatif)

• 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 : états et propriétés
• Soigner contrastes et focus
• Auditer une page avec axe DevTools ou Lighthouse

Exemple de travaux pratiques (à titre indicatif)

• Auditer et corriger l'accessibilité d'une page existante

Jour 3 - Après-midi

Frameworks CSS modernes

• Situer les frameworks dominants : Tailwind CSS (utility-first), Bootstrap (composants)
• Choisir selon le projet : démarrage rapide vs design custom
• Intégrer un framework dans une page existante

Exemple de travaux pratiques (à titre indicatif)

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

Outillage de qualité

• Utiliser les DevTools : inspecteur, responsive mode, computed styles, Grid / Flexbox debugger
• Mesurer la qualité avec Lighthouse : performance, accessibilité, SEO, bonnes pratiques
• Valider le HTML et le CSS avec les validateurs W3C

Exemple de travaux pratiques (à titre indicatif)

• 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 : fichiers, dossiers, conventions de nommage

Exemple de travaux pratiques (à titre indicatif)

• Finaliser un mini-site de présentation responsive, accessible et performant, avec audit Lighthouse à l'appui

Certification (en option)

• Prévoir l'achat de la certification en supplément
• L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
• La durée moyenne est de 1h00