Formation de développeur web Full Stack

Leçon 1 • Comment fonctionne le Web

Couvre les cycles de requête-réponse HTTP, la résolution DNS et les pipelines de rendu du navigateur. Établit l'épine dorsale conceptuelle pour chaque décision de développement full-stack prise plus tard.

Leçon 2 • Outils de développement et notions de base du terminal

Présente la ligne de commande, les gestionnaires de paquets et les éditeurs de code comme outils quotidiens. La maîtrise de ceux-ci accélère chaque exercice pratique subséquent.

Leçon 3 • Structure de projet et normes de codage

Établit les conventions de dossiers, les règles de linting et les normes de formatage utilisées dans tout le cours. Une structure cohérente réduit la charge cognitive dans les projets multifichiers ultérieurs.

Leçon 1 • Mises en page Flexbox et CSS Grid

Enseigne les deux systèmes de mise en page avec des cas d'utilisation pratiques pour chacun. Les étudiants construisent une mise en page adaptative à deux colonnes et une grille de cartes en utilisant uniquement du CSS.

Leçon 2 • Notions fondamentales du CSS et modèle de boîte

Explique les sélecteurs, la spécificité, l'héritage et le modèle de boîte comme base de tout style visuel. Les étudiants stylisent une page multi-sections d'ici la fin de la section.

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

Applique des principes de conception mobile-first et des stratégies de points de rupture à des mises en page réelles. Les étudiants adaptent une conception de bureau pour fonctionner sur les viewports de téléphone, tablette et bureau.

Leçon 4 • Animations et transitions CSS

Présente les animations par images clés et les propriétés de transition pour ajouter du mouvement sans JavaScript. Relie le polissage visuel aux principes d'expérience utilisateur introduits dans les sections de mise en page.

Leçon 1 • Modules et outils JavaScript modernes

Présente les modules ES, les regroupeurs et les transpileurs pour préparer le code aux environnements de production. Les étudiants configurent un projet Vite et importent/exportent dans plusieurs fichiers.

Leçon 2 • JavaScript asynchrone

Explique la boucle d'événements, les fonctions de rappel, les Promesses et async/await pour gérer les opérations à délai. Les étudiants récupèrent des données d'une API publique et les affichent dans le DOM.

Leçon 3 • Syntaxe JavaScript de base et types de données

Couvre les variables, les primitives, les opérateurs et la coercition de type comme éléments de base de tout code JS. La maîtrise de ceux-ci prévient les bogues de débutant les plus courants dans les projets ultérieurs.

Leçon 4 • Flux de contrôle et fonctions

Enseigne les conditionnelles, les boucles et les déclarations de fonctions, y compris les fonctions fléchées et les fermetures. Les étudiants refactorisent du code procédural en fonctions réutilisables et bien scopées.

Leçon 1 • État global avec Context et Reducers

Enseigne l'API Context et useReducer pour partager l'état entre des composants profondément imbriqués. Les étudiants refactorisent un état passé par props vers un magasin de contexte centralisé.

Leçon 2 • Concepts de base de React et JSX

Présente le modèle de composants, la syntaxe JSX et le DOM virtuel comme idées fondatrices de React. Les étudiants affichent une arborescence de composants et comprennent comment React met à jour l'interface utilisateur.

Leçon 3 • React Router et navigation

Implémente le routage côté client avec des routes imbriquées, des segments dynamiques et des routes protégées. Les étudiants ajoutent une navigation multi-pages à leur application React.

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

Couvre useState, useEffect et les hooks personnalisés pour gérer l'état local des composants et les effets secondaires. Les étudiants construisent un formulaire interactif avec validation et rétroaction en direct.

Leçon 1 • Principes de conception d'API RESTful

Applique les contraintes REST pour concevoir des points de terminaison d'API cohérents et prévisibles avec des codes d'état appropriés. Les étudiants refactorisent une API ad hoc en une structure complète basée sur des ressources RESTful.

Leçon 2 • Cadriciel Express et routage

Construit des applications Express structurées avec des gestionnaires de routes, des paramètres de route et des chaînes de requête. Les étudiants organisent les routes dans des fichiers de routeur séparés suivant les conventions REST.

Leçon 3 • Environnement d'exécution Node.js et modules de base

Explique l'architecture pilotée par les événements de Node.js, le système de modules et les modules intégrés pour les E/S de fichier et de réseau. Les étudiants écrivent des scripts utilisant les modules fs, path et http.

Leçon 4 • Validation des entrées et gestion des erreurs

Implémente une validation basée sur un schéma et des réponses d'erreur centralisées pour renforcer l'API. Les étudiants ajoutent un intergiciel de validation qui renvoie des messages d'erreur structurés aux clients.

Leçon 1 • Intégration ORM avec Prisma

Utilise Prisma pour définir des schémas, générer un client sécurisé au niveau des types et effectuer des opérations CRUD à partir de Node.js. Les étudiants remplacent les requêtes SQL brutes dans leur API par des appels au client Prisma.

Leçon 2 • NoSQL avec MongoDB et Mongoose

Présente la modélisation de données orientée document et les schémas Mongoose pour un stockage flexible et sans schéma. Les étudiants construisent un deuxième point de terminaison d'API soutenu par MongoDB pour le contraster avec SQL.

Leçon 3 • Choix et connexion des bases de données

Compare les compromis SQL et NoSQL et couvre le regroupement de connexions et la configuration basée sur l'environnement. Les étudiants configurent leur API pour changer de base de données via des variables d'environnement.

Leçon 4 • Configuration PostgreSQL et requêtes avancées

Applique les compétences SQL à PostgreSQL avec des index, des transactions et des contraintes pour une intégrité des données de niveau production. Les étudiants exécutent des migrations et des scripts de remplissage sur une instance PostgreSQL locale.

Leçon 1 • Jetons Web JSON et jetons d'actualisation

Couvre la structure JWT, la signature, la vérification et la rotation des jetons d'actualisation pour des sessions persistantes. Les étudiants implémentent la connexion, l'émission de jetons et l'actualisation silencieuse dans leur API.

Leçon 2 • Meilleures pratiques de sécurité Web

Aborde les menaces OWASP les plus courantes, notamment XSS, CSRF, injection SQL et en-têtes non sécurisés. Les étudiants auditent leur application et appliquent les correctifs Helmet.js et d'assainissement des entrées.

Leçon 3 • OAuth 2.0 et connexion tierce partie

Intègre le flux de code d'autorisation OAuth 2.0 pour la connexion sociale à l'aide d'un fournisseur comme Google. Les étudiants ajoutent un bouton de connexion tierce partie fonctionnel à leur application full-stack.

Leçon 4 • Contrôle d'accès basé sur les rôles

Conçoit un modèle d'autorisation avec des rôles et des gardes appliqués comme intergiciel Express et wrappers de route React. Les étudiants restreignent les points de terminaison API et les pages d'interface utilisateur par rôle d'utilisateur.

Leçon 1 • Intégration full-stack et projet de synthèse

Connecte toutes les couches — frontend React, API Express, base de données et authentification — en une seule application déployable. Les étudiants présentent un projet en direct et complet démontrant une compétence de bout en bout.

Leçon 2 • Configuration du pipeline CI/CD

Automatise les tests, la construction et le déploiement à l'aide d'un service CI/CD déclenché par des poussées Git. Les étudiants configurent un pipeline qui exécute des tests et déploie lors de la fusion dans la branche principale.

Leçon 3 • Conteneurisation avec Docker

Empaquette l'API Node.js et la base de données dans des conteneurs Docker pour des environnements cohérents entre les machines. Les étudiants écrivent des Dockerfiles et un fichier Compose pour le développement multi-services local.

Leçon 4 • Déploiement et hébergement dans le nuage

Déploie l'API backend sur une plateforme infonuagique et le frontend React sur un service d'hébergement statique. Les étudiants configurent des domaines personnalisés, HTTPS et des secrets d'environnement.