Formation complète développeur Front-End
- Objectifs pédagogiques
- Sections du cours
- Avis
Apprenez le développement web de la plus fun des manières avec le développement Front-End !
Nous allons partir de la base absolue jusqu’à un niveau avancé.
C’est un cours de 30h+ !
Prérequis : un ordinateur et de la volonté.
Mais commençons par définir les types de développement !
- Le développement Front-End, c’est la partie visuelle d’un site, on va se concentrer sur l’aspect esthétique, les animations, les interactions, le tout pour avoir un rendu qui plaira à l’utilisateur, pour qu’il passe une bonne expérience sur nos sites.
- Le développement Back-End, c’est le développement côté serveur, c’est là où on gère les base de données.
- Le développement Web fait référence à tous les langages qui peuvent entrer dans la création d’un site, il regroupe donc le Front & le Back.
- Le développement Full-stack fait aussi référence au Front & Back mais on parle généralement de Full-Stack lorsqu’on maîtrise des technologies apparues récemment.
- Etc … Il existe en effet beaucoup de dénominations et celles du dessus sont déjà un bon point de repère.
Tu vas découvrir un monde génial où la création est de mise, où tu peux travailler d’où tu veux avec un ordinateur et créer des choses splendides et gratifiantes !
Perdu, tu peux l’être actuellement …
Le monde du développement web est vraiment vaste, son écosystème grandit chaque année et c’est dur de s’y retrouver !
Tu as peut-être déjà suivi des tutoriels ou essayé de te frayer un chemin dans cette jungle, mais pas facile de s’y retrouver !
Sans plan précis on ne peut pas acquérir de connaissances solides qui permettent de s’épanouir.
Ce qu’il faut faire c’est comprendre les bases.
Ne pas regarder ce qui brille en premier, mais plutôt regarder les fondations et comprendre comment la maison est construite.
Pour construire des sites en Front, on a besoin de trois piliers.
HTML, CSS, JavaScript.
Voilà ce qu’on doit bien comprendre, voilà ce qu’on doit bien maîtriser.
Une fois qu’on maîtrise ces trois là, alors toutes les mises à jours, les outils, les « framework », sont faciles à comprendre.
Ça tombe bien, on va les voir en long, en large et en travers !
On va partir de la base de chacun de ces langages pour bien les comprendre et apprendre à les utiliser correctement. Tu verras que certains sont plus simples que d’autres, même si ils sont tous utiles au bon fonctionnement d’un site.
Ce cours est là pour ça, apprendre rapidement le développement Front.
HTML, CSS et JavaScript n’auront plus de secrets pour toi. On va faire des tas d’exercices entre les leçons, pour mettre en place directement ce qu’on apprend.
Mais cela demande de l’assiduité, car c’est quand même un cours de 30h .. !
Un cours conséquent donc, qu’il faut suivre sérieusement.
Je te montre quelques commentaires de participants satisfaits :
- super j’ai appris plein de nouvelles choses
- j’aime bien, pas de blablas pour rien, très bonne formation!
- Au top
- Génial 🙂
- Parfait !
- Exactement ce que j’attends du cours en termes de simplicité, clarté des explications et efficience.
- Etc …
Et le plan du cours dans tout ça ? Le voici !
- La base, HTML.
- Le langage de feuille de style CSS.
- Les méthodes de positionnement Flexbox & CSS Grid.
- Utilisation d’un préprocesseur CSS.
- Les animations et les transitions en CSS.
- L’accessibilité et le « responsive »
- Créer un site de A à Z.
- Utiliser un Framework CSS.
- Le langage JavaScript.
- Les tableaux, les objets, le DOM.
- Faire de l’asynchrone en JS + manipuler une API.
- Créer et comprendre des formulaires.
- Les paradigmes de programmation en JS.
- La librairie d’animation JS Greensock.
- Introduction au Framework JS « React ».
- Etc …
On a du pain sur la planche ! Et je n’ai mis que les grands chapitres car il y a vraiment beaucoup de sujets qui sont abordés.
Rendez-vous de l’autre côté pour commencer à coder !
-
4Présentation HTML & CSSLeçon vidéo
-
5Création du dossier et explication VS CodeLeçon vidéo
-
6Structure HTML de baseLeçon vidéo
-
7Découverte des balises de baseLeçon vidéo
-
8Les balises fermantesLeçon vidéo
-
9Les éléments de type block vs inlineLeçon vidéo
-
10Bien présenter son HTMLLeçon vidéo
-
11Créer des liensLeçon vidéo
-
12Les différents types de cheminLeçon vidéo
-
13Les éléments "sémantiques"Leçon vidéo
-
14Créer des listes en HTMLLeçon vidéo
-
15Gérer le texte en HTMLLeçon vidéo
-
16Les formulaires HTMLLeçon vidéo
-
17Textarea et SelectLeçon vidéo
-
18Entités HTML & EmojisLeçon vidéo
-
19Utiliser des médiasLeçon vidéo
-
20Exercice HTML, utiliser les balises apprisesLeçon vidéo
-
21Résolution de l'exerciceLeçon vidéo
-
22Histoire et évolution du HTML & CSSLeçon vidéo
-
23Quizz HTMLQuiz
-
24Introduction CSSLeçon vidéo
-
25Mise en place du CSSLeçon vidéo
-
26Les ID's et les classesLeçon vidéo
-
27La couleur en CSSLeçon vidéo
-
28Les dimensions en CSSLeçon vidéo
-
29La marge, le remplissage et les borduresLeçon vidéo
-
30Block et inline en CSSLeçon vidéo
-
31Centrer avec margin-autoLeçon vidéo
-
32Les différents DisplayLeçon vidéo
-
33Opacity vs Visibility vs Display: noneLeçon vidéo
-
34Faire une image responsive en CSSLeçon vidéo
-
35Exercice : faire une carteLeçon vidéo
-
36Résolution exercice CarteLeçon vidéo
-
37Les conventions de nommagesLeçon vidéo
-
38Gérer le style des liensLeçon vidéo
-
39La propriété background en détailLeçon vidéo
-
40La propriété "font" pour le texteLeçon vidéo
-
41Les autres propriétés liées au texteLeçon vidéo
-
42Les ombres en CSSLeçon vidéo
-
43Créer des boutons en CSSLeçon vidéo
-
44Quizz : Les bases du CSSQuiz
-
50La position en CSSLeçon vidéo
-
51Les unités de mesureLeçon vidéo
-
52Les pseudos-classesLeçon vidéo
-
53Border et border-radiusLeçon vidéo
-
54Outline vs Border + créer des pillsLeçon vidéo
-
55Exercice : Bouton 3DLeçon vidéo
-
56Résolution Bouton 3DLeçon vidéo
-
57Les pseudos élémentsLeçon vidéo
-
58Les "Floats" et le bug des "Floats"Leçon vidéo
-
59La fusion des margesLeçon vidéo
-
60EXERCICE : Créer une NavbarLeçon vidéo
-
61Résolution exercice NavbarLeçon vidéo
-
62La fonction Calc() en CSSLeçon vidéo
-
63La propriété "overflow"Leçon vidéo
-
64Comprendre "transform"Leçon vidéo
-
65La perspective en CSSLeçon vidéo
-
66Les transitionsLeçon vidéo
-
67Faire une chaîne de transitionsLeçon vidéo
-
68Les animations en CSSLeçon vidéo
-
69Création : Faire un texte clignotantLeçon vidéo
-
70Création : Loader en pur CSSLeçon vidéo
-
71Création : Animation underlineLeçon vidéo
-
72Où placer son JavaScript ?Leçon vidéo
-
73"Const" et les sélecteurs JavaScriptLeçon vidéo
-
74Les fonctionsLeçon vidéo
-
75Faire notre premier "class toggle"Leçon vidéo
-
76Les événements JavaScriptLeçon vidéo
-
77Découvrons d'autres événementsLeçon vidéo
-
78Faire une animation d'icône hamburgerLeçon vidéo
-
79Faire des dégradés en CSSLeçon vidéo
-
80Les filtres CSSLeçon vidéo
-
81Créer des tableaux en HTML / CSSLeçon vidéo
-
82Faire une belle création avec "shape-outside"Leçon vidéo
-
83Les "vendors" CSSLeçon vidéo
-
84S'amuser avec "background-clip"Leçon vidéo
-
85Les "sprites" en CSSLeçon vidéo
-
86Découvrir "Clip-path"Leçon vidéo
-
87Faire une page d'accueil avec dégradé + clip-pathLeçon vidéo
-
88Le contexte d'empilementLeçon vidéo
