- Recommandé— le chemin principal
- Alternative— une option équivalente
- Ordre libre— à connaître, quand tu veux
Ce parcours n'a pas pour but de te faire mémoriser des technologies. Il a pour but de te rendre autonome. Les meilleurs développeurs ne sont pas ceux qui savent tout : ce sont ceux qui savent chercher — lire une documentation, formuler la bonne requête, isoler un bug, tester une hypothèse et recommencer.
Mais l'autonomie n'est pas l'isolement. Quand tu as vraiment cherché et que tu ne trouves pas, demander de l'aide est la seconde compétence du métier. Chercher seul d'abord, demander à temps ensuite : c'est exactement ce qu'on appelle savoir travailler en équipe.
Choisir ses vidéos
Privilégie les vidéos les plus récentes : l'écosystème front bouge vite. Regarde le nombre de vues et de j'aime, lis les commentaires, et ajoute l'année à ta recherche pour écarter les tutoriels périmés.
Les fondations
Le socle non négociable : le web, ses langages, et ta première API.
HTML, CSS et JavaScript sont la colonne vertébrale du métier. Ne passe pas à l'étape suivante tant que tu ne peux pas construire une page interactive sans aucune bibliothèque.
Internet
Structure et style
JavaScript moderne (ECMAScript)
Consommer une API REST
À faire soi-même
Exercice 1 — Une page sans filet
Construis une page de profil complète en HTML sémantique et CSS pur : en-tête, grille de cartes, pied de page, responsive de 360 px à 1440 px. Zéro bibliothèque, zéro framework. Contrainte : navigable entièrement au clavier.
Crée un compte pour rendre cet exercice et recevoir une correction.
Exercice 2 — Le CRUD complet
Branche cette page sur une API libre : affiche une liste (GET), ajoute un élément via un formulaire (POST), modifie-le (PATCH) et supprime-le (DELETE). Affiche un état de chargement et un message d'erreur clair si le réseau tombe. Astuce : coupe ton wifi en plein test pour vérifier.
Crée un compte pour rendre cet exercice et recevoir une correction.
L'outillage de base
Terminal, versionnage, dépendances, style — les gestes quotidiens du métier.
Ne saute pas le terminal. C'est le point de blocage numéro un des autodidactes : sans lui, chaque tutoriel devient incompréhensible dès la première ligne à taper. Deux heures d'apprentissage ici t'en font gagner des dizaines ensuite.
Ligne de commande
Gestion de versions
Hébergement de dépôts
Gestionnaires de paquets
Frameworks CSS
À faire soi-même
Exercice 1 — Le dépôt propre
Reprends ton projet de l'étape 1 : initialise Git en ligne de commande uniquement (pas d'interface graphique), travaille sur une branche, ouvre une pull request vers ta branche principale et rédige un README qui explique l'installation et le lancement. Objectif : qu'un inconnu puisse faire tourner ton projet sans te poser une seule question.
Crée un compte pour rendre cet exercice et recevoir une correction.
Exercice 2 — La refonte
Refais entièrement le style de cette page avec Tailwind, installé via npm ou pnpm. Compare le temps passé et la lisibilité avec ta version CSS pure, et note honnêtement ce que tu y gagnes et ce que tu y perds.
Crée un compte pour rendre cet exercice et recevoir une correction.
Choisir un framework
Un seul, en profondeur. Les autres s'apprennent ensuite en quelques jours.
Le piège classique est de survoler trois frameworks. Maîtrise-en un vraiment : les concepts (composants, état, cycle de vie, routage) sont transférables, la syntaxe s'apprend en une semaine.
Un seul, en profondeur
Les concepts à viser
À faire soi-même
Exercice 1 — Le même projet, en composants
Reconstruis ton CRUD de l'étape 1 avec le framework choisi : un composant liste, un composant fiche, un composant formulaire. Contrainte : aucun composant ne dépasse 100 lignes.
Crée un compte pour rendre cet exercice et recevoir une correction.
Exercice 2 — Deux écrans, une donnée
Ajoute le routage et une page de détail. La donnée doit être partagée entre les deux écrans sans être rechargée inutilement. Explique à voix haute — ou par écrit — pourquoi tu as placé l'état là où tu l'as placé.
Crée un compte pour rendre cet exercice et recevoir une correction.
L'IA dans le développement
Comprendre, faire assister, intégrer — sans perdre la main.
Utilise l'IA comme un pair, jamais comme un oracle. Règle simple : ne valide jamais une ligne que tu ne saurais pas réécrire toi-même. C'est précisément ce qui distingue un développeur autonome d'un copieur.
Les bases
Codage assisté
Prompting
Agents et protocoles
Intégrer l'IA dans ses apps
À faire soi-même
Exercice 1 — Le procès du code
Fais relire ton projet de l'étape 3 par un assistant IA. Pour chaque suggestion, écris en une phrase si tu l'acceptes ou la refuses, et pourquoi. Refuse-en au moins une en argumentant : c'est le vrai exercice.
Crée un compte pour rendre cet exercice et recevoir une correction.
Exercice 2 — Une fonctionnalité IA
Ajoute à ton application un appel à une API de modèle (résumé, reformulation, classement automatique). Gère le temps d'attente, l'erreur réseau et la réponse inattendue. Ne laisse jamais l'utilisateur devant un écran figé.
Crée un compte pour rendre cet exercice et recevoir une correction.
Front-end avancé
Industrialiser : types, build, tests, sécurité, rendu, déploiement.
Arrivé au bout de cette étape, tu as le niveau d'un développeur front-end intermédiaire. C'est ici que se joue la différence entre « ça marche chez moi » et « c'est en production ».
Vérification de types
Authentification
Bundlers
Linters et formateurs
Tests
APIs du navigateur
Sécurité web
Rendu serveur (SSR)
Génération statique (SSG)
Déploiement
À faire soi-même
Exercice 1 — Le passage en production
Migre ton projet en TypeScript, ajoute ESLint et Prettier, écris au moins trois tests unitaires et un test de bout en bout sur le parcours principal. Le pipeline doit passer au vert avant tout déploiement.
Crée un compte pour rendre cet exercice et recevoir une correction.
Exercice 2 — En ligne, vraiment
Déploie ton application sur Vercel ou Netlify avec authentification et rendu serveur. Partage l'URL à quelqu'un qui n'a pas vu le projet et note tout ce qu'il ne comprend pas seul : c'est ta liste de corrections.
Crée un compte pour rendre cet exercice et recevoir une correction.
Qualité et finition
Ce qui sépare un site qui marche d'un produit soigné.
Design systems
Performance
GraphQL
Accessibilité et PWA
À faire soi-même
Exercice 1 — L'audit sans complaisance
Passe Lighthouse sur ton projet et atteins au moins 90 en performance et en accessibilité. Puis débranche ta souris : toute l'application doit rester utilisable au clavier seul.
Crée un compte pour rendre cet exercice et recevoir une correction.
Exercice 2 — Trois composants documentés
Extrais trois composants réutilisables (bouton, champ, carte) avec leurs variantes et leurs états. Documente chacun en une page : à quoi il sert, comment l'utiliser, quand ne pas l'utiliser.
Crée un compte pour rendre cet exercice et recevoir une correction.
Au-delà du navigateur
Réutiliser tes compétences front sur bureau et mobile.
Applications de bureau
Applications mobiles
À faire soi-même
Exercice 1 — Ton application, hors du navigateur
Empaquette ton projet avec Tauri ou Electron. Compare le poids du binaire final et note ce qui casse au passage : c'est là que tu apprends vraiment.
Crée un compte pour rendre cet exercice et recevoir une correction.
Exercice 2 — L'épreuve du terrain
Porte l'écran principal en React Native et teste-le sur un vrai téléphone, en 3G bridée. Tout ce qui devient inutilisable dans ces conditions est un défaut de conception, pas un problème de réseau.
Crée un compte pour rendre cet exercice et recevoir une correction.
Ensuite : Node.js · Fullstack · Backend · Design System