Cours de création de pages web avec HTML5 et CSS3

Leçon 1 • Écrire et enregistrer votre première page Web

Guide les étudiants dans la création, l'enregistrement et l'ouverture d'un fichier HTML dans un navigateur. Renforce le workflow complet de création introduit dans ce chapitre.

Leçon 2 • Comment fonctionne le Web

Couvre le modèle client-serveur, les requêtes HTTP et le rendu du navigateur. Ancre tout le travail ultérieur en HTML et CSS dans le comportement réel du navigateur.

Leçon 3 • Anatomie d'un document HTML5

Explique la déclaration DOCTYPE, les éléments html, head et body. Les étudiants écrivent une page valide minimale qui passe la validation HTML5.

Leçon 4 • Configurer votre environnement de développement

Installe et configure un éditeur de code, un gestionnaire de fichiers et un aperçu local dans le navigateur. Garantit que chaque étudiant dispose d'un espace de travail cohérent avant d'écrire du code.

Leçon 1 • Éléments de sectionnement sémantique HTML5

Présente header, nav, main, article, section, aside et footer. La structure sémantique améliore l'accessibilité et prépare les pages à la mise en page CSS au chapitre 4.

Leçon 2 • Images et éléments multimédia

Couvre les éléments img, figure, figcaption, audio et vidéo avec leurs attributs. Le texte alternatif accessible et les formats de médias sont présentés comme des normes professionnelles.

Leçon 3 • Hyperliens et navigation

Explique l'élément d'ancrage, href, target et les URL relatives vs absolues. Les compétences en matière de liens sont un prérequis pour les projets de sites multipages dans les chapitres suivants.

Leçon 4 • Listes : ordonnées, non ordonnées et de description

Enseigne les éléments ol, ul, li, dl, dt et dd avec une imbrication correcte. Les listes apparaissent dans les menus de navigation et les structures de contenu utilisées tout au long du cours.

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

Explique le contenu, le remplissage, la bordure et la marge comme base du dimensionnement des éléments. La maîtrise du modèle de boîte est requise avant d'aborder les techniques de mise en page au chapitre 4.

Leçon 2 • Sélecteurs, propriétés et valeurs

Couvre les sélecteurs d'élément, de classe, d'identifiant et d'attribut avec une syntaxe correcte. La précision du sélecteur contrôle directement quels éléments reçoivent des styles tout au long du cours.

Leçon 3 • Comment CSS fonctionne avec HTML

Explique les feuilles de style en ligne, internes et externes ainsi que l'ordre de cascade. Les feuilles de style externes deviennent la méthode standard utilisée pour tous les chapitres restants.

Leçon 4 • Style des couleurs et des arrière-plans

Enseigne les mots-clés de couleur, les codes hexadécimaux, les valeurs RVB et TSL pour le texte et les arrière-plans. Les compétences en matière de cohérence des couleurs s'appliquent directement aux projets de conception dans les chapitres suivants.

Leçon 1 • Flux normal et propriétés d'affichage

Couvre les valeurs d'affichage block, inline et inline-block ainsi que le flux du document. Comprendre le flux normal est essentiel avant de le remplacer par Flexbox ou Grid.

Leçon 2 • Mises en page bidimensionnelles avec CSS Grid

Présente grid-template-columns, les lignes, les zones et l'espacement pour les mises en page au niveau de la page. Grid et Flexbox couvrent ensemble l'ensemble des besoins de mise en page modernes.

Leçon 3 • Positionner les éléments avec CSS

Enseigne le positionnement statique, relatif, absolu, fixe et collant avec des décalages. Le positionnement complète Flexbox et Grid pour les superpositions et les barres de navigation fixes.

Leçon 4 • Mises en page flexibles avec Flexbox

Couvre les propriétés du conteneur flex et des éléments flex pour les mises en page unidimensionnelles. Flexbox est utilisé pour les barres de navigation, les rangées de cartes et les mises en page de formulaires tout au long du cours.

Leçon 1 • Étiquettes, espaces réservés et accessibilité

Explique l'association des étiquettes, le texte d'espace réservé et les attributs ARIA pour les lecteurs d'écran. Les formulaires accessibles sont une exigence professionnelle couverte dans cette section.

Leçon 2 • Validation de formulaire intégrée HTML5

Couvre les attributs required, pattern, min, max et minlength pour la validation côté client. La validation intégrée réduit les erreurs avant que les données n'atteignent un serveur.

Leçon 3 • Structure du formulaire et attributs principaux

Couvre l'élément form, les attributs action, method et enctype. Une structure de formulaire correcte est requise avant d'ajouter des éléments d'entrée ou une validation côté client.

Leçon 4 • Types d'entrée et contrôles de formulaire

Enseigne les entrées text, email, password, number, date, checkbox, radio et select. Les types d'entrée HTML5 fournissent une validation intégrée et une optimisation du clavier mobile.

Leçon 1 • Transformations CSS

Couvre les transformations translate, rotate, scale et skew en 2D et 3D. Les transformations sont combinées avec des transitions pour créer des effets de survol interactifs.

Leçon 2 • Dégradés CSS3

Enseigne linear-gradient, radial-gradient et conic-gradient pour les arrière-plans et les superpositions. Les dégradés remplacent les ressources d'image et réduisent le temps de chargement des pages.

Leçon 3 • Ombres et effets de bordure

Couvre les propriétés box-shadow, text-shadow, border-radius et outline. Ces effets ajoutent de la profondeur et du soin aux cartes, boutons et éléments de formulaire.

Leçon 4 • Animations CSS avec les keyframes

Présente @keyframes, animation-name, iteration-count et direction pour les effets de boucle. Les animations étendent les transitions pour les indicateurs de chargement et les éléments d'interface utilisateur attirant l'attention.

Leçon 1 • Contraste des couleurs et accessibilité visuelle

Applique les exigences de rapport de contraste au texte, aux composants d'interface utilisateur et aux éléments graphiques. Les outils de contraste des couleurs sont utilisés pour auditer et corriger la page du projet étudiant.

Leçon 2 • Référencement sur la page avec HTML5

Couvre les balises title, meta description, les liens canoniques, les balises Open Graph et la hiérarchie d'en-têtes structurée. Le balisage de référencement s'appuie sur les compétences HTML sémantique des chapitres 2 et 3.

Leçon 3 • Navigation au clavier et gestion du focus

Enseigne tabindex, les styles de focus, les liens d'évitement et l'ordre de tabulation logique pour les utilisateurs de clavier. L'accessibilité au clavier est testée avec une navigation exclusivement basée sur le navigateur tout au long de cette section.

Leçon 4 • Principes d'accessibilité Web

Présente les quatre principes fondamentaux de l'accessibilité : perceptible, utilisable, compréhensible et robuste. Ces principes guident chaque décision de balisage et de style dans ce chapitre.

Leçon 1 • Planification et maquettage du site

Définit les objectifs du site, la structure des pages, la hiérarchie du contenu et les maquettes basse fidélité. Planifier avant de coder réduit les reprises et renforce les habitudes de travail professionnelles.

Leçon 2 • Ajouter des effets visuels et de l'interactivité

Intègre les transitions, animations et transformations du chapitre 6 dans la navigation et les composants d'interface utilisateur. Les effets sont testés pour la performance et la conformité au mouvement réduit.

Leçon 3 • Construire la structure HTML

Construit le HTML sémantique pour toutes les pages en utilisant les éléments des chapitres 2 et 5. Une structure cohérente entre les pages garantit la réutilisation du CSS et la maintenabilité.

Leçon 4 • Appliquer la mise en page et le style CSS

Met en œuvre la conception visuelle complète en utilisant Flexbox, Grid, la typographie et la couleur des chapitres 3 et 4. Une seule feuille de style externe régit toutes les pages pour assurer la cohérence.