Avant de commencer
- Qu’allons-nous faire ensemble ?
- Comment réussir une formation ?
- Prérequis
- Comment poser mes questions ?
- Obtenez votre livre offert « Les 8 conseils pour apprendre à programmer »
Les bases de Bootstrap
- Préparons notre environnement
- Comment utiliser Bootstrap ?
- Utiliser CodePen avec Bootstrap
- Le fonctionnement de Bootstrap
- Sur quel projet allons-nous travailler dans cette section ?
- Les classes pour changer la largeur d'un élément
- Les classes pour changer le fond
- Les classes pour ajouter des couleurs
- Pourquoi je parle de variables dans la prochaine session ?
- Qu'est-ce qu'une variable ?
- Les classes pour ajouter des « padding » et des « margin »
- Entraînons-nous avec les marges et les padding (empâtements) !
- Rejoignez la Communauté des Etudiants
- Les classes pour aligner les éléments
- Les classes pour changer le texte
- Les classes pour ajouter l'ombre
- Les classes pour les bordures
- Recevez gratuitement chaque mois un email sur les tendances du mois !
- Et si on mettait des bordures arrondies ?
- The Magic One : Rendre les iframes responsive
- Récapitulatif de la section
- Testons nos connaissances
Projet #1 - Un clone de Tinder
- Qu'allons-nous faire dans cette section ?
- Téléchargez les fichiers de base
- Qu'est-ce que la classe container ?
- 1ère étape : l'entête
- 2ème étape : la première section
- 3ème étape : la deuxième section
- Dernière étape : le pied de page
- Correction
Découvrons les composants CSS
- Qu’est-ce qu’un composant CSS ?
- Les boutons
- Les messages de succès et d'alertes
- Les barres de navigation
- Les badges
- Les champs de formulaire
- Les jumbotrons
- Les cartes d'affichage
- Les barres de progression
- Les fils d'ariane
- Récapitulatif de la section
- Testons nos connaissances
Projet #2 - Le site de Tesla !
- Qu'allons-nous faire dans cette section ?
- Téléchargez les fichiers de base
- 1ère étape : l'entête
- 2ème étape : le jumbotron
- 3ème étape : la première section
- 4ème étape : la deuxième section
- 5ème étape : la troisième section
- Dernière étape : le pied de page
- Correction
- Donnez-moi votre avis !
Utilisons le potentiel des grilles Bootstrap
- Qu’est-ce qu’une grille ?
- La grille CSS intégrée à Bootstrap
- Prioriser nos éléments
- Décaler d'un certains nombre de colonnes
- Aligner verticalement nos aliments
- Exercice pratique sur les colonnes
- Correction de l'exercice
- Récapitulatif de la section
- Testons nos connaissances
Concevons des effets poussés grâce aux composants d'animation
- Comment utiliser les composants d’animation Bootstrap ?
- Avant de commencer : inclure la librairie javascript
- Les fenêtres popup
- Les sliders (carrousels)
- Les infobulles
- Les infobulles (version moins intrusive)
- Les spoilers
- Les boutons avec liste déroulante
- Les options disponibles grâce à Javascript
- Récapitulatif de la section
- Testons nos connaissances
Projet #3 : Le site d'Harry Potter !
- Qu'allons-nous faire dans cette section ?
- Téléchargez les fichiers de base
- 1ère étape : l'entête
- 2ème étape : la barre de navigation
- 3ème étape : le bandeau
- 4ème étape : les meilleures ventes
- Dernière étape : le pied de page
- Note concernant la correction de la première étape
- Correction de l'étape 1 et 2
- Correction de l'étape 3
- Correction de l'étape 4 et 5
- Donnez-moi votre avis !
SASS et BOOTSTRAP
- Pourquoi utiliser Sass avec Bootstrap ?
- Installer notre environnement
