Formation HTML CSS - Créer Pages Web Responsive

Module 1 : Fondamentaux du HTML5

Durée : 5h
Objectif opérationnel : À l'issue de ce module, vous maîtriserez la structure et les balises HTML5.
Contenu :

• Fonctionnement du web : navigateur, serveur, HTTP
• Structure d'un document HTML5 : doctype, head, body
• Balises sémantiques : header, nav, main, article, section, footer
• Texte et typographie : titres, paragraphes, listes
• Liens et navigation : balise a, ancres
• Images et médias : img, figure, video, audio
• Formulaires : input, select, textarea, validation

Mise en pratique : Création de la structure HTML d'un site vitrine
Livrable : Template HTML5 de base

---

Module 2 : Mise en forme avec CSS3

Durée : 5h
Objectif opérationnel : À l'issue de ce module, vous saurez styliser vos pages avec CSS3.
Contenu :

• Syntaxe CSS : sélecteurs, propriétés, valeurs
• Cascade, héritage et spécificité
• Modèle de boîte : margin, padding, border
• Typographie web : polices, tailles, couleurs
• Couleurs et dégradés
• Arrière-plans et bordures
• Pseudo-classes et pseudo-éléments

Mise en pratique : Mise en forme complète du site vitrine
Livrable : Feuille de style CSS réutilisable

---

Module 3 : Mise en page moderne : Flexbox et Grid

Durée : 5h
Objectif opérationnel : À l'issue de ce module, vous maîtriserez les techniques modernes de mise en page.
Contenu :

• Flexbox : concepts, axes, propriétés container et items
• Alignement et distribution avec Flexbox
• CSS Grid : lignes, colonnes, zones
• Positionnement des éléments dans la grille
• Combiner Flexbox et Grid
• Positionnement : relative, absolute, fixed, sticky

Mise en pratique : Création de layouts complexes avec Flexbox et Grid
Livrable : Bibliothèque de layouts réutilisables

---

Module 4 : Responsive Web Design

Durée : 4h
Objectif opérationnel : À l'issue de ce module, vous créerez des sites adaptés à tous les écrans.
Contenu :

• Principes du responsive design
• Media queries : syntaxe et breakpoints
• Approche mobile-first
• Images responsives : srcset, picture
• Unités relatives : em, rem, vw, vh, %
• Tester le responsive : outils de développement

Mise en pratique : Rendre le site vitrine responsive
Livrable : Feuille de style responsive

---

Module 5 : Bonnes pratiques et optimisation

Durée : 2h
Objectif opérationnel : Appliquer les bonnes pratiques de qualité, accessibilité et SEO.
Contenu :

• Accessibilité web (WCAG) : principes et techniques
• SEO on-page : balises meta, structure, sémantique
• Performance : optimisation des images, minification
• Validation du code : W3C validator
• Organisation du code et conventions de nommage (BEM)
• Outils de développement et debugging
• Évaluation des acquis et plan d'action

Mise en pratique : Audit et optimisation du site créé
Livrable : Check-list qualité web et site finalisé