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. Établit les attentes pour l'ensemble du cours.

Leçon 2 • Comment fonctionne le Web

Couvre les cycles de requête-réponse HTTP, la résolution DNS et les pipelines de rendu du navigateur. Ancre tout le travail ultérieur en 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. Assure 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 textuels en ligne. Les étudiants structurent un contenu de corps lisible et sémantiquement significatif.

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

Crée 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 alternatif. 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 de formulaire, les attributs d'action et de méthode, ainsi que les types de saisie de base. Les formulaires sont le principal mécanisme de soumission de données utilisateur.

Leçon 2 • Select, Textarea et Fieldset

Crée des menus déroulants, des zones de texte multilignes et des contrôles de formulaire groupés. 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 et attributs de saisie avancés

Explore les types de saisie HTML5 : date, plage, couleur, tel et nombre. 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 évite 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 notions de base de la typographie

Couvre les valeurs de couleur hexadécimale, RVB et TSL ainsi que 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 de Grid

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

Leçon 2 • Placement Grid 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 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 des éléments 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 adaptatifs

Applique clamp, les unités vw et les échelles d'espacement fluides à la typographie et aux espaces de mise en page. Le type 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 des points de rupture. Les points de rupture doivent refléter les besoins du contenu, et non des tailles d'appareil spécifiques.

Leçon 3 • Principes de conception adaptative

Couvre les grilles fluides, les images flexibles et la balise méta de fenêtre d'affichage comme les trois piliers de la conception adaptative. Ces principes guident chaque décision de mise en page de ce chapitre.

Leçon 4 • Images et médias adaptatifs

Utilise srcset, sizes et l'élément picture pour servir des images de taille appropriée. Une livraison correcte des images 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 compositées, évite les animations déclenchant la 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 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 modifications à l'échelle du thème à partir d'une seule déclaration.

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

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

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

Implémente les propriétés personnalisées, l'échelle typographique et les styles de composants sur toutes les pages. Un système de conception partagé assure 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 du code. La planification évite les réécritures structurelles et l'élargissement de la portée pendant le développement.

Leçon 3 • Implémentation de la mise en page adaptative

Applique les mises en page Grid et Flexbox avec des requêtes média mobile d'abord 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 contrôles d'accessibilité automatisés et manuels, corrige les problèmes de contraste et ajoute les préférences de mouvement. Le site final respecte les normes de contraste WCAG AA et de navigation au clavier.