Formation développeur front-end

Leçon 1 • Introduction à la ligne de commande

Couvre la navigation dans les fichiers, la gestion des processus et les bases du scripting shell. Prépare les étudiants à exécuter les outils de build et les gestionnaires de paquets présentés ultérieurement.

Leçon 2 • Contrôle de version avec Git

Enseigne les commits, les branches et les dépôts distants. Fait le lien avec les workflows d'équipe utilisés dans tous les chapitres suivants basés sur des projets.

Leçon 3 • Configuration de l'environnement de développement

Installe et configure un éditeur de code, les outils de développement du navigateur et le contrôle de version. Garantit que chaque étudiant travaille dans une chaîne d'outils professionnelle et cohérente.

Leçon 1 • Éléments de texte et inline

Couvre les titres, les paragraphes, les spans et les balises de formatage inline. Renforce la distinction entre la signification sémantique et la présentation visuelle.

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

Enseigne les balises d'ancrage, les attributs d'image et les éléments médias embarqués. Développe les compétences pour créer des pages navigables et riches en médias utilisées dans les chapitres CSS ultérieurs.

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

Présente header, nav, main, article, section et footer. Montre comment le balisage sémantique améliore l'accessibilité et le référencement.

Leçon 4 • Anatomie d'un document HTML

Explique les sections doctype, head et body et leurs rôles. Fonde les étudiants sur le modèle objet du document avant toute introduction au style ou au script.

Leçon 1 • Typographie et couleur

Enseigne les propriétés des polices, les polices web et les modèles de couleur incluant hex, RGB et HSL. Fait le lien entre les principes de conception visuelle et l'implémentation CSS.

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

Applique des points de rupture, des unités fluides et une stratégie mobile-first pour adapter les mises en page. Prépare les étudiants à offrir des expériences multi-appareils dans tous les projets futurs.

Leçon 3 • Mise en page Flexbox

Présente le modèle du conteneur flexible et de ses éléments pour les mises en page unidimensionnelles. Les étudiants construisent des barres de navigation et des grilles de cartes utilisées dans le projet de synthèse.

Leçon 4 • Syntaxe et sélecteurs CSS

Explique les règles, les déclarations et le spectre complet des sélecteurs. Établit les règles de spécificité et de cascade qui régissent chaque décision de style dans ce chapitre.

Leçon 5 • Mise en page CSS Grid

Couvre les pistes de grille, les zones et le placement pour les mises en page bidimensionnelles. Étend les compétences Flexbox pour gérer efficacement des structures de page complexes.

Leçon 1 • Gestion des erreurs et débogage

Présente try/catch, les méthodes console et les outils de débogage du navigateur. Développe des habitudes de débogage systématiques essentielles pour tout travail avancé en JavaScript.

Leçon 2 • Contrôle de flux et boucles

Enseigne les constructions if/else, switch, for, while et do-while. Permet aux étudiants d'écrire une logique décisionnelle et itérative pour des problèmes du monde réel.

Leçon 3 • Fonctions et portée

Explique les déclarations de fonctions, les expressions, les fonctions fléchées et la fermeture. La maîtrise de la portée prévient les bugs d'accès aux variables courants dans le scripting du DOM.

Leçon 4 • Tableaux et objets

Couvre les méthodes de tableau, les littéraux d'objet et la déstructuration. Prépare les étudiants à manipuler les structures de données renvoyées par les API au chapitre 5.

Leçon 1 • Modification des éléments du DOM

Enseigne textContent, innerHTML, classList et la manipulation de style. Les étudiants mettent à jour dynamiquement le contenu de la page en réponse aux données et aux actions de l'utilisateur.

Leçon 2 • Formulaires et gestion des entrées utilisateur

Couvre les événements de soumission de formulaire, la validation des entrées et la prévention du comportement par défaut. Relie les connaissances sur les formulaires HTML du chapitre 2 à l'UX pilotée par JavaScript.

Leçon 3 • Interrogation et parcours du DOM

Couvre querySelector, getElementById et les méthodes de parcours parent/enfant. Établit les compétences de sélection nécessaires avant toute tentative de modification du DOM.

Leçon 4 • Gestion des événements

Explique addEventListener, les objets événement et les phases de propagation. Permet aux étudiants de connecter des comportements interactifs à n'importe quel élément de la page.

Leçon 1 • Syntaxe Async/Await

Réécrit les chaînes de promesses à l'aide de fonctions async et d'expressions await. Produit un code asynchrone plus propre et plus maintenable utilisé dans tous les projets ultérieurs.

Leçon 2 • Concepts de programmation asynchrone

Explique la boucle d'événements, la pile d'appels et la file d'attente des tâches. Fournit le modèle mental nécessaire pour raisonner sur le timing dans tout code JavaScript asynchrone.

Leçon 3 • Récupération de données depuis des API REST

Utilise l'API Fetch pour effectuer des requêtes GET et POST et analyser les réponses JSON. Relie les compétences asynchrones aux sources de données réelles qui animent les applications web modernes.

Leçon 4 • Promesses et chaînage

Couvre la création de promesses, le chaînage .then(), .catch() et .finally(). Remplace les motifs basés sur les callbacks par des workflows asynchrones lisibles et composables.

Leçon 1 • Linting, formatage et qualité du code

Configure un linter et un formateur pour appliquer automatiquement un style de code cohérent. Intègre des barrières de qualité dans le workflow de développement avant que le code ne soit validé.

Leçon 2 • Modules JavaScript

Explique la syntaxe des modules ES, les exports nommés et par défaut, et les chemins d'importation. Permet les motifs de division de code et de réutilisation requis par les frameworks modernes.

Leçon 3 • Gestion des paquets avec npm

Couvre npm init, l'installation de paquets et la gestion des fichiers package.json et lock. Établit les compétences de gestion des dépendances utilisées dans chaque workflow d'outillage.

Leçon 4 • Bundlers et outils de build

Configure un bundler de modules pour transpiler, regrouper et optimiser les assets. Produit des builds prêts pour la production avec division de code et élagage d'arbres activés.

Leçon 1 • État global et API Context

Utilise le Contexte de React pour partager l'état dans l'arborescence des composants sans perçage de props. Prépare les étudiants aux bibliothèques de gestion d'état tierces couvertes dans des chapitres supplémentaires.

Leçon 2 • Concepts fondamentaux de React

Présente JSX, le DOM virtuel et le modèle de composant. Établit le changement mental du scripting impératif du DOM à la composition déclarative de l'interface utilisateur.

Leçon 3 • Construction et déploiement d'une application React

Optimise une application React pour la production et la déploie sur une plateforme d'hébergement statique. Achève le cycle de développement complet, du code local à l'URL en ligne.

Leçon 4 • Gestion de l'état avec les Hooks

Couvre useState, useReducer et la remontée de l'état. Permet aux étudiants de construire des composants dynamiques pilotés par les données qui se rendent correctement lors des changements d'état.

Leçon 5 • Effets secondaires avec useEffect

Explique le cycle de vie des effets, les tableaux de dépendances et les fonctions de nettoyage. Relie la récupération asynchrone d'API du chapitre 6 au cycle de vie des composants React.