Objectifs de la formation
Envie de décrocher un poste de développeuse ou développeur front-end ? D’être autonome dans
la création de sites Internet ? Alors suivez notre formation Développeur Web Front End. Ouverte
à toutes et à tous, elle vous permettra d’acquérir la connaissance des langages de
programmation HTML, CSS et Javascript, et d’intégrer un site Internet de manière moderne. Un
parcours mélangeant autonomie, pratique et accompagnement sur mesure d’un Mentor
individuel.
● Connaître l’environnement, les outils et les technologies web
● Maîtriser les langages HTML, CSS et Javascript
● Savoir s’appuyer sur des frameworks pour optimiser son temps
● Intégrer de manière moderne et responsive un projet web
● Maîtriser les technologies les plus modernes (flexbox, css grid…)
● Connaître les bases du référencement web
● Savoir exporter et optimiser ses images depuis Photoshop
● Être autonome dans ses choix techniques et savoir les défendre
En résumé
● Cours 100% en vidéo.
● 262h de formation en ligne.
● 3h d’échanges individuels en visio avec un Mentor dédié.
● Des ateliers pratiques.
● 1 projet professionnel à présenter.
● Prix : 1 572€ HT
● Financement jusqu’à 100% via Pôle emploi ou OPCO.
● Inscription possible directement via votre compte CPF.
Contactez-nous pour en parler ou pour établir un devis gratuit. On répond à toutes vos questions
et on vous accompagne sur la création de votre dossier pour pouvoir commencer au plus vite.
Pourquoi choisir Tuto.com ?
Tuto c’est 12 ans d'expérience dans la formation en ligne, et des milliers d’apprenants satisfaits.
Des Avis Excellents
“Ce fut une bonne expérience dans l'ensemble ! “
Sabrina Renel - Apprenante sur le parcours Dev Front End
“Formation stimulante avec des formateurs qualifiés et à l'écoute, je recommande.“
Alain Krannitz - Apprenant sur le parcours Dev Back End PHP
> Voir tous les avis sur Trustpilot
Des témoignages d’anciens apprenants
Objectifs, organisation pour suivre la formation, bénéfices tirés… Découvrez les témoignages de
ceux qui ont suivi nos parcours de formation.
Toutes les clés pour réussir
De plus, chez nous pas d’options surprises, tous les éléments essentiels à votre réussite sont
compris dans le tarif annoncé :
● Accompagnement individuel d’un Mentor expert.
● Communauté d'apprenants et salons d’entraide.
● Équipe support présente et réactive.
● Contenu du parcours disponible à vie.
● Formateurs professionnels dans leurs domaines.
● Exercices pratiques et projet pro à présenter.
● Entièrement finançable.
● Démarrage toute l'année.
Méthode Pédagogique
Le parcours de formation s’appuie sur des cours 100% en vidéo afin de vous laisser autonome
et libre de vous organiser comme vous le souhaitez.
Le soutien d’un Mentor professionnel, d’une communauté d’apprenants et de l’équipe support
en cas de besoin, vous permet de ne jamais vous sentir seul !
Un dispositif complet pour votre apprentissage
Un apprentissage 100% en vidéo
Plus efficace qu’un livre et plus accessible qu’une formation traditionnelle, la vidéo permet un
apprentissage progressif et favorise l’ancrage mémoriel grâce à la répétition.
Vous êtes libre d'organiser vos temps de formation comme vous le souhaitez grâce à des cours
100% en ligne, accessibles d’où vous voulez, 24h/24.
Des exercices pratiques
De nombreux exercices pratiques et ateliers spécifiques viennent compléter les apports
théoriques. Ils permettent de tester régulièrement les acquis.
Des ressources multiples, disponibles à vie
La formation s’accompagne de nombreux fichiers sources, supports et templates qui
agrémentent votre formation. Les vidéos de formation ainsi que les ressources de travail restent
accessibles sur votre compte tuto.com, même après la fin de votre formation.
Une communauté d’entraide
Une communauté d'apprenants et d’alumni est disponible sur Slack pour échanger sur les
difficultés rencontrées, donner des retours sur vos réalisations ou répondre à vos questions.
Les salons d'entraide vous permettent de poser des questions directement aux formateurs.
Vous êtes autonome mais jamais vraiment seul 😉
4/19 Contact :
[email protected] Un Mentor individuel
Un Mentor professionnel, expert dans son domaine, vous est attribué en début de parcours.
Vous échangez en direct (audio ou vidéo, au choix) lors de sessions individuelles librement
programmées. Il personnalise votre apprentissage, donne ses retours sur votre travail et vous
coache pour vous aider à avancer !
Un projet Pro
En fin de formation, vous préparez un projet professionnel de façon autonome, afin de mettre en
pratique les notions acquises pendant votre cursus. Vous présentez votre projet à votre Mentor.
Une équipe dédiée
Une équipe dédiée aux parcours, sympa et réactive, est présente pour répondre à vos questions,
maintenir votre motivation et vous accompagner vers la réussite.
Un certificat de complétion
Une fois la formation suivie, les tests passés et le projet pro validé, vous obtenez un certificat de
complétion que vous pourrez fièrement arborer. Ce dernier atteste de vos nouvelles
compétences.
Le Programme de la formation
Les temps indiqués comprennent les temps de cours + les temps de mise en pratique /
exercices.
SESSIONS LIVE / 3H
Le parcours est rythmé par 3H de sessions Live en visioconférence avec votre mentor, qui
pourra répondre à vos questions, vous coacher et vous accompagner tout au long de votre
formation.
MODULE 1 : Les fondements du Web et de la programmation /
4H20
Avant de nous lancer dans le code et le monde de l’intégration, il est primordial de bien
comprendre comment fonctionne Internet et quelles sont les différentes technologies offertes
pour mener à bien vos projets de création de sites web.
Compétences développées
Les notions de bases
● La programmation c'est quoi ? Les métiers (différences intégrateur et développeur)
● Comment fonctionne un site Internet (serveur, base de données, poste client)
● L'hébergement web : serveur mutualisé, serveur dédié, cloud
● Les bases de données et les différents types de techno (SQL, Mysql, MangoDB,
NoSQL...) API
● Accessibilité et W3C
● Le web responsif / Le web mobile
● Hybridation mobile / desktop
Les langages WEB
● Les frameworks (Symfony, CodeIgniter, Laravel, Bootstrap...), le modèle MVC
Organisation / Gestion de Projet
● Intro
● Les méthodes AGILE (Scrum, Kanban) UML & Merise
● Le versionning (GIT)
● Le refactoring
● Les tests unitaires
● Commenter son code
Les outils
● IDE (StormPHP, Netbeans, Brackets, Sublime Text...)
● Wysiwyg (Dreamweaver)
● Les langages HTML HTML5 CSS Javascript PHP MySQL Ruby / ROR Python Jquery
NodeJS Angular Services Web Json
Notions Communes en programmation
● Les variables
● Les conditions
● Les boucles
● Les fonctions
● La POO
MODULE 2 : Apprendre le HTML et le CSS / 30H
Rentrez dans le vif du sujet. Dans ce module vous allez apprendre les bases du HTML et du CSS,
les 2 langages que vous utiliserez le plus lorsqu’il s’agit d’intégration front-end.
Compétences développées
Introduction
● Assimilation du vocabulaire
● Structure d’une page web
● L’imbrication de balises
Les bases du HTML
● Premiers codes en HTML
● Découverte des balises de base
● Premier exercice pratique sur les balises HTML
● La maîtrise des liens et des images en HTML
Les bases du CSS
● Les sélecteurs
● L'héritage
● Les DIV
● Les Block et inline
● Les SPAN
● Les bordures
● Les marges
● Les ombres
● Les positionnement
● Les propriétés
● Les couleurs
● Les images
● Les tableaux
● La gestion du texte
● Les formulaires
● Les médias
● Les méta
Atelier pratique
Nous verrons comment l'aborder de manière professionnelle. Nous réaliserons un site Internet
100% responsive (notre site pourra s'afficher aussi bien sur un écran d'ordinateur, que sur une
tablette ou un téléphone).
MODULE 3 : Flexbox, CSS Grid et Responsive Design / 28H
Le workflow du développeur front-end évolue sans cesse. Les pages web doivent aujourd’hui
s’adapter à de nombreux terminaux (smartphone, tablette, desktop, TV connectée, montre
connectée…). Des techniques modernes vous permettent de gagner en flexibilité dans la
construction de vos pages web. Nous verrons dans ce chapitre les toutes dernières avancées en
termes de techno avec Flexbox et CSS Grid !
Compétences développées
Découverte de Flexbox et pratique
Flexbox va vous permettre de positionner de manière plus fluide tous les éléments de vos sites
Internet. Vous verrez dans ce cours, toutes les propriétés liées à Flexbox ainsi que toutes leurs
valeurs.
En cas pratique, nous réaliserons le squelette d'un site Internet totalement Responsive, en
utilisant la technique des flexbox.
Intégration et responsive Web Design
● Vous vous familiarisez avec les notions de :
● Responsive
● L'approche mobile first
● L’approche desktop first
● Les avantages et inconvénients des 2 approches
Découverte de CSS Grid
Vous découvrirez l’utilisation de la grille CSS pour mettre en place des mises en page rapides et
faciles. Nous verrons :
● Le conteneur et ses propriétés
● Les contenus et leurs propriétés
● Le déplacement des contenus
● Un exemple pratique de construction d’une maquette de site responsive
● 5 cas concrets pour mettre en application vos compétences en CSS grid. Les cas
abordés alternerons approches mobile first et desktop first
● Un dernier projet : créer des colonnes de type journal en CSS
MODULE 4 : L’apprentissage de Javascript et de jQuery / 21H
Ce module se focalise sur l’apprentissage de l’autre brique essentielle et complémentaire au
HTML et CSS : le Javascript. Un fois formé aux notions fondamentales, vous apprendrez à
utiliser une bibliothèque Javascript : jQuery.
Compétences développées
L’apprentissage de Javascript
● La syntaxe du Javascript
● Variables
● Les instructions conditionnelles
● Les boucles
● Les fonctions
● La création et la manipulation d’objets
● Les objets natifs
● La maîtrise du DOM
● L’accès aux éléments par les noeuds
● Exercice pratique : sticky menu
L’apprentissage de jQuery
● Installation de jQuery
● Les bonnes pratiques
● Les sélecteurs
● Les événements
● Les effets
● Les animations
MODULE 5 : Ajouter du mouvement (vidéo et animation) /20H
Ce module est 100% basé sur la pratique. Avec plus de 10 exercices concrets, vous apprendrez
à ajouter du mouvement à vos sites Internet. Animation, vidéo, les cas les plus rencontrés
seront abordés.
Compétences développées
● Les bases de l’animation en CSS
● Les Effets de parallaxe
● Créer une barre de compétences animée
● Créer un background intelligent
● Dévoiler un footer au scroll
● Animer un menu burger
● Créer un background animé
● Motion Web Design : cas pratique avec un icône animé
● Les effets de Hover avancés
● Créer un background en vidéo
● Créer un background avec dégradés animés
MODULE 6 : L’intégration de formulaires / 18H
Le formulaire est un élément indispensable que le développeur front-end doit savoir maîtriser.
Ce module est intégralement dédié aux types de formulaires les plus fréquemment rencontrés.
Compétences développées
● Formulaire HTML et CSS
● Formulaire avec jQuery
● Ajouter un captcha
● Faire communiquer votre formulaire avec une base de données et PHP
● Formulaire d’upload
● Formulaire avec checkbox
MODULE 7 : Front-end avec Framework et CMS / 18H
Pour gagner du temps, le développeur front-end sera parfois amené à déployer des sites
Internet en se basant sur un framework HTML/CSS/Javascript comme Bootstrap, ou bien à
déployer un site via un CMS comme WordPress. Nous vous proposons dans ce module de
découvrir ces 2 types d’intégration, qui, dans bien des cas, vous permettront de gagner du
temps.
Compétences développées
L’intégration avec Bootstrap
● Introduction
● Découvrir la grille de Bootstrap
● Utiliser les classes pour Flexbox
● Réalisation d’une page complète et responsive
Apprendre à Utiliser WordPress
● Installation de WordPress
● Gérer le contenu de notre site
● Gérer les médias
● Gérer les utilisateurs
● Gérer l'interface
● Les thèmes
● Les extensions
● Mettre notre site en ligne
Créer son propre thème WordPress
● Les conseil pour uns structure propre
● Lier des fichiers CSS et JS à un template
● La hiérarchie des templates
● Ajouter des menus dynamiques
● Utiliser la boucle de WordPress
● Afficher un post seul
● La gestion des commentaires
● Les Widgets
● Les archives
● Créer un type de post personnalisé
● Ajouter une page de contact
● Gérer une page 404
MODULE 8 : Aller plus loin avec CSS / 12H
Dans ce module, vous irez encore plus loin dans la maîtrise de CSS. 30 astuces pratiques vous
seront présentées. Vous apprendrez de plus à utiliser SASS pour maintenir plus facilement votre
code.
● 30 astuces CSS
● La maîtrise de SASS
MODULE 9 : Les autres compétences du Dev front-end / 17H
Ce module aborde les compétences complémentaires que doit savoir maîtriser un bon dev front
end.
Compétences développées
Les bases du référencement SEO
● Introduction au SEO
● Les mots-clés
● La cohérence de l’architecture SEO
● Les balises importantes en HTML pour le référencement
● L’importance du contenu
● Booster la popularité de vos pages
● Le planning éditorial
Les Bases de Photoshop
En tant que futur Développeur Front End, vous allez sans doute rencontrer des cas dans lesquels
vous devrez ouvrir Photoshop pour récupérer un PSD, exporter une partie d’un webdesign,
optimiser une image… Ce module vous permettra de devenir à l’aise avec le logiciel.
MODULE 10 : MÉTHODOLOGIE / 11H
Dans ce dernier module vous allez apprendre à travailler avec GIT pour mieux gérer vos projets,
notamment si vous travaillez en équipe, grâce au versionning de vos fichiers. Vous verrez
également comment mieux vous organiser avec Trello. Enfin, un cours est consacré à celles et
ceux qui souhaitent lancer leur activité d’intégrateur en Freelance.
Compétences développées
Mieux travailler avec GIT et GITHUB
● Introduction à Git
● Les branches
● Git flow pour gérer vos projets au quotidien
● Introduction à Github
● Github pour travailler en solo
● Github pour travailler en équipe
● Créer une présence sur le web grâce à Github
Gérer ses projets avec Trello
● Découvrir l’interface
● Les cartes
● Le travail d’équipe
● Le partage et la recherche
Comment se lancer en indépendant
● Le statut à choisir
● Le paiement de vos charges sociales
● Les obligations comptables
● Créer un modèle de facture
● La cessation de votre activité
PROJET PROFESSIONNEL / 80H
Un PSD vous est fourni. L’intégration utilisera le HTML, le CSS et le Javascript. Votre intégration
finale doit présenter une architecture structurée, des images optimisées et un code propre. Le
tout en prêtant attention à l’importance du temps de réponse et la qualité SEO du projet.
PRÉSENTATION ORALE DU PROJET PROFESSIONNEL / 1H
L’aboutissement de votre formation Développeur Web Front End passe par la présentation orale
de votre projet professionnel à votre Mentor, en visioconférence.
L’évaluation des compétences
Les évaluations intermédiaires
En contrôle continu, elles peuvent prendre plusieurs formes :
● Présentations courtes : questions à l’oral pendant une session live
● Travaux pratiques indépendants à rendre
● QCM à la fin d’un module
Grand Oral : la présentation du projet final
Le projet Pro, validé en amont avec le mentor, devra mettre en pratique les différentes
compétences clés abordées lors de la formation et répondre à un cahier des charges défini.
À l’issue de la présentation “grand oral”, le mentor évalue le projet et délibère sur la validation
des compétences du candidat.
> Validation : Pour valider son parcours, l’apprenant doit avoir une note moyenne
générale minimale de 10/20.
Moyenne Générale correspond à la moyenne des notes suivantes :
Moyenne QCMs Modules : coef 1
Projet Professionnel : coef 2
Le certificat de complétion ou le parchemin de la certification seront édités et téléchargeables en
ligne dans les 30 jours qui suivent la fin de la formation.
Passage de la Certification
Bloc de compétences RNCP37805BC01 - Développement Front End de
sites et applications web.
Mise en situation professionnelle, projet : Le candidat réalise l’intégration complète du site
internet ou de l’application en utilisant les dernières versions des langages de balisage HTML et
CSS. Il développe en utilisant le JavaScript les animations et différentes interactions utilisateur
demandées dans le cahier des charges. Il réalise le déploiement du site internet ou de
l’application sur le serveur. Le candidat présente le résultat de son travail, le code source et
argumente son travail effectué concernant le référencement naturel et le respect des normes
d’accessibilité (Critères RGAA) auprès des jurys de professionnels.
Prérequis & matériel
● Tout public.
● Tout niveau. Aucun prérequis hormis l’utilisation courante d’un ordinateur.
● Avoir accès à une bonne connexion Internet.
● Posséder un ordinateur, PC ou MAC, assez puissant pour les logiciels lors des mises en
pratique.
● Posséder le(s) logiciel(s) étudié(s). Les logiciels et plug-ins nécessaires ne sont pas
fournis avec la formation. Cependant nous pouvons proposer l’accès à certains logiciels
dans leur version d’essai, ou à des tarifs étudiants. Contactez-nous pour en savoir plus.
Informations relatives aux personnes en situation de handicap : nos parcours de formation
sont 100% en ligne. Ces derniers font appel à des techniques audiovisuelles et ne sont pas
optimisés pour les personnes atteintes de surdité ou de cécité. Des prises en charges
spécifiques pour le suivi de nos parcours sont indiquées dans cet article.
Débouchés
● Les développeurs et développeuses Web sont très recherchés et le seront de plus en
plus. Chacun son langage de prédilection et sa spécialité. Le/la développeur/se
front-end s’occupe de programmer toute la partie visible d’un site ou d’une application
mobile. Il ou elle peut donc travailler en entreprise de toute taille, en agence ou en
freelance.
● Le salaire moyen en début de carrière se situe vers 35 000€ bruts, et évolue en fonction
de l'expérience et des différents langages maîtrisés. Il ou elle peut également évoluer
vers le métier de Dev Full Stack.
● Les offres d’emploi sont très nombreuses.
Financement
Nos parcours de formation mentorés peuvent être financés par :
● CPF, via votre compte MonCompteFormation - 88% de nos apprenants sur un parcours
CPF n'ont pas de reste à charge.
● Pôle emploi, via l’Aide Individuelle à la Formation (AIF) - à raison de 25h par semaine.
● Un plan de formation Entreprise, via l’OPCO : trouver votre OPCO
● Votre OPCO en tant qu'auto-entrepreneur : trouver votre OPCO
● Autofinancement : vous pouvez autofinancer votre parcours dans sa totalité. Dans ce
cas, nous pouvons vous proposer un échéancier sur 5 mois.
Délais
Les inscriptions sont ouvertes toute l’année, il n’y a pas de dates de sessions imposées.
Le délai minimum avant de pouvoir démarrer votre formation, ainsi que le temps maximum pour
la compléter, dépendent de votre moyen de financement.
Temps de formation
Financement Délai minimum avant démarrage
maximum
Pôle emploi (AIF) 1 mois après l'édition du devis 6 mois
CPF 14 jours ouvrés (délai de rétractation) 12 mois
Co-financement
1 mois après l'édition du devis 12 mois
CPF / AIF
OPCO 1 mois après l'édition du devis 12 mois
À réception du paiement par virement
Autofinancement 12 mois
( 2 jours ouvrés minimum)
Contactez-nous
Vous avez des questions à propos de cette formation ou de son financement ?
Vous souhaitez obtenir un devis gratuit ? N’hésitez pas à nous contacter :
● Prendre RDV pour un appel téléphonique à l’heure qui vous convient.
● Nous contacter par e-mail :
[email protected] ● Nous appeler : (+33) 01 84 80 80 29 - du lundi au vendredi, 10h-12h /14h-16h.
● Nous écrire : SAS WEECAST - 31 Rue d’Alger - 83000 Toulon France.
Contact Formation Professionnelle : Lionel Riccardi
Ils nous font confiance
Tous les jours des entreprises et des milliers d’apprenants se forment avec tuto.com.
Nous sommes organisme de formation certifié
● Tuto.com est prestataire de formation agréé (enregistré sous le numéro 93 83 04618
83). Cet enregistrement ne vaut pas agrément de l’État.
● Tuto.com est certifié qualité Qualiopi pour ses actions de Formation, depuis le 04 Février
2020. Certificat n°: FR056803-3 / Affaire n° 8571006.
● Tuto.com est centre certificateur officiel ISOGRAD® pour les certifications TOSA®.
● Tuto.com est centre habilité ICDL® pour les certifications PCIE – Passeport de
Compétences Informatique Européen.
Pour résumer !
