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 !
Section HTML
Les bases du CSS
-
4Présentation HTML & CSS
-
5Création du dossier et explication VS Code
-
6Structure HTML de base
-
7Découverte des balises de base
-
8Les balises fermantes
-
9Les éléments de type block vs inline
-
10Bien présenter son HTML
-
11Créer des liens
-
12Les différents types de chemin
-
13Les éléments "sémantiques"
-
14Créer des listes en HTML
-
15Gérer le texte en HTML
-
16Les formulaires HTML
-
17Textarea et Select
-
18Entités HTML & Emojis
-
19Utiliser des médias
-
20Exercice HTML, utiliser les balises apprises
-
21Résolution de l'exercice
-
22Histoire et évolution du HTML & CSS
-
23Quizz HTML
Un peu de théorie CSS
-
24Introduction CSS
-
25Mise en place du CSS
-
26Les ID's et les classes
-
27La couleur en CSS
-
28Les dimensions en CSS
-
29La marge, le remplissage et les bordures
-
30Block et inline en CSS
-
31Centrer avec margin-auto
-
32Les différents Display
-
33Opacity vs Visibility vs Display: none
-
34Faire une image responsive en CSS
-
35Exercice : faire une carte
-
36Résolution exercice Carte
-
37Les conventions de nommages
-
38Gérer le style des liens
-
39La propriété background en détail
-
40La propriété "font" pour le texte
-
41Les autres propriétés liées au texte
-
42Les ombres en CSS
-
43Créer des boutons en CSS
-
44Quizz : Les bases du CSS
Notions et concepts intermédiaires
Les transitions et les animations
-
50La position en CSS
-
51Les unités de mesure
-
52Les pseudos-classes
-
53Border et border-radius
-
54Outline vs Border + créer des pills
-
55Exercice : Bouton 3D
-
56Résolution Bouton 3D
-
57Les pseudos éléments
-
58Les "Floats" et le bug des "Floats"
-
59La fusion des marges
-
60EXERCICE : Créer une Navbar
-
61Résolution exercice Navbar
-
62La fonction Calc() en CSS
-
63La propriété "overflow"
Utiliser du JavaScript et du CSS ensemble
Propriétés et notions avancées
L’accessibilité
-
79Faire des dégradés en CSS
-
80Les filtres CSS
-
81Créer des tableaux en HTML / CSS
-
82Faire une belle création avec "shape-outside"
-
83Les "vendors" CSS
-
84S'amuser avec "background-clip"
-
85Les "sprites" en CSS
-
86Découvrir "Clip-path"
-
87Faire une page d'accueil avec dégradé + clip-path
-
88Le contexte d'empilement