Développement

Développeur Front-End
Réalisez des projets web de A à Z et spécialisez-vous dans l'optimisation des
interfaces de vos sites.

Durée de la Temps d'études

Durée de la
Emploi formation en conseillé à Diplôme niveau
formation :
garanti** alternance : temps plein : 6 (Bac+3/4)*
800 heures
24 mois 12 mois

*Développeur(euse) d'application - NSF 326t - Diplôme niveau 6 (Bac+3/4) - enregistré au RNCP par arrêté du 26/09/2016
publié au JO du 04/10/2016
**Conditions disponibles sur la page https://openclassrooms.com/fr/job-guarantee
Quel est le rôle d’un(e) développeur(se) front-end?

Il ou elle a pour mission de créer des sites dynamiques grâce à un langage de

programmation. Son territoire est la partie front-end, c’est à dire le côté visuel du site,
à l’inverse du développeur back-end. Pour en savoir plus, vous pouvez suivre le cours
Comprendre le Web.

Ses missions sont :

Analyser les besoins à partir du cahier des charges défini par le client ou le chef
de projet ;
Implémenter des mockups avec du code de qualité ;
Optimiser le temps de chargement des pages ;
Communiquer avec les développeurs back-end pour assurer l’échange
d’information dans l’application ;
Utiliser les bonnes pratiques pour structurer le code HTML, CSS et Javascript ;
Utiliser des frameworks comme React pour construire des applications
puissantes et modulaires ;
Tester le bon fonctionnement de l’application et corriger le code quand c’est
nécessaire ;
Assurer le support technique du site et produire une documentation technique
et fonctionnelle du site pour le client.

Développeur(se) Front-End ? Développeur(se) Logiciel ?

Développeur(se) Web ?

En suivant cette formation, vous pourrez travailler en tant que développeur(se) front-
end mais aussi Web.

Vous pourrez également évoluer rapidement vers d’autres métiers du code utilisant
Javascript comme langage de programmation principal. Par exemple, vous pourrez
devenir développeur(se) mobile utilisant React Native ou encore développeur(se)
back-end avec Node.js.

Pourquoi suivre cette formation?

"Les métiers de développeurs ont connu une croissance énorme ces

dernières années. Ils ne sont plus réservés aux entreprises numériques et
aux hommes, toutes les entreprises ont désormais besoin de développeurs
front-end pour leur site web, leurs outils internes, leurs applications mobiles
pour le marketing, etc. Et les femmes sont de plus en plus recherchées dans

Développeur Front-End 2
 ce domaine ! C'est un métier en constante évolution et qui offre de
nombreux débouchés à des emplois divers, dont certains n'existent même
pas encore. Nous sommes fiers de proposer ce parcours de formation,
accessible à tous, qui ouvre les portes du métier de développeur front-end.”

Clara Corazza, Responsable de la filière Code chez OpenClassrooms

Cette formation a été créée par notre équipe pédagogique. Notre méthode
pédagogique est basée sur la réalisation de projets concrets et l’accompagnement
d’un expert métier chaque semaine, votre mentor.

L’idée est simple : pour apprendre efficacement, il est important d’être actif dans son
apprentissage. Au sein de ce parcours, cela passe par la réalisation de projets basés sur
des scénarios issus du monde professionnel. Votre mission : chercher des solutions,
créer vos livrables et les présenter de façon convaincante devant votre mentor ! En plus
d’être une façon d’apprendre plus interactive, vous pourrez directement appliquer
cette expérience en entreprise.

La formation est composée de projets professionnalisants, à la complexité croissante.

Chaque projet vous permettra d’acquérir des compétences spécifiques.

Les compétences acquises grâce à cette formation

Choisir une solution technique adaptée à votre client et travailler en mode Agile ;
Créer des sites webs avec HTML et CSS ;
Créer des applications web dynamiques avec Javascript et React ;
Communiquer avec le back-end de l’application grâce à une API ;
Mettre en œuvre des test unitaires et d’intégration et débugger le code ;
Résoudre des problèmes techniques avec un langage de programmation et des
algorithmes ;
Refactoriser du code pour qu’il soit plus moderne et optimisé.

À la fin de cette formation, vous obtiendrez le diplôme Développeur d’application avec

la spécialité front end.

Développeur Front-End 3
Salaire du Développeur front-end

En suivant la formation “Développeur(se) Front-End”, vous pouvez prétendre aux

rémunérations suivantes :

Débutant(e) : 28 000 € à 35 000 € annuels bruts

Expérimenté(e) : 35 000€ à 45 000 € annuels bruts

Ce profil est très recherché, majoritairement en CDI. Vous pourrez exercer en tant que
Développeur(se) front-end, mais aussi Développeur(se) web, Lead Développeur(se), ou
Développeur(se) Javascript.

Ce parcours peut être effectué en alternance. Plus d'informations.

Evolution professionnelle

En tant que développeur(se) front-end, vous pourrez évoluer de plusieurs manières,

notamment :

En diversifiant vos compétences techniques pour devenir développeur(se) full-

stack, c’est à dire en couvrant à la fois le back end et le front end ;
En vous spécialisant sur une technologie en particulier : React dans cette
formation mais il en existe plein d’autres !
En prenant un rôle plus managérial en tant que Lead Developer ou CTO par
exemple.

Pré-requis

Cette formation est accessible à toutes et tous. Voici cependant quelques

recommandations :

Niveau conseillé : Bac ou équivalent

Pour les apprenants étrangers, un niveau de français B1-B2 (utilisateur
indépendant) est conseillé pour la réussite de la formation

Accès à un ordinateur (PC ou Mac), muni d’un casque, une webcam et une bonne
connexion Internet (3.2 Mbps en envoi et 1.8 Mbps en réception de données). Pour
tester la qualité de votre connexion, cliquez sur ce lien.

Développeur Front-End 4
Projet 1 - 8 heures

Prenez en main votre

formation front-end
Dans notre monde en perpétuelle évolution, savoir apprendre est plus
important que jamais. Prenez une posture d'apprenant actif et autonome afin
de réussir ce parcours et votre future carrière.

Compétences cibles
Élaborer un plan d'apprentissage personnalisé

Cours associés

Apprenez à apprendre
Facile 6 heures

Être capable d'apprendre vite et bien est une compétence clé

qui vous ouvrira les portes de n'importe quel domaine, tout au
long de votre vie. Suivez ce cours pour améliorer votre capacité
d'apprentissage !

Comprendre le Web
Facile 6 heures

Le monde du Web vous intéresse, mais vous n’y connaissez

rien ? Vous décrochez quand vous entendez du vocabulaire
geek ? Imprégnez-vous de la culture du Web avec ce cours !

Développeur Front-End 5
Mettez en place un système de veille
informationnelle
Facile 4 heures

Apprenez à faire de la veille pour vous adapter aux évolutions

de votre métier et à utiliser des outils de veille
informationnelle.

Développez vos soft skills

Facile 6 heures

Les soft skills, comme l’adaptabilité, la collaboration, la

résolution de problèmes, sont des compétences de plus en
plus recherchées. Développez ces compétences transversales
et comportementales.

Découvrez les métiers de développeur

Facile 6 heures

Les codeurs, programmeurs, développeurs... Qu'est-ce que

c'est ? Découvrez les différents métiers du développement, du
Web au mobile, du back-end au front-end. Vous verrez
comment vous former et comment évoluer dans le code.

Développeur Front-End 6
Projet 2 - 70 heures

Transformez une maquette en

site web
Démarrez sur HTML et CSS en intégrant la page Web de Reservia, une
plateforme de réservation de vacances.

Compétences cibles
Intégrer du contenu conformément à une maquette
Utiliser un système de gestion de versions pour le suivi du projet et son hébergement
Implémenter une interface responsive
Mettre en place son environnement Front-End

Cours associés

Utilisez Git et GitHub pour vos projets de

développement
Facile 12 heures

Grâce à Git et GitHub, gérez votre code source et suivez les

modifications apportées à vos fichiers.

Apprenez à créer votre site web avec HTML5 et

CSS3
Facile 20 heures

Vous rêvez d'apprendre à créer des sites web ? Débutez avec

ce cours qui vous enseignera tout ce qu'il faut savoir sur le
développement de sites web en HTML5 et CSS3 !

Développeur Front-End 7
Apprenez à utiliser la ligne de commande dans un
terminal
Facile 6 heures

Apprenez à écrire des lignes de commandes qui vous

permettront de communiquer avec votre ordinateur.

Découpez et intégrez une maquette

Moyenne 6 heures

L’intégrateur web doit découper des maquettes qu’il reçoit

d’un designer. Comment repérer les différentes sections de
son site et les intégrer en HTML et CSS ?

Développeur Front-End 8
Projet 3 - 90 heures

Dynamisez une page web

avec des animations CSS
Implémentez la version mobile d'un site de foodtech avec des animations CSS.

Compétences cibles
Mettre en œuvre des effets CSS graphiques avancés
Assurer la cohérence graphique d'un site web
Mettre en place une structure de navigation pour un site web

Cours associés

Simplifiez-vous le CSS avec Sass

Moyenne 15 heures

Apprenez à écrire du code CSS propre, maintenable et

modulable dans des fichiers de style .scss. Vous utiliserez Sass
la méthodologie BEM.

Créez des animations CSS modernes

Moyenne 15 heures

Vous souhaitez animer votre site web avec des animations CSS
? Ce cours est fait pour vous ! Vous y découvrez notamment les
keyframes et les transitions pour créer des sites dynamiques et
modernes.

Développeur Front-End 9
Projet 4 - 30 heures

Créez une landing page avec

Javascript
Démarrez le Javascript avec le site de GameOn, une entreprise de gaming. Dans
ce premier projet de code, vous apprendrez à programmer avec Javascript
depuis zéro.

Compétences cibles
Programmer en JavaScript

Cours associés

Apprenez à programmer avec JavaScript

Facile 15 heures

Établissez une base solide en développement web en

apprenant et en pratiquant JavaScript, l'un des principaux
langages de programmation sur le web et créez une
application simple !

Écrivez du JavaScript pour le web

Moyenne 12 heures

Utilisez vos connaissances en JavaScript pour créer des pages

web dynamiques. Apprenez à utiliser le DOM, AJAX et à créer
des requêtes HTTP. Cela permettra à vos utilisateurs d'interagir
avec votre service.

Développeur Front-End 10
Projet 5 - 1 heure

Testez vos compétences : les

langages du Web
Faites le point sur votre avancée en HTML, CSS et JavaScript avec des exercices
interactifs pour vous entraîner.

Compétences cibles
Écrire la syntaxe HTML, CSS et JavaScript

Développeur Front-End 11
Projet 6 - 70 heures

Créez un site accessible pour

une plateforme de
photographes
Allez plus loin en Javascript avec Fisheye, cette application de photographes
freelances. Portez une attention toute particulière au fait de rendre cette
application accessible à tous.

Compétences cibles
Assurer l'accessibilité d'un site web
Développer une application web modulaire avec des design patterns
Ecrire du code JavaScript maintenable
Gérer les évènements d'un site avec JavaScript

Cours associés

Concevez un contenu web accessible

Facile 6 heures

Découvrez comment les personnes en situation de handicap

utilisent les technologies d'assistance. Évaluez les barrières à
l'accessibilité numérique et concevez des contenus inclusifs
grâce aux règles WCAG, du design visuel aux interactions.

Codez un site web accessible avec HTML & CSS

Moyenne 6 heures

Intégrez les principes d'inclusion numérique à vos développements HTML & CSS avec ARIA, les
balises alt, et autres outils pour l'accessibilité. Vous utiliserez les règles WCAG du W3C.

Développeur Front-End 12
Projet 7 - 90 heures

Développez un algorithme de
recherche en JavaScript
Implémentez un algorithme de recherche de recettes de cuisines pour le site
Les Petits Plats grâce à des outils et méthodes avancées de Javascript ainsi que
Bootstrap pour l'interface.

Compétences cibles
Analyser un problème informatique
Développer un algorithme pour résoudre un problème

Cours associés

Découvrez le fonctionnement des algorithmes

Facile 4 heures

L’algorithmique est l’art de décomposer les étapes d’une

solution à un problème sous forme d’instructions précises
pour des programmes informatiques. Apprenez à faire votre
algorithme !

Développeur Front-End 13
Projet 8 - 1 heure

Testez vos compétences : les

algorithmes en JavaScript
Faites le point sur votre avancée en JavaScript et l'utilisation des algorithmes
avec des exercices interactifs pour être prêts pour les entretiens techniques.

Compétences cibles
Écrire la syntaxe JavaScript en utilisant un paradigme de programmation

Développeur Front-End 14
Projet 9 - 60 heures

Débuggez et testez un SaaS

RH
L'application de gestion de notes de frais Billed est pleine de bugs. Corrigez le
code et implémentez des tests unitaires et d'intégration pour que ce ne soit
plus le cas.

Compétences cibles
Débugger une application web avec le Chrome Debugger
Ecrire des tests d'intégration avec JavaScript
Ecrire des tests unitaires avec JavaScript
Rédiger un plan de test end-to-end manuel

Cours associés

Testez l'interface de votre site

Moyenne 4 heures

Les tests automatisés permettent de vérifier en continu si

votre application fonctionne comme prévu. C'est une aide
indispensable pour tous les développeurs frontend
professionnels.

Développeur Front-End 15
Projet 10 - 50 heures

Définissez les besoins pour

une app de soutien scolaire
Définissez les besoins pour votre nouveau client, une association de soutien
scolaire. Vous utiliserez les outils agiles comme les User Stories.

Compétences cibles
Contribuer à un projet en utilisant une méthodologie agile
Créer une maquette pour un client
Identifier les besoins de l'application à partir d'un cahier des charges
Modéliser une solution technique pour un client

Cours associés

Initiez-vous à la gestion de projet agile

Facile 6 heures

Vous devez vous approprier les bonnes pratiques de

l'intelligence collective et de l'expérience utilisateur pour
coacher votre équipe.

Gérez votre projet informatique facilement

Facile 4 heures

Gérez un projet informatique de manière professionnelle en

utilisant les méthodologies agiles.

Développeur Front-End 16
Réalisez un cahier des charges fonctionnel
Moyenne 8 heures

Apprenez à recueillir les besoins d'un client, à gérer les

différentes parties prenantes, et à appliquer une méthodologie
agile pour construire un cahier des charges fonctionnel
efficace.

Concevez une interface cliquable

Moyenne 8 heures

Concevez une interface cliquable en créant vos propres

wireframes avec des méthodes UX comme le zoning.
Découvrez des méthodes de réalisation d'un prototype
comme celle du Design Sprint.

Appliquez le principe du Domain-Driven Design à

votre application
Facile 4 heures

Avec le Domain-Driven Design ou DDD, communiquez une

architecture technique. Utilisez la méthode UML, les
diagrammes de cas d’utilisation et de classe.

Développeur Front-End 17
Projet 11 - 60 heures

Développez une application

Web avec React et React
Router
Implémentez le front end de Kasa, une application de location de logements.
Mettez en place des composants avec React et les routes de l'application avec
React Router.

Compétences cibles
Créer des composants avec React
Développer les routes d'une application web avec React Router
Initialiser une application web avec un framework

Cours associés

Réalisez une application web avec React.js

Moyenne 20 heures

Découvrez React.js, le framework basé composants pour

réaliser des interfaces riches et faciliter leur maintenance. Vous
verrez les fondamentaux de React.js et comment tester votre
code.

Développeur Front-End 18
Projet 12 - 60 heures

Développez un tableau de
bord d'analytics avec React
Intégrez des graphiques et des diagrammes avec React pour SportSee, un
tableau de bord d'analytics de sport. Vous utiliserez une API pour récupérer les
données.

Compétences cibles
Assurer la qualité des données d'une application
Développer des éléments graphiques avancés à l'aide de bibliothèques JavaScript
Interagir avec un service Web
Produire de la documentation technique pour une application

Cours associés

Adoptez les API REST pour vos projets web

Facile 4 heures

Enrichissez vos projets web avec les API REST en accédant à

des données qui pourront être intégrées dans vos propres
applications. Les API apporteront une nouvelle dimension à
vos logiciels !

Écrivez la documentation technique de votre

projet
Moyenne 6 heures

Documentez votre projet de manière claire et maintenable

avec les conventions de nommage, README, ou encore les
outils de documentation d'API, ainsi qu'un document
d'architecture technique.

Développeur Front-End 19
Projet 13 - 100 heures

Utilisez une API pour un

compte utilisateur bancaire
avec React
Remede Agency a besoin de vous pour compléter le code de leur site. Vous
écrirez des appels à l'API REST pour connecter le front au back et vous
modéliserez une API.

Compétences cibles
Implémenter un gestionnaire d'état dans une application React
Intéragir avec une API
Modéliser une API
S'authentifier à une API

Cours associés

Organisez votre application avec la logique Redux

Moyenne 15 heures

Apprenez à utiliser Redux pour gérer l'état de votre projet

React professionnel et de taille ambitieuse. Vous verrez
également comment intégrer les appels d'API à votre projet.

Développeur Front-End 20
Projet 14 - 110 heures

Faites passer une librairie

jQuery vers React
Participez à la conversion de HRnet vers React. Vous allez transformer un plugin
jQuery du site en React, vous pourrez même choisir celui que vous voudrez !

Compétences cibles
Analyser la performance d'une application web
Déployer une application front-end
Programmer en JavaScript avec la programmation fonctionnelle
Refondre une application pour réduire la dette technique

Développeur Front-End 21
 lternance
OpenClassrooms, 1ère école en ligne
à proposer des formations diplômantes

L'alternance en ligne permet à l'entreprise et à l'étudiant de trouver le meilleur

rythme adapté à leurs besoins respectifs.
Côté étudiant :
une formation diplômante
et 100% financée
L'alternance est une modalité de formation qui mêle acquisition des
connaissances (en ligne) et des compétences (en entreprise).

Comment se déroule Est ce que la

un parcours en formation en
alternance alternance a un coût
OpenClassrooms ? pour l'étudiant ?

Après avoir choisi le parcours de La formation en alternance est

formation qui lui convient, l'étudiant gratuite ! Une rémunération est
bénéficie d'un accompagnement également prévue : jusqu'à 100% du
gratuit de 2 mois pour trouver son SMIC en fonction de votre âge et de
entreprise. votre année de formation.

La formation peut se réaliser en contrat Pour se lancer, une seule adresse :

de professionnalisation ou openclassrooms.com/fr/apprenticeship
d'apprentissage. Rendez-vous à la page
suivante pour savoir lequel choisir !
Côté entreprise :
l'accès à des profils qualifiés
toute l'année, en toute
simplicité !
OpenClassrooms est la 1ère école en ligne à proposer des formations en
alternance, aux titres reconnus par l'État de niveau Bac+2 à Bac+5, sur des
métiers en tension, très recherchés par les recruteurs. Les formations en
alternance peuvent être financées, soit par la taxe d'apprentissage, soit par
les OPCO (Opérateurs de Compétences).

Comment lancer des Quand peut-on

parcours lancer une démarche
d'alternance au sein d'alternance au sein
de l'entreprise ? de l'entreprise ?

Pour chercher des profils à recruter en À tout moment : le contrat peut

alternance ou lancer le recrutement d'un démarrer tout au long de l'année, il n'y a
étudiant déjà identifié, n'hésitez pas à pas de date de rentrée imposée.
contacter :
job.placement@openclassrooms.com

Les équipes d'OpenClassrooms vous

accompagnent à chaque étape d'une
démarche d'alternance, du dossier de
financement au suivi de vos alternants.
Pourquoi l'alternance
en ligne ?
Les avantages de l’alternance OpenClassrooms sont nombreux : date de début
flexible, formations créées par des experts métiers, accompagnement
personnalisé, formation financée...
1. Une formation gratuite 2. Une solution flexible,
pour l'étudiant et financée adaptée aux besoins de
pour l'entreprise l'étudiant et de l'entreprise

La formation est gratuite. Le contrat peut démarrer à tout

moment de l'année.
Dans le cadre d'un contrat de
professionnalisation, elle est 100% Il est possible de faire soit un contrat
financée par votre OPCO. de professionnalisation, soit un contrat
d'apprentissage.
Dans le cadre d'un contrat
d'apprentissage, elle est financée par la Le(s) jour(s) dédié(s) à la formation est
taxe d'apprentissage que paient les (sont) flexible(s) en fonction de
entreprises privées. l'organisation de l'étudiant et de
l'entreprise.

3. Une formation de 4. Un accompagnement

qualité, conçue pour une dédié à chaque étape,
application directe au sein pour l'étudiant comme
de l'entreprise. pour l'entreprise

Les formations OpenClassrooms sont Des profils d'étudiants disponibles et

professionnalisantes. Elles sont conçues pré-sélectionnés par nos experts pour
par et pour l'entreprise, sur des métiers répondre à vos besoins en recrutement
recherchés. sur toute la France.

Les formations OpenClassrooms sont Un accompagnement par nos

de qualité, avec des diplômes inscrits au conseillers pédagogiques à chaque
RNCP (Répertoire National des étape de l'alternance.
Certifications Professionnelles) et dont
Un point de suivi hebdomadaire par un
les niveaux sont reconnus par l'État.
mentor individuel pour motiver
Une plateforme collaborative favorise l'étudiant et l'accompagner pendant
les échanges entre apprentis et aide à la toute sa formation.
recherche d'emploi.

Des espaces de coworking sont

proposés dans toute la France.
Tout savoir sur les
contrats d'alternance
Une question ? Un projet ?
Contacter : job.placement@openclassrooms.com
Contrat de
professionnalisation
1 jour en formation / 4 jours en entreprise.

L'entreprise embauche l'étudiant en CDD sur 12 ou 24 mois (selon le parcours de

formation).
La formation est financée par un OPCO. OpenClassrooms est référencé dans les
principaux OPCO grâce à ses titres certifiés et sa certification Datadock.
L'entreprise fait la démarche de demande de prise en charge auprès de son OPCO.
Nos équipes sont présentes à chaque étape pour l'accompagner.
L'étudiant est rémunéré sur une base qui va de 65% à 100% du SMIC (pour un
étudiant de plus de 26 ans).
Si l’étudiant a plus de 26 ans et est demandeur d’emploi, Pôle Emploi octroie une
aide à l’emploi à l’entreprise.

Contrat
d'apprentissage
2 jours en formation / 3 jours en entreprise.

L'étudiant est embauché sur 12 ou 24 mois selon sa formation.

Le contrat d’apprentissage concerne les personnes de 16 à 29 ans révolus (sans limite
d’âge pour les publics RQTH, mais aussi les créateurs d’entreprise, les sportifs de haut
niveau et l’encadrement de haut niveau).
Le contrat d’apprentissage peut être signé par les employeurs dans le secteur public
et les entreprises privées.
La formation est 100% financée grâce à la taxe d’apprentissage pour les
entreprises du secteur privé. Pour le secteur public, une convention financière est
établie entre OpenClassrooms et l’employeur.
Une rémunération de l’apprenti est prévue : jusqu’à 100% du SMIC en fonction de son
âge et de l’année de sa formation.
Notre CFA vous accompagne dans toutes les démarches administratives concernant
la mise en place de contrat d’apprentissage.