- Objectifs pédagogiques
- Sections du cours
- Avis
Ce cours va littéralement vous faire passer de l’ignorance au niveau de maître de Bootstrap. Vous allez créer avec moi 3 VRAIS projets du monde moderne sur Tinder, Tesla et Harry Potter. Les classes utilitaires, les composants et les animations n’auront plus aucun secret pour vous. Vous pourrez même, si vous avez des bases en Sass, apprendre à modifier Bootstrap pour le rendre unique !
Seul des bases en HTML et en CSS sont nécessaires pour suivre cette formation.
Dans chacune des sessions que nous allons passer ensemble, je vais vous accompagner par la main pour vous montrer tout le potentiel de Bootstrap ! Puis, je vous laisserai vous entraîner.
Vous disposerez de TOUS LES CODES de la formation, en temps réel ! Une session = une page de code à pouvoir consulter quand vous le souhaitez.
Cette formation faisant parti de la Collection Ultime, label de qualité que j’ai créé, vous pouvez être sûr que vous ne serez pas déçu !
Alors, je vous attends ?
-
6
Préparons notre environnement -
7
Comment utiliser Bootstrap ?
-
8
Utiliser CodePen avec Bootstrap -
9
Le fonctionnement de Bootstrap
-
10
Sur quel projet allons-nous travailler dans cette section ?
-
11
Les classes pour changer la largeur d'un élément
-
12
Les classes pour changer le fond
-
13
Les classes pour ajouter des couleurs
-
14
Pourquoi je parle de variables dans la prochaine session ?
-
15
Qu'est-ce qu'une variable ?
-
16
Les classes pour ajouter des « padding » et des « margin »
-
17
Entraînons-nous avec les marges et les padding (empâtements) !
-
18
Rejoignez la Communauté des Etudiants
-
19
Les classes pour aligner les éléments
-
20
Les classes pour changer le texte
-
21
Les classes pour ajouter l'ombre
-
22
Les classes pour les bordures
-
23
Recevez gratuitement chaque mois un email sur les tendances du mois !
-
24
Et si on mettait des bordures arrondies ?
-
25
The Magic One : Rendre les iframes responsive
-
26
Récapitulatif de la section
-
27
Testons nos connaissances
-
36
Qu’est-ce qu’un composant CSS ?
-
37
Les boutons
-
38
Les messages de succès et d'alertes
-
39
Les barres de navigation
-
40
Les badges
-
41
Les champs de formulaire
-
42
Les jumbotrons
-
43
Les cartes d'affichage
-
44
Les barres de progression
-
45
Les fils d'ariane
-
46
Récapitulatif de la section
-
47
Testons nos connaissances
-
48
Qu'allons-nous faire dans cette section ?
-
49
Téléchargez les fichiers de base
-
50
1ère étape : l'entête
-
51
2ème étape : le jumbotron
-
52
3ème étape : la première section
-
53
4ème étape : la deuxième section
-
54
5ème étape : la troisième section
-
55
Dernière étape : le pied de page
-
56
Correction
-
57
Donnez-moi votre avis !
-
58
Qu’est-ce qu’une grille ?
-
59
La grille CSS intégrée à Bootstrap
-
60
Prioriser nos éléments
-
61
Décaler d'un certains nombre de colonnes
-
62
Aligner verticalement nos aliments
-
63
Exercice pratique sur les colonnes
-
64
Correction de l'exercice
-
65
Récapitulatif de la section
-
66
Testons nos connaissances
-
67
Comment utiliser les composants d’animation Bootstrap ?
-
68
Avant de commencer : inclure la librairie javascript
-
69
Les fenêtres popup
-
70
Les sliders (carrousels)
-
71
Les infobulles
-
72
Les infobulles (version moins intrusive)
-
73
Les spoilers
-
74
Les boutons avec liste déroulante
-
75
Les options disponibles grâce à Javascript
-
76
Récapitulatif de la section
-
77
Testons nos connaissances
-
78
Qu'allons-nous faire dans cette section ?
-
79
Téléchargez les fichiers de base
-
80
1ère étape : l'entête
-
81
2ème étape : la barre de navigation
-
82
3ème étape : le bandeau
-
83
4ème étape : les meilleures ventes
-
84
Dernière étape : le pied de page
-
85
Note concernant la correction de la première étape
-
86
Correction de l'étape 1 et 2
-
87
Correction de l'étape 3
-
88
Correction de l'étape 4 et 5
-
89
Donnez-moi votre avis !
