- cours
- 4
- modules
- 48
- exercices
- 3662+
- heures d’apprentissage
- 260-370
Que fait un développeur front-end ?
Le front-end, c’est la partie d’un site ou d’une application que les gens utilisent : le contenu, les boutons, les menus, les formulaires et les animations. Le développeur front-end transforme une maquette en code qui fonctionne et veille à ce que la page se charge vite, soit accessible à tous et s’affiche bien sur téléphone comme sur ordinateur.
Tout repose sur trois technologies du navigateur : HTML décrit la structure du contenu, CSS son apparence et JavaScript son comportement. Les applications plus grandes se construisent avec des bibliothèques et des frameworks, le plus souvent React, et les sites qui doivent être rapides et bien visibles dans Google avec Next.js. Ce parcours passe par toutes ces étapes, dans l’ordre.
Le parcours étape par étape
Chaque cours s’appuie sur le précédent. Si vous connaissez déjà un sujet, commencez à une étape plus loin : la page de chaque cours liste toutes ses leçons.
Étape 1
Cours HTML et CSS en ligne
niveau débutant · 11 modules · 843+ exercices · 40-60 heures
La base de tout site : structure du document, styles, mises en page Flexbox et Grid, responsive design, formulaires et accessibilité.
Ce que vous apprendrez
- Structure sémantique des documents HTML5
- Sélecteurs avancés et cascade CSS
- Mises en page responsives avec Flexbox et Grid
- Préprocesseur SASS - variables, mixins, imbrication
- Animations et transitions CSS
- Mobile-first et media queries
- Formulaires HTML et validation
- Accessibilité et bases du SEO
Programme du coursPremière leçon: Introduction au HTMLÉtape 2
Cours JavaScript et TypeScript en ligne
niveau débutant · 12 modules · 1062+ exercices · 60-90 heures
Le langage du navigateur depuis les bases : variables, fonctions, DOM, événements et code asynchrone, pour finir avec TypeScript, qui vérifie les types dans les projets plus grands.
Ce que vous apprendrez
- Les fondamentaux du JavaScript - variables, types, opérateurs
- Fonctions, scope, closures et hoisting
- ES6+ - fonctions fléchées, déstructuration, spread
- Manipulation du DOM et gestion des événements
- Asynchronicité - callbacks, promises, async/await
- Classes et programmation orientée objet
- Bases du TypeScript - types, interfaces, génériques
- Modules ES6 et bundlers
Programme du coursPremière leçon: Histoire et importance de JavaScriptÉtape 3
Cours JavaScript et React en ligne
niveau intermédiaire · 16 modules · 1069+ exercices · 80-120 heures
La bibliothèque la plus utilisée pour construire des interfaces : composants, hooks, état de l’application, routage, échanges avec une API et tests.
Ce que vous apprendrez
- Composants fonctionnels et de classe React
- Hooks React - useState, useEffect, useContext
- Gestion de l'état avec Redux Toolkit
- React Router - routage et navigation
- Stylisation avec CSS Modules et Styled Components
- Fetch API et Axios pour la communication avec le backend
- Tests avec Jest et React Testing Library
- Optimisation avec React.memo et useMemo
Programme du coursPremière leçon: Les bases de React.jsÉtape 4
Cours Next.js en ligne
niveau avancé · 9 modules · 688+ exercices · 80-100 heures
Le framework basé sur React pour les applications en production : App Router, rendu côté serveur, Server Actions, base de données, authentification et déploiement.
Ce que vous apprendrez
- Next.js 16 App Router et structure de projet
- Server-Side Rendering (SSR) et Static Site Generation (SSG)
- Régénération statique incrémentale (ISR)
- API Routes et Server Actions
- Intégration de bases de données (Prisma, PostgreSQL)
- Authentification avec NextAuth.js
- Optimisation des images et lazy loading
- Déploiement sur Vercel
Programme du coursPremière leçon: Introduction à React et Next.js
Projets pour votre portfolio
Dans chaque cours, vous construisez des projets que vous pourrez ensuite montrer dans votre portfolio. En voici quelques-uns :
HTML et CSS
Page Pyramide
Construis une landing page sur une pyramide égyptienne avec une galerie de photos et un menu responsive
HTML et CSS
Portfolio du Pharaon
Portfolio complet avec CSS Grid, animations et mode sombre
JavaScript et TypeScript
Dino Tracker
Système de suivi des dinosaures avec géolocalisation et alarmes
JavaScript et TypeScript
DNA Sequencer
Simulateur de séquençage de l'ADN avec visualisation
JavaScript et React
Panneau de contrôle de mission
Tableau de bord de contrôle de mission avec mises à jour en temps réel et graphiques
JavaScript et React
Système de gestion de l'équipage
Application CRUD de gestion d'équipage avec authentification
Next.js
Quantum Dashboard
Tableau de bord admin avec SSR, authentification et base de données
Next.js
Blog du réseau neuronal
Plateforme de blog avec ISR, MDX et commentaires
Combien de temps et combien ça coûte
Les programmes des cours représentent au total 260-370 heures d’apprentissage. À raison de 10 heures par semaine, le parcours complet prend environ 26-37 semaines, mais le rythme ne dépend que de vous.
Vous pouvez lire toutes les leçons gratuitement sur ce site. Dans l’application, le compte gratuit donne accès au cours HTML et CSS avec 10 unités de carburant par jour, et les exercices des cours suivants se débloquent avec un abonnement payant.
Questions fréquentes
Cette formation front-end est-elle faite pour les débutants ?
Oui. Le parcours commence par les bases du HTML, et les deux premiers cours sont de niveau débutant. Il suffit d’un ordinateur avec un navigateur : l’éditeur de code est intégré aux leçons, vous n’avez rien à installer pour commencer.
Combien de temps faut-il pour apprendre le front-end ?
Les programmes des quatre cours représentent au total 260-370 heures d’apprentissage. À raison de 10 heures par semaine, cela fait environ 26-37 semaines. Vous pouvez aller plus vite ou plus lentement, votre progression est enregistrée sur votre compte.
Une formation en ligne suffit-elle pour trouver un emploi de développeur front-end ?
Une formation vous apporte des connaissances et beaucoup de pratique, mais aucune formation ne garantit un emploi. Les recruteurs regardent surtout votre portfolio et votre façon de résoudre des problèmes, c’est pourquoi vous construisez des projets dans chaque cours et les exercices vérifient le code que vous écrivez.
Formation en ligne ou bootcamp ?
Un bootcamp vous donne un emploi du temps fixe et des mentors, mais il coûte plus cher et demande en général plusieurs mois à temps plein. Une formation en ligne vous permet de commencer aujourd’hui et d’apprendre à votre rythme, avec des leçons gratuites. Beaucoup de gens commencent par une formation et décident ensuite pour un bootcamp.
Combien coûte ce parcours ?
Les leçons des quatre cours sont gratuites. Dans l’application, vous pouvez suivre le cours HTML et CSS avec un compte gratuit, tandis que les exercices de JavaScript, React et Next.js demandent un abonnement payant. Les prix à jour sont sur la page des tarifs.
Je connais déjà HTML et CSS. Par où commencer ?
Par le cours JavaScript et TypeScript. Si vous connaissez aussi JavaScript, passez directement à React. La page de chaque cours liste toutes ses leçons, vous verrez facilement ce que vous savez déjà.
Commencez par la première leçon de HTML
Vous pouvez lire la première leçon tout de suite, sans compte. Quand vous voudrez faire les exercices et gagner de l’XP, créez un compte gratuit.