Cours de codage web

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

Enseigne les workflows init, add, commit et push pour suivre les 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 directement 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 par rapport aux chemins 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 des habitudes de débogage utilisées dans chaque chapitre ultérieur.

Leçon 1 • Formulaires HTML et types de saisie

Crée 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 suivants.

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

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

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

Enseigne les listes ordonnées, non ordonnées et de définitions 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 ainsi que leurs métadonnées requises. Établit le squelette que suivra chaque fichier HTML du 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 de la page par les moteurs de recherche.

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

Explique les couches de contenu, de remplissage, de bordure et de marge ainsi que le comportement de box-sizing. Résout la confusion de mise en page la plus courante chez 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 style à 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 fini aux composants de la page.

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

Enseigne les valeurs de couleur hexadécimales, 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 dans un projet.

Leçon 1 • Positionnement et Z-Index

Couvre le positionnement absolu, fixe et collant ainsi que le contexte d'empilement. Permet les superpositions, les en-têtes fixes et les fenêtres 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 conceptions axées d'abord sur le mobile qui fonctionnent sur n'importe quel appareil.

Leçon 3 • Principes fondamentaux de CSS Grid

Définit les modèles de grille, les lignes, les colonnes et les propriétés d'espacement 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

Passe en revue les valeurs d'affichage bloc, en ligne et en ligne-bloc 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 effectuer des opérations répétées 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 ainsi que les opérateurs arithmétiques et de comparaison. Établit la base de la 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 suivants.

Leçon 4 • Fonctions et portée

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

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

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

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

Utilise querySelector, getElementById et les méthodes de parcours parent/enfant. Permet de cibler précisément 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 fenêtres modales et les motifs d'interface utilisateur dynamiques.

Leçon 4 • Modification d'éléments et de 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 enchaînement

Crée et enchaîne des Promesses à l'aide de .then() et .catch() pour des tâches asynchrones séquentielles. Remplace les rappels 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 la récupération des données à l'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 à des 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 à l'aide de fonctions async et d'expressions await. Produit un code plus propre et d'apparence synchrone pour les workflows asynchrones complexes.

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

Ajoute la manipulation du DOM, la gestion d'é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 à l'aide d'un déploiement basé sur Git. Produit une URL partageable pour le portfolio et les candidatures à un emploi.

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

Utilise DevTools, la journalisation dans la console et des cas de test manuels pour trouver et corriger les bogues. Garantit le bon fonctionnement de l'application avant le déploiement.

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

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