Formation Développeur Web Front End

Apprenez à assembler, coder et publier un site Internet !

  • 262H
  • 100% à distance
  • Mentor individuel
  • Certification Tuto.com

Objectifs de la formation

  • Connaître l’environnement, les outils et les technologie 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
  • Etre autonome dans ces choix techniques et savoir les défendre
Intro
Introduction : Votre parcours commence maintenant
30m
Résumé

Accédez à notre communauté privée d'apprenants qui suivent actuellement un Parcours Pro. Vous pourrez ainsi poser vos questions librement aux mentors et échanger avec vos camarades de "classe" !

Module 1
Les fondements du Web et de la programmation
4h
Résumé

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.

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
  • 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
Examen QCM intermédiaire
Module 2
Apprendre le HTML et le CSS
30h
Résumé

Rentrez dans le vif du sujet. Dans ce module vous allez, en vous basant sur la pratique 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.

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
Les sélecteurs CSS à connaître absolument

La connaissance des sélecteurs permet de pouvoir cibler des éléments avec une très grande précision ! Pour chaque sélecteur étudié dans ce cours, vous aurez accès à un tuto vidéo dédié. En bonus un PDF pour mieux mémoriser ces sélecteurs.

Maîtriser le positionnement en CSS

Découvrez les positions CSS : absolute, relative, fixed, et static que toute personne qui souhaite faire de l'intégration doit connaître et maîtriser, puisqu'on les retrouve dans toutes les intégrations HTML / CSS.

  • fixer des éléments sur le viewport (navigation fixe, boutons de réseaux sociaux)
  • superposer des éléments
  • l'intégration de petits éléments graphiques en utilisant les pseudo éléments :before et :after (décorations sur des titres, icônes sous des liens ..)
  • faciliter l'intégration de manière globale quand elles sont bien utilisées
Examen QCM intermédiaire
Module 3
Flexbox, CSS Grid et Responsive Design
28h
Résumé

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 !

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
  • 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
Examen QCM intermédiaire
Module 4
L’apprentissage de Javascript et de jQuery
21h
Résumé

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 [removed] jQuery.

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
Atelier Pratique Javascript
L’apprentissage de jQuery
  • Installation de jQuery
  • Les bonnes pratiques
  • Les sélecteurs
  • Les événements
  • Les effets
  • Les animations
Examen QCM intermédiaire
Module 5
Ajouter du mouvement (vidéo et animation)
20h
Résumé

Ce module est 100?sé 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.

  • 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
Examen QCM intermédiaire
Module 6
L’intégration de formulaires
18h
Résumé

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.

  • 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
Examen QCM intermédiaire
Module 7
Front-end avec Framework et CMS
18h
Résumé

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.

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
Examen QCM intermédiaire
Module 8
Aller plus loin avec CSS
12h
Résumé

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
Examen QCM intermédiaire
Module 9
Les autres compétences du Développeur Front-end
17h
Résumé

Ce module aborde les compétences complémentaires que doit savoir maîtriser un bon Dev front end.

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.

Examen QCM intermédiaire
Module 10
Méthodologie
11h
Résumé

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.

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é
Examen QCM intermédiaire
Projet Pro
Réalisation de votre projet professionnel
80h
Brief

Vous devez créer votre propre projet de A à Z, composé de plusieurs pages web, sur le sujet de votre choix (sous réserve que celui-ci soit validé par votre mentor en amont). Votre projet devra mettre en pratique les différentes notions abordées lors de votre parcours.

Publics visés
  • Tout public
  • Tout niveau
Pré-requis
  • Une bonne connexion internet pour permettre la lecture des vidéos
  • Un ordinateur dont la configuration est suffisante pour travailler confortablement sur les logiciels étudiés
Logiciels nécessaires

Les logiciels et plugins nécessaires ne sont pas fournis avec la formation. Cependant l’accès à certains logiciels est possible dans leur version d’essai, ou à des tarifs étudiants.

Accessibilité

Informations relatives aux personnes en situation de handicap : Nos formations sont 100% en ligne. Ces dernières font appel à des techniques audiovisuelles et ne sont pas optimisées 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.

Métiers visé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 15/18 Contact : pro@tuto.com mobile. Il ou elle peut donc travailler en entreprise de toute taille, en agence ou en freelance.

Rémunération

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.

Offres d’emploi

Les offres d’emploi sont variées et régulières.

Certification

La formation vous prépare au passage de la Certification Tuto.com, dont l’organisme est reconnu dans le domaine du numérique depuis de nombreuses années par les professionnels.

Durée de l’examen60 minutes
Modalités de passagePrésentation à distance de votre projet de fin de parcours
Date de passageUne session est programmée chaque mois
RésultatsExamen réussi à partir d'une note de 10/20
ParcheminTransmis par voie électronique sous 5 jours ouvrés
Taux de réussite
100%
Taux de satisfaction
88%

Un dispositif complet
pour un apprentissage réussi.

Équipe pédagogique

Cours vidéo 100% en ligne

Communauté

Mentor individuel Coaching en visio

Exercices pratiques et QCM

Autonomie et organisation libre

Projet professionnel

Communauté d’apprenants

Certification

Accompagnement et suivi dédié

Financements et délais

Pôle emploi

Jusqu’à 100% financé

Entreprise

Jusqu’à 100% financé

Autofinancement

À partir de 157,20€/mois
Financement Pôle Emploi
  • Délai minimum avant démarrage : 1 mois après l’édition du devis
  • Durée de formation maximum : 3 mois (à raison d’un rythme de 25h/semaine imposé par Pôle emploi)
Financement Entreprise
  • Délai minimum avant démarrage : 1 mois après l’édition du devis
  • Durée de formation maximum : 12 mois
  • Financement via votre OPCO : Trouver votre OPCO
  • Possible pour les salarié(e)s et les auto-entrepreneur(se)
Autofinancement
  • Délai minimum avant démarrage : À réception du paiement par virement ( 2 jours ouvrés minimum)
  • Durée de formation maximum : 12 mois
  • Possibilité d'étaler le paiement sur 12 mois

Besoin d’aide pour financer votre formation ?

missing attributes in configPrendre RDV avec Lionel

FAQ

Comment puis-je faire financer ma formation ?

Selon votre statut professionnel, vous pouvez financer votre formation grâce à votre CPF (Compte personnel de formation), l’AIF (Aide individuelle à la formation) de Pôle Emploi, votre OPCO (Opérateur de compétences) et / ou en autofinancement avec échéancier sur 5 mois. En savoir plus

Comment utiliser mon CPF pour financer ma formation ?

Pour financer la totalité de votre formation avec votre solde CPF, vous devez vous inscrire directement sur le site Mon Compte Formation. Vous trouverez sur chaque page de nos parcours éligibles le lien d’inscription direct. En savoir plus sur l’accès à votre compte CPF

Quelle est la durée de formation d'un parcours ?

La durée de formation dépend du parcours suivi mais aussi de votre rythme de formation qui peut être à temps plein ou temps partiel. Nos apprenant.es suivent généralement nos parcours sur une durée de 6 et 8 mois.

Les logiciels sont-ils fournis avec le parcours ?

Les logiciels et plugins nécessaires ne sont pas fournis avec les formations. Des versions d’essai ou des licences étudiantes sont parfois disponibles.

Pourrai-je accéder au contenu de ma formation lorsqu'elle sera terminée ?

Le contenu de votre formation est disponible à vie sur votre compte Tuto.com 😊

Aurai-je des échéances à respecter lors de la progression de mon parcours ?

L’unique échéance à respecter est la date de fin de votre parcours établie dès votre entrée en formation. Notre équipe vous accompagne tout au long de votre parcours pour maintenir votre motivation et assurer la régularité de votre progression 💪

Les formations sont-elles reconnues par l’État ?

Toutes nos formations vous permettent de développer les compétences nécessaires pour exercer un métier. À la fin de votre parcours, vous obtenez soit une certification de réussite Tuto.com qui atteste de vos compétences opérationnelles. Soit une certification ou un diplôme déposé et reconnu par France Compétences, qui est l’autorité nationale de financement et de régulation de la formation professionnelle et de l’apprentissage. Toutes ces informations sont renseignées pour chacun des parcours dans leur rubrique “Certification / Diplôme” 🎓.

Voir la FAQ complète Contactez-nous