Développement IT
Formation 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.
Format
Intra-entreprise
Durée recommandée
≈ 21 à 35 heures
Démarrage
Sous 15 jours
Sur-mesure
Programme co-construit avec le formateur
Mis à jour le
Pour qui ?
- ›Débutants en intégration web, webdesigners, créateurs de contenu et chargés de communication souhaitant comprendre et maîtriser le code des pages.
- ›Développeurs front débutants voulant consolider les fondamentaux (sémantique, responsive, mises en page).
- ›Designers UI/UX souhaitant mieux collaborer avec les équipes techniques et comprendre les contraintes d’implémentation.
Prérequis
- ›Aucun prérequis obligatoire. Être à l’aise avec l’ordinateur et le web est recommandé.
Objectifs pédagogiques
- ›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).
Programme détaillé
8 modules, construits autour de vos cas réels.
Durée recommandée ≈ 21 à 35 heures, modulable selon le rythme du groupe et vos contraintes intra-entreprise.
01Fondamentaux du web et structure HTML
Chapitres- Comprendre le fonctionnement d'une page web : rôle du navigateur, du DOM et du rendu des ressources
- Structurer un document HTML : doctype, head, meta charset et viewport
- Identifier les balises sémantiques header, nav, main, section, article et footer
- Construire une hiérarchie de titres cohérente du H1 au H6 et repérer les erreurs courantes
- Maîtriser liens, listes et médias avec leurs règles d'usage et de lisibilité
- Créer une page de référence structurée et la valider
02Contenus riches, formulaires et accessibilité de base
Chapitres- Intégrer des images avec attribut alt, figure et figcaption, formats web adaptés et dimensions maîtrisées
- Structurer un tableau de données avec thead, tbody et critères de lisibilité
- Construire un formulaire avec input, label, fieldset, legend, types et validation HTML native
- Rédiger des messages d'erreur clairs et une aide contextuelle utile à l'utilisateur
- Mettre en place une navigation clavier accessible : gestion du focus et principes ARIA
03CSS : cascade, sélecteurs et organisation des styles
Chapitres- Comprendre cascade, héritage et spécificité pour expliquer un style qui ne s'applique pas
- Exploiter les sélecteurs : classes, combinateurs et pseudo-classes hover, focus, nth-child
- Maîtriser le modèle de boîte : margin, padding, border, box-sizing et gestion de l'overflow
- Choisir les bonnes unités : px, em, rem, pourcentage, vw, vh et clamp
- Définir des variables CSS pour centraliser couleurs et espacements
- Construire une base CSS réutilisable et organisée
04Typographie, couleurs et composants UI
Chapitres- Configurer la typographie web : font-family, polices de repli, échelle typographique et lisibilité
- Gérer les couleurs et les contrastes selon les états hover, active et disabled
- Styliser des composants : boutons, liens, cartes, badges et alertes
- Intégrer des icônes en comparant SVG et font icons selon les besoins
- Mettre en place états et micro-interactions : transitions, focus visible et retour utilisateur
05Mises en page modernes avec Flexbox
Chapitres- Comprendre la logique Flex : axes, alignement, distribution et wrap
- Appliquer Flexbox aux cas courants : navigation, colonnes, cartes et alignements verticaux
- Gérer les espacements avec gap, marges automatiques et align-self
- Identifier les pièges fréquents liés à flex-basis, shrink et grow
- Mettre en place des stratégies de layout responsive simples avec Flexbox
- Construire une grille de cartes responsive pour ancrer la méthode
06Mises en page avancées avec CSS Grid
Chapitres- Maîtriser les concepts Grid : lignes, colonnes, zones, fractions et minmax
- Construire des gabarits de page complets avec grid-template-areas
- Rendre une grille adaptative avec auto-fit et auto-fill
- Choisir entre Flex et Grid selon le composant ou le layout visé
- Assembler un layout de page complet avec header, main, aside et footer
07Responsive design et compatibilité multi-écrans
Chapitres- Adopter l'approche mobile-first : breakpoints et amélioration progressive
- Écrire des media queries sur largeur, orientation et préférences utilisateur dark mode ou reduce motion
- Mettre en place des images responsives avec srcset, sizes, object-fit et formats modernes
- Prioriser et réorganiser le contenu pour éviter la surcharge sur petit écran
- Tester les rendus avec les outils responsive et repérer les cassures de mise en page
- Adapter une page desktop existante en version mobile-first
08Qualité front : performance, SEO et accessibilité avancée
Chapitres- Optimiser la performance : CSS critique, limitation des reflows et poids des assets
- Renforcer l'accessibilité : contrastes, gestion du focus, landmarks et erreurs de formulaire
- Travailler le SEO on-page : sémantique, titres, balises meta et maillage interne
- Structurer la maintenance avec une convention de nommage BEM et une architecture CSS claire
- Valider le code avec les validateurs HTML et CSS et conduire un audit Lighthouse
Moyens & supports pédagogiques
- Accueil des stagiaires
- Supports de formation projets
- Apports théoriques et pratiques
- Études de cas concrets
- Auto-positionnement
- Accès en ligne aux ressources
É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.
Délai d’accès
Sous 15 jours après validation du devis
Accessibilité PSH
Adaptations possibles en situation de handicap. En savoir plus
Prochaine étape
Construire votre formation HTML - CSS
Un échange de 20 minutes suffit pour cadrer vos enjeux et la session. Devis personnalisé sous 48h, démarrage sous 15 jours.
- Réponse sous 24h ouvrées
- 01 85 71 00 29
Pour aller plus loin
