Formation HTML5/CSS3 - Perfectionnement

Objectifs :
• Structurer une page en HTML5 sémantique et accessible pour un web performant et bien référencé.
• Construire des mises en page modernes et responsives avec Flexbox et CSS Grid, en approche mobile-first.
• Styliser une interface avec les fonctionnalités CSS actuelles (variables, dégradés, animations, dark mode).
• Mettre en œuvre les bonnes pratiques d’accessibilité (a11y) et de performance.
• Intégrer et publier un site en ligne, en s’appuyant si besoin sur un assistant de code par IA de manière raisonnée.

Rappel des fondamentaux
• Panorama des langages du web (HTML, CSS, JavaScript ; notions de PHP, bases de données)
• Choisir une approche selon le type de site
• Les standards du web (W3C, WHATWG) et l’état des navigateurs modernes
• La structure d’un document HTML : head, body, métadonnées
• Les balises et pratiques obsolètes à ne plus utiliser

HTML5 sémantique et référencement
• La structure sémantique (header, nav, main, section, article, footer…)
• Structurer pour le référencement naturel (SEO on-page) et les données structurées
• L’intégration de formulaires modernes et leur validation
• Les médias (images responsives, picture, vidéo, audio) et les formats actuels (WebP, AVIF)

CSS moderne : les fondations
• Les sélecteurs avancés et les pseudo-classes
• Le modèle de boîte, les unités modernes (rem, %, vw/vh, clamp)
• Les variables CSS (propriétés personnalisées)
• Les dégradés, ombres et arrondis
• Le positionnement (relatif, absolu, fixe, sticky)

Mise en page moderne et responsive
• Flexbox : alignement et distribution en une dimension
• CSS Grid : mise en page en deux dimensions
• L’approche mobile-first et les media queries (dont container queries)
• Les images et typographies fluides ; les grilles adaptatives

Aller plus loin en CSS
• Les animations et transitions (2D et 3D)
• Le mode sombre (dark mode) et les préférences utilisateur
• Introduction aux méthodes d’organisation du CSS (nommage, découpage)

Accessibilité et performance
• Les fondamentaux de l’accessibilité (a11y) : structure, contrastes, navigation clavier, ARIA
• Le référentiel RGAA / WCAG (sensibilisation)
• L’optimisation des performances (poids, images, chargement)

Typographie pour le web
• Importer et utiliser des polices personnalisées (web fonts, variable fonts)
• La hiérarchie typographique et la lisibilité à l’écran

L’IA comme assistant de code
• Panorama des assistants de code par IA (ex. GitHub Copilot) intégrés à l’éditeur
• Générer, expliquer et corriger (debug) du HTML/CSS avec l’IA
• Bonnes pratiques : relecture, compréhension du code, sécurité et limites
• Droits et responsabilité du code produit

Mise en ligne
• L’hébergement et les noms de domaine
• Le transfert des fichiers (FTP/SFTP) et le déploiement
• Notions d’intégration continue et d’hébergement moderne (aperçu)

Workshop
• Création et intégration complète d’un site HTML5 / CSS3 responsive et accessible, jusqu’à la publication en ligne