É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.
663,032+ codders inscrits à ces cours
804 leçons681 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çons
- Clone de page Instagram | Projet Front-Endhtml uniquement16 leçons
- Clone de la page de connexion Netflix | Projet front-endhtml uniquement19 leçons1 défis
- Slider | Projet front-endhtml uniquement23 leçons1 défis
Ce que vous obtenez
Tout ce que vous utiliserez pour apprendre à coder
Learn by Doing
Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.
playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Input
"Alex"
Output
"Hello, Coddy! Alex"
Build Your Coding Streak
Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.
12 days streak
Return tomorrow to keep your streak!
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
Double or Nothing
Day 5 of 7
Streak Freeze
2 left
Code Anywhere, Anytime
Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.
7
250
5
Variables
CONTINUE
4.9
Rating
You're Not Alone in This
Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!
Challenger LeagueTop 7 advance
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Promotion zoneEvery way to learn
Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.
Intro to Variables
Audio
A variable is a named container that stores a value you can reference later in your program.
In Python, you create one by writing the name, an equals sign, then the value you want to store.
The value can change over time - reassigning the name simply points it to a new value.
1xSarah
Prove Your Skills
Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.
Certificate of CompletionThis certifies thatJohn Doehas successfully completedPython Fundamentals
Python Fundamentals
DateJan 2026
Add to 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.
