Cours HTML5 et CSS3

Leçon 1 • Introduction aux rôles du HTML et du CSS

Distingue la structure (HTML), la présentation (CSS) et le comportement (JavaScript) comme des préoccupations distinctes. Définit les attentes pour l'ensemble du cours.

Leçon 2 • Comment fonctionne le Web

Couvre les cycles requête-réponse HTTP, la résolution DNS et les pipelines de rendu des navigateurs. Ancre tout le travail ultérieur sur le HTML/CSS dans le comportement réel du navigateur.

Leçon 3 • Configuration de votre environnement de développement

Installe et configure un éditeur de code, les outils de développement du navigateur et un serveur de fichiers local. Garantit que chaque étudiant dispose d'un espace de travail cohérent et productif.

Leçon 1 • Règles de syntaxe et anatomie HTML5

Explique les balises, les attributs, les règles d'imbrication et la déclaration DOCTYPE. Une syntaxe correcte évite les problèmes de rendu en mode quirks du navigateur.

Leçon 2 • Éléments de contenu textuel

Enseigne les titres, les paragraphes, les listes, les citations en bloc et les éléments de texte en ligne. Les étudiants structurent un contenu lisible et sémantiquement significatif.

Leçon 3 • Tableaux et présentation des données

Construit des tableaux de données accessibles à l'aide des éléments thead, tbody, th et td. Renforce le HTML sémantique en réservant les tableaux strictement aux données tabulaires.

Leçon 4 • Liens et images

Couvre les balises d'ancrage, les valeurs href, les attributs target et l'élément img avec le texte alt. Ces éléments forment l'épine dorsale des pages Web navigables et visuelles.

Leçon 1 • Notions de base des formulaires HTML5

Couvre l'élément form, les attributs action et method, et les types de saisie de base. Les formulaires sont le mécanisme principal de soumission de données utilisateur.

Leçon 2 • Select, Textarea et Fieldset

Construit des menus déroulants, des zones de texte multi-lignes et des contrôles de formulaire regroupés. Fieldset et legend améliorent l'accessibilité et le regroupement logique des formulaires.

Leçon 3 • Éléments de repère sémantiques

Introduit header, nav, main, article, section, aside et footer. Le balisage sémantique améliore l'accessibilité et l'indexation par les moteurs de recherche.

Leçon 4 • Types de saisie et attributs avancés

Explore les types de saisie HTML5 : date, range, color, tel et number. Les types de saisie natifs réduisent la dépendance à JavaScript et améliorent l'expérience utilisateur mobile.

Leçon 1 • Le modèle de boîte CSS

Définit les zones de contenu, de remplissage, de bordure et de marge ainsi que leur effet sur le dimensionnement des éléments. La maîtrise du modèle de boîte est un prérequis à tout travail de mise en page.

Leçon 2 • Spécificité, héritage et cascade

Explique comment les navigateurs résolvent les règles conflictuelles à l'aide de scores de spécificité et de l'ordre source. Maîtriser la cascade empêche les surcharges de style inattendues.

Leçon 3 • Syntaxe CSS et méthodes de liaison

Couvre les ensembles de règles, les déclarations, les styles en ligne, les blocs de style internes et les feuilles de style externes. Les feuilles de style externes sont établies comme la norme professionnelle.

Leçon 4 • Couleurs, unités et bases de la typographie

Couvre les valeurs de couleur hexadécimales, RVB, TSL et les unités CSS absolues vs relatives. L'utilisation cohérente des unités rem et em prend en charge une typographie évolutive et accessible.

Leçon 1 • Combinaison de Flexbox et Grid

Montre quand imbriquer Flexbox dans les cellules Grid et vice versa. Les étudiants construisent une mise en page de page complète en utilisant les deux systèmes de manière appropriée.

Leçon 2 • Placement dans la grille et zones nommées

Enseigne le placement basé sur les lignes, la syntaxe span et grid-template-areas pour les régions nommées. Les zones nommées rendent les mises en page complexes lisibles et maintenables.

Leçon 3 • Alignement et ordonnancement Flexbox

Couvre les propriétés justify-content, align-items, align-self et order. Ces propriétés permettent un contrôle précis de la distribution et de l'empilement des éléments.

Leçon 4 • Fondamentaux de Flexbox

Introduit le modèle du conteneur flexible et de l'élément flexible, les axes et la propriété flex-direction. Flexbox résout élégamment les problèmes d'alignement unidimensionnels.

Leçon 1 • Typographie et espacement réactifs

Applique les échelles d'espacement fluides avec clamp, les unités vw et les échelles d'espacement fluides à la typographie et aux espaces de mise en page. La composition fluide élimine le besoin de multiples remplacements de points de rupture.

Leçon 2 • Syntaxe des requêtes média et points de rupture

Enseigne la syntaxe @media, les types de médias et les opérateurs logiques pour définir les points de rupture. Les points de rupture doivent refléter les besoins du contenu, pas les tailles d'appareil spécifiques.

Leçon 3 • Principes de conception adaptative

Couvre les grilles fluides, les images flexibles et la balise méta viewport comme les trois piliers de la conception adaptative (RWD). Ces principes guident chaque décision de mise en page dans ce chapitre.

Leçon 4 • Images et médias réactifs

Utilise les attributs srcset, sizes et l'élément picture pour servir des images de taille appropriée. Une diffusion correcte des images réduit le poids de la page sur les réseaux mobiles.

Leçon 1 • Performance et accessibilité des animations

Identifie les propriétés composites, évite les animations déclenchant une mise en page et respecte prefers-reduced-motion. Une conception de mouvement responsable sert tous les utilisateurs.

Leçon 2 • Transformations CSS

Applique les transformations translate, rotate, scale et skew en 2D et 3D. Les transformations sont accélérées par le GPU et ne déclenchent pas de reflux de mise en page.

Leçon 3 • Propriétés personnalisées CSS

Définit et consomme des variables CSS pour les jetons de couleurs, d'espacement et de typographie. Les propriétés personnalisées permettent des changements à l'échelle du thème à partir d'une seule déclaration.

Leçon 4 • Animations par étapes clés CSS

Construit des animations multi-étapes à l'aide de @keyframes, animation-name et des propriétés d'animation. Les animations par étapes clés s'exécutent indépendamment de l'interaction utilisateur.

Leçon 1 • Application du système de conception CSS

Implémente des propriétés personnalisées, une échelle typographique et des styles de composants sur toutes les pages. Un système de conception partagé garantit une cohérence visuelle à l'échelle du site.

Leçon 2 • Planification et maquettage du projet

Définit les objectifs du site, l'inventaire du contenu et les maquettes basse fidélité avant d'écrire le code. La planification empêche les réécritures structurelles et l'élargissement du périmètre pendant le développement.

Leçon 3 • Implémentation d'une mise en page réactive

Applique les mises en page Grid et Flexbox avec des requêtes média mobile-first sur toutes les pages. Chaque page doit s'afficher correctement pour des largeurs de fenêtre d'affichage de 320 px à 1440 px.

Leçon 4 • Audit d'accessibilité et finition finale

Exécute des vérifications d'accessibilité automatisées et manuelles, corrige les problèmes de contraste et ajoute des préférences de mouvement. Le site final respecte les normes de contraste WCAG AA et de navigation au clavier.