Formation complète développeur Front-End
- Description
- Programme
- Commentaires
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 & CSSVideo lesson
-
5Création du dossier et explication VS CodeVideo lesson
-
6Structure HTML de baseVideo lesson
-
7Découverte des balises de baseVideo lesson
-
8Les balises fermantesVideo lesson
-
9Les éléments de type block vs inlineVideo lesson
-
10Bien présenter son HTMLVideo lesson
-
11Créer des liensVideo lesson
-
12Les différents types de cheminVideo lesson
-
13Les éléments "sémantiques"Video lesson
-
14Créer des listes en HTMLVideo lesson
-
15Gérer le texte en HTMLVideo lesson
-
16Les formulaires HTMLVideo lesson
-
17Textarea et SelectVideo lesson
-
18Entités HTML & EmojisVideo lesson
-
19Utiliser des médiasVideo lesson
-
20Exercice HTML, utiliser les balises apprisesVideo lesson
-
21Résolution de l'exerciceVideo lesson
-
22Histoire et évolution du HTML & CSSVideo lesson
-
23Quizz HTMLQuiz
-
24Introduction CSSVideo lesson
-
25Mise en place du CSSVideo lesson
-
26Les ID's et les classesVideo lesson
-
27La couleur en CSSVideo lesson
-
28Les dimensions en CSSVideo lesson
-
29La marge, le remplissage et les borduresVideo lesson
-
30Block et inline en CSSVideo lesson
-
31Centrer avec margin-autoVideo lesson
-
32Les différents DisplayVideo lesson
-
33Opacity vs Visibility vs Display: noneVideo lesson
-
34Faire une image responsive en CSSVideo lesson
-
35Exercice : faire une carteVideo lesson
-
36Résolution exercice CarteVideo lesson
-
37Les conventions de nommagesVideo lesson
-
38Gérer le style des liensVideo lesson
-
39La propriété background en détailVideo lesson
-
40La propriété "font" pour le texteVideo lesson
-
41Les autres propriétés liées au texteVideo lesson
-
42Les ombres en CSSVideo lesson
-
43Créer des boutons en CSSVideo lesson
-
44Quizz : Les bases du CSSQuiz
-
50La position en CSSVideo lesson
-
51Les unités de mesureVideo lesson
-
52Les pseudos-classesVideo lesson
-
53Border et border-radiusVideo lesson
-
54Outline vs Border + créer des pillsVideo lesson
-
55Exercice : Bouton 3DVideo lesson
-
56Résolution Bouton 3DVideo lesson
-
57Les pseudos élémentsVideo lesson
-
58Les "Floats" et le bug des "Floats"Video lesson
-
59La fusion des margesVideo lesson
-
60EXERCICE : Créer une NavbarVideo lesson
-
61Résolution exercice NavbarVideo lesson
-
62La fonction Calc() en CSSVideo lesson
-
63La propriété "overflow"Video lesson
-
64Comprendre "transform"Video lesson
-
65La perspective en CSSVideo lesson
-
66Les transitionsVideo lesson
-
67Faire une chaîne de transitionsVideo lesson
-
68Les animations en CSSVideo lesson
-
69Création : Faire un texte clignotantVideo lesson
-
70Création : Loader en pur CSSVideo lesson
-
71Création : Animation underlineVideo lesson
-
72Où placer son JavaScript ?Video lesson
-
73"Const" et les sélecteurs JavaScriptVideo lesson
-
74Les fonctionsVideo lesson
-
75Faire notre premier "class toggle"Video lesson
-
76Les événements JavaScriptVideo lesson
-
77Découvrons d'autres événementsVideo lesson
-
78Faire une animation d'icône hamburgerVideo lesson
-
79Faire des dégradés en CSSVideo lesson
-
80Les filtres CSSVideo lesson
-
81Créer des tableaux en HTML / CSSVideo lesson
-
82Faire une belle création avec "shape-outside"Video lesson
-
83Les "vendors" CSSVideo lesson
-
84S'amuser avec "background-clip"Video lesson
-
85Les "sprites" en CSSVideo lesson
-
86Découvrir "Clip-path"Video lesson
-
87Faire une page d'accueil avec dégradé + clip-pathVideo lesson
-
88Le contexte d'empilementVideo lesson
![6829](https://academiaraqmya.gov.ma/wp-content/uploads/2021/04/3200636_065f_3.jpg)