Étape 1
Parcours d'apprentissage
Roadmap du développeur frontend
Des cours gratuits dans l'ordre où un développeur front end en a réellement besoin : HTML pour la structure, CSS pour la mise en page, JavaScript pour le comportement, TypeScript pour la sûreté du typage, React et Next.js pour de vraies applications, Git pour livrer, et huit projets pour le prouver. Chaque leçon s'exécute dans votre navigateur et chaque cours situé avant l'étape projets se termine par un certificat gratuit.
698,051+ codders inscrits à ces cours
804 leçons823 défis3,184 questions de quiz
- Adapté aux débutants
Aide au codage assistée par IA
Leçons interactives et pratiques
Narration audio dans chaque leçon
Quiz pour tester vos connaissances
13 certificats gratuits tout au long du parcours
Le parcours développeur front end, étape par étape
Chaque étape est un cours Coddy déjà existant. Suivez-les dans l'ordre ou allez directement à celui qui vous manque : votre progression est enregistrée cours par cours dans tous les cas.
- 1
- 2Étape 2
CSS : mise en page et designPage dédiée
Commencer cette étapeDémarrerSélecteurs, modèle de boîte, couleurs et typographie, puis flexbox, grid, mises en page responsives, transitions et animation sur deux sections. C'est l'étape où une page commence à ressembler à celles que vous utilisez tous les jours.DémarrerPage dédiée2 sections, dans l'ordre - 3Étape 3
JavaScript, le langage en entierPage dédiée
Commencer cette étapeDémarrerFondamentaux, logique et structures de contrôle, puis objets et classes, en trois sections. Le travail front end est un travail JavaScript ; chaque framework qui vient après n'est qu'une façon de l'organiser, et il n'est lisible que si le langage l'est.DémarrerPage dédiée3 sections, dans l'ordre - 4Étape 4
JavaScript dans le navigateurPage dédiée
Commencer cette étapeDémarrerLe DOM, les événements, la récupération de données et la construction de pages interactives sans framework, puis des patterns front end concrets. C'est ici que HTML, CSS et JavaScript ne font plus qu'un : une page qui répond à celui qui l'utilise.DémarrerPage dédiée2 sections, dans l'ordre - 5Étape 5
TypeScriptPage dédiée
Commencer cette étapeDémarrerTypes, interfaces, génériques et les erreurs du compilateur comme outil de travail. Presque toute base de code React professionnelle est en TypeScript : il arrive donc juste avant le framework, et non en supplément de fin de parcours.DémarrerPage dédiée - 6Étape 6
React et Next.jsPage dédiée
Commencer cette étapeDémarrerComposants, props, état, hooks et rendu, puis Next.js pour le routage, le chargement des données et les applications réelles. Le framework le plus demandé dans les offres front end, enseigné après le langage dans lequel il est écrit.DémarrerPage dédiée2 sections, dans l'ordre - 7Étape 7
Git et gestion de versionsPage dédiée
Commencer cette étapeDémarrerCommits, branches, fusions, résolution de conflits et dépôts distants. Tout poste front end et tout projet de portfolio vit dans un dépôt Git ; l'apprendre ici, c'est livrer les projets de l'étape suivante comme on le fait en entreprise.DémarrerPage dédiée - 8Étape 8
Projets : construisez ce que vous avez déjà vu
Commencer cette étapeDémarrerExercices de flexbox et de sélecteurs, pratique du DOM et des méthodes de tableau, puis de vraies réalisations : une carte de profil Coddy, une page Instagram, une page de connexion Netflix et un carrousel d'images. Chacune est une pièce de portfolio qu'un recruteur peut ouvrir.Démarrer8 cours, dans l'ordre- CSS Flexbox - Le cours complethtml uniquement15 leçons
- Sélecteurs CSShtml uniquement15 leçons
- Méthodes DOM en JavaScripthtml uniquement13 leçons
- Méthodes de tableaux en JavaScriptjavascript uniquement18 leçons
- Clone de carte de profil Coddy | Projet Front-endhtml uniquement26 leçons24 défis1 projet
- Clone de page Instagram | Projet Front-Endhtml uniquement16 leçons14 défis1 projet
- Clone de la page de connexion Netflix | Projet front-endhtml uniquement19 leçons18 défis1 projet
- Slider | Projet front-endhtml uniquement23 leçons22 défis1 projet
Ce que vous obtenez
Tout ce que vous utiliserez pour apprendre à coder
Apprendre en Faisant
Écrivez du vrai code, interrogez des bases de données, créez des sites web et maîtrisez les prompts IA. Nos leçons interactives couvrent toutes les compétences dont les développeurs modernes ont besoin.
playground.js
Éditeur de Code
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test n°1
Test n°2
Test n°3
Entrée
"Alex"
Sortie
"Hello, Coddy! Alex"
Construisez Votre Série
Restez constant et regardez vos progrès grandir! Suivez votre habitude quotidienne de codage, protégez votre série avec des jours de gel et gagnez des récompenses en vous connectant chaque jour.
12 jours de série
Revenez demain pour maintenir votre série!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Quitte ou Double
Jour 5 sur 7
Gel de Série
2 left
Codez Partout
Emportez votre parcours de codage avec vous! Pas de configuration, pas de téléchargements - ouvrez et commencez à coder. Disponible sur iOS, Android et Web avec des notes de 4.9 étoiles.
7
250
5
Variables
CONTINUER
4.9
Note
Vous N'êtes Pas Seul
Affrontez les classements mondiaux, invitez des amis pour gagner des récompenses et célébrez les succès des autres. Coder, c'est mieux entre amis!
Ligue ChallengerLes 7 premiers avancent
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Zone de promotionApprenez comme vous voulez
Lisez, écoutez, testez-vous, demandez à l'IA ou retrouvez ce que vous avez déjà étudié. Chaque leçon s'adapte à vous.
Intro aux variables
Audio
Une variable est un conteneur nommé qui stocke une valeur réutilisable plus tard dans votre programme.
En Python, on en crée une en écrivant le nom, un signe égal, puis la valeur à stocker.
La valeur peut évoluer : réassigner le nom le fait simplement pointer vers une nouvelle valeur.
1xSarah
Certifiez-vous
Gagnez des certificats pour chaque cours terminé. Ajoutez-les à votre profil LinkedIn et CV pour montrer votre expertise en programmation aux employeurs.
Certificat de RéussiteCeci certifie queJean Duponta complété avec succèsFondamentaux de Python
Fondamentaux de Python
Datejanv. 2026
Ajouter à LinkedInPourquoi apprendre le front end sur Coddy
- Vous voyez la page que vous construisez. Chaque leçon de HTML, de CSS et de JavaScript s'affiche en direct dans le navigateur, à côté de votre code : un sélecteur erroné ou un flexbox cassé se voit à la seconde où vous l'écrivez, pas sur une capture d'écran à la fin.
- Le bon ordre, et aucun JavaScript escamoté. La plupart des cours de front end filent du HTML à un framework ; ce parcours consacre trois sections entières à JavaScript avant React, parce qu'un framework ne devient lisible qu'une fois le langage qui le porte maîtrisé.
- Des indices IA qui lisent votre balisage et votre code. Quand une mise en page casse ou qu'un composant ne s'affiche pas, Bugsy regarde ce que vous avez écrit et vous oriente vers la solution sans vous donner la réponse.
- Des projets qu'un recruteur peut ouvrir. La dernière étape, ce sont huit réalisations concrètes - des clones de pages que vous connaissez déjà -, chacune une pièce de portfolio partageable, plus un certificat gratuit pour chaque cours des sept premières étapes.
Questions fréquentes sur le métier de développeur front end
Comment devenir développeur front end ?
Apprenez HTML, CSS et JavaScript assez bien pour construire une page à partir d'un fichier vide, ajoutez TypeScript et un framework (React est le choix sûr), apprenez Git, puis réalisez trois ou quatre vrais projets sans tutoriel et mettez-les en ligne. C'est exactement ce parcours, dans cet ordre. Les projets comptent plus que les certificats : un portfolio front end est la seule chose qu'un recruteur peut juger en trente secondes.
Faut-il apprendre HTML, CSS ou JavaScript en premier ?
HTML d'abord, puis CSS, puis JavaScript - et accordez le plus de temps à JavaScript. Quelques semaines suffisent pour être à l'aise en HTML, un mois environ en CSS ; JavaScript est un langage de programmation complet, et c'est là que la plupart des développeurs front end autodidactes coupent les virages. Ce parcours lui consacre trois sections, plus une section sur le DOM, avant qu'un seul framework n'apparaisse.
Faut-il TypeScript pour être développeur front end ?
Pour un emploi, presque toujours : la très grande majorité des bases de code professionnelles en React et Next.js est écrite en TypeScript, et une offre qui dit « JavaScript » signifie en pratique TypeScript. C'est une courte étape une fois JavaScript solide, et c'est pourquoi il se place juste avant React dans ce parcours plutôt qu'à la fin.
React, Vue ou Angular : quel framework apprendre ?
React, sauf si un poste précis que vous visez dit le contraire. C'est lui qui concentre de loin le plus d'offres d'emploi et le plus grand écosystème, et Next.js, qui s'appuie dessus, est ce avec quoi la plupart des nouveaux sites en production sont construits. Les idées - composants, état, props, rendu - se transposent ensuite à Vue et à Angular en une ou deux semaines. Ce parcours enseigne React et Next.js.
Combien de temps faut-il pour apprendre le développement front end ?
Environ six à neuf mois à raison d'une heure par jour pour atteindre un niveau junior avec un portfolio. Dans ce parcours, HTML et CSS prennent six à huit semaines à eux deux, JavaScript deux à trois mois, TypeScript deux semaines, React et Next.js six semaines, et l'étape projets dure aussi longtemps que vous continuez à construire. Le chiffre qui compte, ce sont les projets terminés, pas les leçons terminées.
Ce parcours couvre-t-il les tests, l'accessibilité ou la gestion d'état ?
Pas sous forme de cours dédiés, et nous préférons le dire plutôt que de gonfler la page. Le balisage sémantique, socle des pages accessibles, fait partie de l'étape HTML, et la gestion d'état propre à React est couverte ; un cours sur les tests, un travail plus poussé sur l'accessibilité et une bibliothèque d'état figurent sur la feuille de route du programme et rejoindront ce parcours comme nouvelles étapes à leur sortie.
Peut-on décrocher un poste front end avec seulement des cours gratuits ?
Oui, à condition que ces cours produisent un portfolio - c'est précisément pour cela que ce parcours se termine par huit projets. Ce que les employeurs regardent, c'est une page que vous avez construite et qu'ils peuvent ouvrir, un historique Git qui montre que vous l'avez construite, et un entretien où vous savez expliquer une mise en page et un composant. Les trois sortent de ce parcours ; aucun ne nécessite un bootcamp payant.
