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.
Des formateurs expérimentés vous accompagnent
Apprenez aux côtés des meilleurs !
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...)
-
50MIntro
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" ! ????
-
4HCours
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étailLes 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 frameworks (Symfony, CodeIgniter, Laravel, Bootstrap...), le modèle MVC
- Les méthodes AGILE (Scrum, Kanban) UML & Merise
- Le versionning (GIT)
- Le refactoring
- Les tests unitaires
- Commenter son code
- 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
- Les variables
- Les conditions
- Les boucles
- Les fonctions
- La POO
QCM intermédiaire
masquer les détails -
30HCours
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étailIntroduction- Assimilation du vocabulaire
- Structure d’une page web
- L’imbrication de balises
- 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 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
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 CSSDé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 -
28HCours
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étailDécouverte de Flexbox et pratiqueFlexbox 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
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 -
21HCours
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étailL’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
- Installation de jQuery
- Les bonnes pratiques
- Les sélecteurs
- Les événements
- Les effets
- Les animations
QCM intermédiaire
masquer les détails -
20HCours
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 -
18HCours
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 -
18HCours
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étailL’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
- 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
- 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 -
12HCours
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étail30 astuces CSS La maîtrise de SASSQCM intermédiaire
masquer les détails -
17HCours
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étailLes 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
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 -
11HCours
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étailMieux 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
- Découvrir l’interface
- Les cartes
- Le travail d’équipe
- Le partage et la recherche
- 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 -
1HQCM
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.
-
80HProjet 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.