STRUCTURE HTML5 ET SÉMANTIQUE

• Anatomie d'une page HTML : doctype, head, body, balises essentielles
• Balises sémantiques : header, nav, main, section, article, footer, aside
• Formulaires HTML5 : input types, validation native, accessibilité
• Liens, images, tableaux : bonnes pratiques et attributs d'accessibilité
• Atelier : création du squelette HTML d'une page de présentation

CSS3 ET MISE EN FORME

• Sélecteurs CSS : éléments, classes, IDs, pseudo-classes, pseudo-éléments
• Modèle de boîte : margin, padding, border, box-sizing
• Typographie : font-family, font-size, line-height, Google Fonts
• Couleurs, dégradés, ombres : rgb/hsl, gradients, box-shadow
• Atelier : mise en forme complète de la page créée en HTML

MISE EN PAGE RESPONSIVE

• Flexbox : axes, alignement, flex-wrap, order — cas d'usage courants
• CSS Grid : colonnes, lignes, areas, gap — layouts complexes en quelques lignes
• Media queries : breakpoints mobiles/tablette/desktop, approche mobile-first
• Images responsives : srcset, sizes, object-fit pour les images adaptatives
• Atelier : transformation d'un layout fixe en layout 100% responsive

PROJET ET ÉVALUATION FINALE

• Livrable : page web responsive complète (landing page ou portfolio)
• Format : présentation dans le navigateur sur desktop et mobile (DevTools)
• Critères : sémantique HTML, CSS propre, responsive, accessibilité basique
• Correction collective : revue du code et bonnes pratiques partagées
• Bilan : prochaines étapes JavaScript, frameworks CSS, outils de build

Apprentissage progressif de la structure web vers le responsive design
→ construction d’une page de base jusqu’à un site adapté à tous les écrans

Mise en pratique immédiate de chaque notion (HTML, CSS, Flexbox, Grid…)
→ application directe après chaque concept abordé

Approche orientée création de page web réelle
→ réalisation d’interfaces proches de projets professionnels (landing page, portfolio…)

Résolution de problématiques d’affichage et d’adaptation multi-écrans
→ mise en place du responsive design et optimisation des layouts

Montée en complexité jusqu’à une page web complète et responsive
→ production d’un livrable final fonctionnel, structuré et accessible