HTML5 et CSS3 : structure, mise en page et responsive
Construire des pages web propres, accessibles et adaptées à tous les écrans, de la structure au design.
- Durée
- 21 h · 3 jours
- Niveau
- Débutant
- Format
- Présentiel · Distanciel · Mixte
- Effectif max.
- 12 participants
Présentation
Ce programme apprend à construire des pages web de A à Z avec HTML5 et CSS3. On part de la structure sémantique d’une page, on met en forme avec les feuilles de style, puis on rend l’ensemble adaptable aux mobiles, tablettes et ordinateurs. La dernière journée est consacrée au responsive design, à l’accessibilité et aux outils qui permettent de contrôler la qualité d’un site avant sa mise en ligne.
À qui s’adresse ce programme
- Futurs développeurs web et personnes en reconversion
- Chargés de communication ou de marketing qui modifient des pages web
- Étudiants et autodidactes qui veulent consolider leurs bases
Prérequis
- Savoir utiliser un ordinateur, un navigateur et un éditeur de texte
- Aucune connaissance en programmation requise
Objectifs pédagogiques
- Structurer une page avec les balises sémantiques de HTML5
- Insérer textes, listes, liens, tableaux, images et médias
- Créer des formulaires et contrôler leur saisie
- Mettre en forme avec les sélecteurs, la cascade, Flexbox et Grid
- Adapter une page à tous les écrans avec une approche mobile first
- Vérifier l’accessibilité et la qualité d’un site avant publication
Programme détaillé
6 modules · 21 h · 3 jours
Structurer une page avec HTML5
- Anatomie d’une page : doctype, en-tête, corps, métadonnées
- Balises sémantiques : header, nav, main, section, article, footer
- Titres, paragraphes, listes et liens
- Images responsives, audio, vidéo et SVG
- Validation du code avec les outils du W3C
Créer la structure d’une page de présentation avec ses contenus.
Tableaux et formulaires
- Tableaux de données accessibles
- Champs, étiquettes et types de saisie HTML5
- Validation native sans JavaScript
- Regrouper et organiser les champs
- Messages d’aide et accessibilité des formulaires
Construire un formulaire complet avec contrôles de saisie natifs.
Les bases de CSS3
- Lier une feuille de style et écrire une règle
- Sélecteurs, pseudo-classes et spécificité
- Cascade, héritage et organisation du code
- Couleurs, typographie et arrière-plans
- Variables CSS pour centraliser un thème
Mettre en forme la page de présentation avec une charte graphique simple.
Mise en page : boîtes, Flexbox et Grid
- Modèle de boîte, marges, bordures et affichage
- Positionnement : static, relative, absolute, sticky
- Flexbox : aligner et répartir les éléments
- CSS Grid : composer une page en grille
- Choisir entre Flexbox et Grid
Réaliser une mise en page complète avec en-tête, contenu et pied de page.
Responsive design et mobile first
- Principes du mobile first et du viewport
- Media queries et préférences de l’utilisateur
- Unités fluides, clamp() et ratios d’image
- Introduction aux container queries
- Adapter menus, images et grilles
Adapter la page à trois tailles d’écran.
Accessibilité, frameworks et qualité
- Bases de l’accessibilité : contrastes, ARIA, navigation clavier
- Aperçu de Tailwind CSS et de Bootstrap
- Outils de contrôle : DevTools, Lighthouse, validateurs
- Optimisation des images et des ressources
- Organisation d’un projet avant la mise en ligne
Auditer une page et corriger les principaux défauts relevés.
Outils et technologies
Méthodes pédagogiques
- Alternance d’exposés courts et de travaux pratiques
- Démonstrations en direct par le formateur
- Projet fil rouge construit au fil des modules
- Corrections collectives et échanges sur les bonnes pratiques
Évaluation
- Exercices pratiques corrigés à chaque module
- Mini-projet réalisé en fin de formation
- Quiz de validation des acquis
Matériel requis
- Un ordinateur avec une connexion internet
- Un éditeur de code (Visual Studio Code) et un navigateur récent
Ressources fournies
- Support de cours et dépôt d’exercices corrigés
- Aide-mémoire HTML et CSS
- Banque d’images et de maquettes pour les exercices
Débouchés
- Une page web complète, responsive et accessible
- Autonomie pour intégrer une maquette
- Socle pour apprendre JavaScript
Les cours vidéo associés
Mes cours en vidéo qui accompagnent ce programme : pour préparer la formation ou réviser ensuite. Accès gratuit avec un compte.
