HTML – CSS

Créer des pages web accessibles et responsive en HTML/CSS, de la structure sémantique aux mises en page modernes et à l’optimisation.

Durée : 

21 à 35 heures
Présentiel ou classe virtuelle

Intra-Entreprise : Tarif identique de 1 à 12 participants

Objectifs Pédagogiques & Opérationnels

  • Structurer une page avec un HTML sémantique (titres, sections, formulaires) pour améliorer accessibilité, SEO et maintenabilité.

  • Mettre en forme avec CSS en maîtrisant la cascade, la spécificité et l’organisation des styles.

  • Réaliser des mises en page modernes (Flexbox, Grid) et construire un responsive fiable (mobile-first, breakpoints).

  • Gérer images, typographies et composants UI (boutons, cartes, navigation) avec des règles de lisibilité et de cohérence.

  • Intégrer les bonnes pratiques d’accessibilité (navigation clavier, contrastes, labels, structure) et de qualité front.

  • Optimiser la performance perçue et préparer des pages prêtes à intégrer dans un projet (naming, méthodes, validations).

Description

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

Évaluation & Suivi des Acquis

Feuille de Présence

Émargement des stagiaires en présentiel ou à distance, via support papier ou signature électronique.

Émargement sécurisé

Signatures électroniques collectées en ligne et conservées dans un coffre-fort numérique sécurisé par Dendreo.

Auto-positionnement

Évaluation du niveau des stagiaires en début et en fin de formation pour mesurer la progression.

Évaluations pédagogiques

Validation des acquis par des questions orales ou écrites tout au long de la formation.

Mises en situation

Exercices pratiques et cas concrets pour ancrer les compétences dans la réalité métier.

Attestation de fin de formation

Remise d’une attestation officielle à l’issue de la formation.

William

William

Répond généralement en moins de 5 minutes

I will be back soon

William
C’est William, votre conseiller pédagogique chez Mill-Forma.
Comment puis-je vous aider ?
WhatsApp Mill Forma