Formation en création de pages web 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 flux de travail complet de création présenté dans ce chapitre.

Leçon 2 • Comment le Web Fonctionne

Couvre le modèle client-serveur, les requêtes HTTP et le rendu par le navigateur. Ancre tout le travail ultérieur sur 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 minimale valide qui réussit la validation HTML5.

Leçon 4 • Configuration de 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 les éléments header, nav, main, article, section, aside et footer. La structure sémantique améliore l'accessibilité et prépare les pages pour la mise en page CSS du chapitre 4.

Leçon 2 • Images et Éléments Multimédia

Couvre les éléments img, figure, figcaption, audio et video avec leurs attributs. Le texte alternatif accessible et les formats multimédias sont présentés comme des standards professionnels.

Leçon 3 • Hyperliens et Navigation

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

Leçon 4 • Listes : Ordonnées, Non Ordonnées et de Définition

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 fondement du dimensionnement des éléments. La maîtrise du modèle de boîte est nécessaire 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'ID et d'attribut avec une syntaxe correcte. La précision du sélecteur contrôle directement quels éléments reçoivent les 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 la 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 valeurs hexadécimales, 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 des 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, rows, areas et gap pour les mises en page au niveau de la page. Grid et Flexbox couvrent ensemble l'ensemble des exigences modernes de mise en page.

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 flexible et des éléments flexibles 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 toute 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 de champ ou la validation côté client.

Leçon 4 • Types de Champ et Contrôles de Formulaire

Enseigne les champs text, email, password, number, date, checkbox, radio et select. Les types de champ HTML5 offrent 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 aux 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 images 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, aux boutons et aux é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 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 et aux éléments graphiques. Des outils de contraste des couleurs sont utilisés pour auditer et corriger la page du projet étudiant.

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

Couvre les balises title, meta description, les liens canoniques, les balises Open Graph et la hiérarchie des titres structurée. Le balisage SEO 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é clavier est testée avec une navigation uniquement par navigateur tout au long de cette section.

Leçon 4 • Principes d'Accessibilité Web

Présente les quatre principes fondamentaux d'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 des 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, les animations et les transformations du chapitre 6 dans la navigation et les composants d'interface. Les effets sont testés pour les performances et la conformité aux préférences de 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 et la maintenabilité du CSS.

Leçon 4 • Appliquer la Mise en Page et le Style CSS

Implémente 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 la cohérence.