Cours HTML5 et CSS3

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

Cette leçon distingue la structure (HTML), la présentation (CSS) et le comportement (JavaScript) comme des préoccupations distinctes. Elle définit les attentes pour l'ensemble du parcours du cours.

Leçon 2 • Comment le Web fonctionne

Couvre les cycles requête-réponse HTTP, la résolution DNS et les pipelines de rendu du navigateur. Ancre tout le travail ultérieur sur 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 empêche les problèmes de rendu du navigateur en mode quirks.

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 de corps 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 la sémantique HTML 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 alternatif. Ces éléments constituent l'épine dorsale de pages Web navigables et visuelles.

Leçon 1 • Bases des formulaires HTML5

Couvre l'élément form, les attributs action et method, ainsi que 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 groupés. Les éléments fieldset et legend améliorent l'accessibilité du formulaire et le regroupement logique.

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

Présente les éléments 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 pour 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 des scores de spécificité et de l'ordre source. La maîtrise de la cascade empêche les remplacements de style inattendus.

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 et 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 ordre avec 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

Présente le modèle du conteneur flex et de l'élément flex, 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 fonctions clamp, les unités vw et les échelles d'espacement fluides à la typographie et aux espaces de mise en page. La police 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édia et les opérateurs logiques pour définir des points de rupture. Les points de rupture doivent refléter les besoins du contenu, et non les tailles d'appareil spécifiques.

Leçon 3 • Principes de conception réactive

Couvre les grilles fluides, les images flexibles et la balise meta viewport comme les trois piliers de la conception adaptative. 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 d'image correcte réduit le poids de la page sur les réseaux mobiles.

Leçon 1 • Performance et accessibilité du mouvement

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 reflow de la mise en page.

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

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

Leçon 4 • Animations image par image CSS

Construit des animations en plusieurs étapes à l'aide de @keyframes, animation-name et des propriétés d'animation. Les animations image par image s'exécutent indépendamment de l'interaction de l'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 du projet et maquettage filaire

Définit les objectifs du site, l'inventaire du contenu et les maquettes filaires 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 de la 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 320px à 1440px.

Leçon 4 • Audit d'accessibilité et finitions finales

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