Cours de codage web

Leçon 1 • Gestion de versions avec les bases de Git

Enseigne les flux de travail init, add, commit et push pour le suivi des modifications du code. Garantit que les étudiants peuvent sauvegarder et récupérer leur travail dès le début.

Leçon 2 • Configuration de votre éditeur de code

Installe et configure un éditeur de code moderne avec des extensions essentielles. Permet un codage efficace tout au long du cours.

Leçon 3 • Systèmes de fichiers et structure de projet

Explique les hiérarchies de dossiers, les conventions de nommage des fichiers et les chemins relatifs vs absolus. Prévient les liens brisés et les projets désorganisés.

Leçon 4 • Utilisation des outils de développement du navigateur

Présente les panneaux Éléments, Console et Réseau pour inspecter les pages en direct. Développe les habitudes de débogage utilisées dans tous les chapitres suivants.

Leçon 1 • Formulaires HTML et types de saisie

Construit des formulaires avec des étiquettes, des champs de saisie, des listes déroulantes, des zones de texte et des boutons de soumission. Jette les bases de la collecte de données utilisateur abordée dans les chapitres ultérieurs.

Leçon 2 • Liens, images et médias

Explique les balises ancres, les attributs d'image et les éléments média intégrés. Connecte les pages et les ressources en un document cohérent et navigable.

Leçon 3 • Listes, tableaux et structures de données

Enseigne les listes ordonnées, non ordonnées et de définition, ainsi que le balisage accessible des tableaux. Prépare les étudiants à présenter correctement des données structurées.

Leçon 4 • Anatomie d'un document HTML

Décompose les sections DOCTYPE, head et body et leurs métadonnées requises. Établit le squelette que chaque fichier HTML suivra dans le cours.

Leçon 5 • Éléments sémantiques HTML5

Présente les éléments header, nav, main, article, section, aside et footer. Améliore l'accessibilité et l'interprétation du contenu par les moteurs de recherche.

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

Explique les couches contenu, padding, bordure et marge ainsi que le comportement de box-sizing. Résout la confusion de mise en page la plus courante rencontrée par les débutants.

Leçon 2 • Syntaxe CSS et sélecteurs

Couvre les ensembles de règles, les déclarations, les sélecteurs de classe, d'ID et d'élément. Établit le mécanisme de ciblage pour tout le travail de stylisation à venir.

Leçon 3 • Arrière-plans, bordures et ombres

Applique des images d'arrière-plan, des dégradés, des styles de bordure et des ombres de boîte. Ajoute de la profondeur visuelle et du raffinement aux composants de la page.

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

Enseigne les valeurs de couleur hex, RGB et HSL ainsi que les propriétés de police et les unités CSS. Permet des décisions de conception visuelle cohérentes sur un projet.

Leçon 1 • Positionnement et Z-Index

Couvre le positionnement absolu, fixe et collant (sticky) ainsi que le contexte d'empilement. Permet les superpositions, les en-têtes collants et les boîtes de dialogue modales.

Leçon 2 • Conception adaptative et requêtes média

Applique des points de rupture et des unités fluides pour adapter les mises en page à différentes tailles d'écran. Produit des designs mobile-first qui fonctionnent sur n'importe quel appareil.

Leçon 3 • Fondamentaux de CSS Grid

Définit les modèles de grille, les lignes, les colonnes et les propriétés d'espacement (gap) pour les mises en page bidimensionnelles. Permet des structures de page complexes impossibles à réaliser avec Flexbox seul.

Leçon 4 • Modes d'affichage et flux normal

Examine les valeurs d'affichage block, inline et inline-block ainsi que le flux du document. Fournit la base nécessaire pour comprendre quand Flexbox ou Grid est requis.

Leçon 1 • Boucles et itération

Enseigne les boucles for, while et for...of pour répéter des opérations sur des données. Prépare les étudiants à traiter efficacement les tableaux et les collections.

Leçon 2 • Variables, types de données et opérateurs

Présente let, const, les types primitifs et les opérateurs arithmétiques et de comparaison. Établit la base de gestion des données pour tout code JavaScript.

Leçon 3 • Tableaux et objets

Couvre les méthodes de tableau et les littéraux d'objet pour stocker et manipuler des données structurées. Soutient directement la manipulation du DOM et le traitement des données d'API dans les chapitres ultérieurs.

Leçon 4 • Fonctions et portée

Définit les déclarations de fonction, les expressions, les fonctions fléchées et la portée des variables. Permet des blocs de code réutilisables et modulaires tout au long d'un projet.

Leçon 1 • Délégation et propagation d'événements

Explique les motifs de bouillonnement (bubbling), de capture et de délégation pour une gestion efficace des événements. Prévient les fuites mémoire et simplifie les interactions avec les listes dynamiques.

Leçon 2 • Sélection et parcours du DOM

Utilise querySelector, getElementById et les méthodes de parcours parent/enfant. Permet un ciblage précis de n'importe quel élément sur une page en direct.

Leçon 3 • Création et suppression de nœuds DOM

Construit de nouveaux éléments avec createElement et les insère ou les supprime dynamiquement. Permet le rendu de listes, la création de modales et les motifs d'interface utilisateur dynamiques.

Leçon 4 • Modification des éléments et du contenu

Modifie le texte, le HTML, les attributs et les classes CSS sur les éléments sélectionnés. Produit des mises à jour visibles de la page sans recharger le navigateur.

Leçon 1 • Promesses et chaînage

Crée et chaîne les Promesses en utilisant .then() et .catch() pour des tâches asynchrones séquentielles. Remplace les callbacks imbriqués par un code lisible et linéaire.

Leçon 2 • Rendu des données d'API dans le DOM

Mappe les tableaux JSON récupérés en éléments HTML générés dynamiquement. Complète le pipeline complet de récupération des données à leur affichage dans un projet fonctionnel.

Leçon 3 • Récupération de données avec l'API Fetch

Envoie des requêtes GET et POST aux API REST et analyse les réponses JSON. Permet l'affichage de données en temps réel à partir de services externes.

Leçon 4 • Syntaxe Async/Await

Réécrit les chaînes de Promesses en utilisant les fonctions async et les expressions await. Produit un code plus propre, d'apparence synchrone, pour des flux de travail asynchrones complexes.

Leçon 1 • Mise en œuvre des fonctionnalités JavaScript

Ajoute la manipulation du DOM, la gestion des événements et l'intégration d'API au projet. Transforme la coque statique en une application entièrement interactive.

Leçon 2 • Déploiement vers un hébergement en direct

Publie le projet terminé sur une plateforme d'hébergement statique en utilisant un déploiement basé sur Git. Produit une URL partageable pour les candidatures et les portfolios.

Leçon 3 • Test et débogage de l'application

Utilise DevTools, les journaux de la console et des cas de test manuels pour trouver et corriger les bogues. Garantit que l'application fonctionne correctement avant le déploiement.

Leçon 4 • Construction de la fondation HTML et CSS

Construit le balisage sémantique et la mise en page réactive pour la coque de l'application. Applique toutes les compétences HTML et CSS antérieures dans une base de code unifiée.