Formation Développeur Front End

262h de formation, 3h de session LIVE, des ateliers pratiques, 1 projet personnel PRO à présenter

“ Assemblez, codez et publiez des sites Internet modernes ”

Envie de décrocher un poste de développeur Front-End ? D’être autonome dans la création de sites Internet ? Alors suivez notre formation Dev Front End. Ouverte à tous, cette formation basée sur la pratique vous permettra d’acquérir les langages de programmation HTML, CSS et Javascript et d’intégrer des sites Internet de manière moderne. Un parcours mélangeant autonomie, pratique et accompagnement sur mesure.


  • HTML
  • CSS
  • JAVASCRIPT
  • BOOTSTRAP
  • SASS
  • GIT
  • PHOTOSHOP
  • WORDPRESS
  • TEMPLATE
  • SEO
  • FLEXBOX
  • CSSGRID
  • FRONT-END
  • INTEGRATION
  • DEV

Au programme de cette formation Développeur Front End

Durée totale : 262h / Prix : 1310€ HT

(financement Pôle Emploi, CPF, plan de formation, OPCA...)

  • 50M
    Intro

    MODULE 1 : Introduction : Votre parcours commence maintenant

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

  • 4H
    Cours

    MODULE 1 : Les fondements du Web et de la programmation

    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.

    voir le détail
    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

    QCM intermédiaire

    masquer les détails
  • 30H
    Cours

    MODULE 2 : Apprendre le HTML et le CSS

    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.

    voir le détail
    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

    QCM intermédiaire

    masquer les détails
  • 28H
    Cours

    MODULE 3 : Flexbox, CSS Grid et Responsive Design

    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 terme de techno avec Flexbox et CSS Grid !

    voir le détail
    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

    QCM intermédiaire

    masquer les détails
  • 21H
    Cours

    MODULE 4 : L’apprentissage de Javascript et de jQuery

    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.

    voir le détail
    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

    QCM intermédiaire

    masquer les détails
  • 20H
    Cours

    MODULE 5 : Ajouter du mouvement (vidéo et animation)

    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.

    voir le détail
    • 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

    QCM intermédiaire

    masquer les détails
  • 18H
    Cours

    MODULE 6 : L’intégration de formulaires

    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.

    voir le détail
    • 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

    QCM intermédiaire

    masquer les détails
  • 18H
    Cours

    MODULE 7 : Front-end avec Framework et CMS

    Pour gagner du temps le développeur front-end sera amené parfois à 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 permettra de gagner du temps.

    voir le détail
    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

    QCM intermédiaire

    masquer les détails
  • 12H
    Cours

    MODULE 8 : Aller plus loin avec CSS

    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.

    voir le détail
    30 astuces CSS La maîtrise de SASS

    QCM intermédiaire

    masquer les détails
  • 17H
    Cours

    MODULE 9 : Les autres compétences du DEV front-end

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

    voir le détail
    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 que futur DEV 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… Cette formation vous permettra de devenir à l’aise avec le logiciel.

    QCM intermédiaire

    masquer les détails
  • 11H
    Cours

    MODULE 10 : Méthodologie

    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.

    voir le détail
    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é

    QCM intermédiaire

    masquer les détails
  • 1H
    QCM

    MODULE 1 : QCM Général de fin de Parcours

    Ce test final reprend l’intégralité des notions que vous devez avoir acquises pendant votre formation de Dev front end.

  • 80H
    Projet Personnel

    MODULE 1 : Projet Personnel

    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

Une pédagogie complète pour faire de vous
un Dev Front End

Notre pédagogie est basée sur la multi-modalité : cours en vidéo, accès à des salons d’entraide, QCM, visio-conférence, ressources pédagogiques, présentation d’un projet PRO. Nous vous accompagnons tout le long de votre apprentissage !

Apprentissage en vidéo

Plus efficace qu’un livre. Plus accessible qu’une formation traditionnelle, la vidéo permet un apprentissage progressif et un ancrage mémoriel grâce à la répétition.

Ressources

La formation s’accompagne avec de nombreux fichiers sources, templates qui viendront agrémenter votre formation.

Salon d'entraide

Posez librement vos questions dans le salon d’entraide. Formateurs et apprenants vous répondent. Apprendre à plusieurs, c’est ce qu’on appelle le Social Learning !

Projet Pro

En fin de formation, vous préparez un projet professionnel, de manière autonome, de manière à mettre en pratique les notions acquises pendant votre cursus.

Visio conférence

Des séances en live, face à face, avec un formateur expert, qui personnalise votre apprentissage, critique votre travail, vous coache pour vous faire avancer !

Certificat de complétion

Une fois la formation suivie, les tests passés, le projet pro validé, vous obtenez un certificat que vous pourrez fiérement abordé. Ce dernier atteste de vos nouvelles compétences.

Vous souhaitez trouver un travail ou évoluer dans votre carrière ? Vous voulez vous orienter vers le métier d’intégrateur web ? Remplissez ce formulaire et nous vous recontactons directement
Public visé

Tout public

Objectifs
  • 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
  • Être autonome dans ces choix techniques et savoir les défendre
Programme PDF

Merci pour votre demande. Nous revenons vers vous très vite !


Retour à l'accueil

Ils nous font confiance

Plus de 800 professionnels et entreprises développent leurs compétences en utilisant tuto.com au quotidien. Nous sommes prestataire de formation agréé, enregistré sous le numéro 93 83 04618 83. Nous sommes référencés sur DATADOCK et certifiés qualité VeriSelect par BureauVeritas sous le n°FR037542-1.