Formation développeur front-end

Leçon 1 • Introduction au terminal

Couvre la navigation dans les fichiers, la gestion des processus et les notions de base du scriptage shell. Prépare les étudiants à exécuter les outils de compilation et les gestionnaires de paquets présentés plus tard.

Leçon 2 • Gestion de versions avec Git

Enseigne les validations, les branches et les dépôts distants. Fait le lien avec les flux de travail en équipe utilisés dans tous les chapitres subséquents axés sur les 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 la gestion de versions. Veille à ce que chaque étudiant travaille dans une chaîne d'outils professionnelle cohérente.

Leçon 1 • Texte et éléments en ligne

Couvre les titres, les paragraphes, les balises span et le formatage en ligne. 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édia intégrés. Développe les compétences nécessaires à la création de pages navigables et riches en médias utilisées dans les chapitres CSS ultérieurs.

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

Présente les éléments header, nav, main, article, section et footer. Dé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 ainsi que leurs rôles. Ancre les étudiants dans le modèle objet du document avant l'introduction de tout style ou script.

Leçon 1 • Typographie et couleur

Enseigne les propriétés de police, les polices Web et les modèles de couleur, notamment hexadécimal, RVB et TSL. 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 d'abord pour adapter les mises en page. Prépare les étudiants à offrir des expériences multi-appareils dans tous les futurs projets.

Leçon 3 • Mise en page Flexbox

Présente le modèle de conteneur flexible et d'élément pour les mises en page unidimensionnelles. Les étudiants construisent des barres de navigation et des grilles de cartes utilisées dans le projet de fin d'études.

Leçon 4 • Syntaxe et sélecteurs CSS

Explique les règles, les déclarations et l'ensemble des sélecteurs. Établit les règles de spécificité et de cascade qui régissent chaque décision de style de ce chapitre.

Leçon 5 • Mise en page CSS Grid

Couvre les pistes, les zones et le placement de la grille 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 exceptions et débogage

Présente try/catch, les méthodes de la 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 • Flux de contrôle 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 concrets.

Leçon 3 • Fonctions et portée

Explique les déclarations de fonction, les expressions, les fonctions fléchées et la fermeture. La maîtrise de la portée évite les bogues d'accès aux variables courants dans les scripts 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 la manipulation de textContent, innerHTML, classList et 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. Fait le lien entre les connaissances sur les formulaires HTML du chapitre 2 et l'expérience utilisateur 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 d'événement et les phases de propagation. Permet aux étudiants de raccorder 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 facile à maintenir 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 la temporisation dans tout code JavaScript asynchrone.

Leçon 3 • Récupération de données à partir d'API REST

Utilise l'API Fetch pour effectuer des requêtes GET et POST et analyser les réponses JSON. Fait le lien entre les compétences asynchrones et les sources de données réelles qui alimentent les applications Web modernes.

Leçon 4 • Promesses et enchaînement

Couvre la création de promesses, l'enchaînement .then(), .catch() et .finally(). Remplace les modèles basés sur les rappels par des flux de travail 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 contrôles de qualité dans le flux de travail de développement avant la validation du code.

Leçon 2 • Modules JavaScript

Explique la syntaxe des modules ES, les exportations nommées et par défaut, et les chemins d'importation. Permet les modèles de division du code et de réutilisation requis par les cadriciels modernes.

Leçon 3 • Gestion des paquets avec npm

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

Leçon 4 • Regroupeurs et outils de compilation

Configure un regroupeur de modules pour transpiler, regrouper et optimiser les actifs. Produit des versions prêtes pour la production avec division du code et élagage des arbres activés.

Leçon 1 • État global et API Context

Utilise le contexte React pour partager l'état dans l'arborescence des composants sans forage de propriétés. Prépare les étudiants aux bibliothèques de gestion d'état tierces couvertes dans les chapitres supplémentaires.

Leçon 2 • Concepts de base de React

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

Leçon 3 • Création 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. Complète le cycle de vie complet du développement, du code local à l'URL en direct.

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

Couvre useState, useReducer et le remontée d'état. Permet aux étudiants de créer des composants dynamiques et pilotés par les données qui se réaffichent 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. Fait le lien entre la récupération asynchrone d'API du chapitre 6 et le cycle de vie des composants React.