Tailwind CSS #3/5. Créer des mises en page responsives avec Grid
Tailwind CSS #3/5. Créer des mises en page responsives avec Grid
Le cours Bootstrap 5 est là !
Bootstrap est le Framework CSS le plus populaire du web. Il est autant utilisé au niveau perso qu'en entreprise. En tant que développeur, maîtriser Bootstrap est donc une bonne corde à avoir dans son arc.
Sachant qu'il est relativement simple à prendre en main, ce serait bête de se priver d'une compétence rapide à acquérir.
Avant de voir de quoi est composé Bootstrap, définissons le mot "Framework". Un cadre de travail est un environnement qui va proposer des règles, des méthodes et des façons de faire qui lui sont propres, afin de structurer la réalisation d'un projet web. Le fait de suivre des règles préétablies permet de gagner du temps sur beaucoup de points, et a aussi l'avantage de rendre le code plus maintenable ainsi que de faciliter son évolution dans le temps.
Le "cadre" de Bootstrap, c'est :
- Des classes utilitaires pour rapidement styliser un site.
- Un système de grille pour le rendre réactif(responsive).
- Des composants préconstruits pour gagner du temps.
- Une possibilité de personnaliser "à sa sauce" tout ce qui a été dit au-dessus.
Lorsqu'on aura bien étudié tout ça, on passera à la création de deux projets pratiques : la création d'une landing page et la création d'un site web.
Avec ce cours en ligne, vous aurez accès au code source et vous pourrez le réutiliser comme bon vous semble.
Je reste disponible dans le salon d'entraide pour répondre à vos questions pendant votre formation.
Rendez-vous de l'autre côté pour commencer à coder !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction Bootstrap v5
Introduction Bootstrap v5
Chapitre 2
Les classes utilitaires
Les classes utilitaires
Chapitre 3
Disposition
Disposition
Chapitre 4
Composants sans JS
Composants sans JS
Chapitre 5
Formulaires
Formulaires
Chapitre 6
Composants avec JS
Composants avec JS
Chapitre 7
Personnalisation
Personnalisation
Plan détaillé du cours
Chapitre 1 : Introduction Bootstrap v5
08m17
Leçon 1Introduction
Leçon 2Code source et conseils
Chapitre 2 : Les classes utilitaires
35m40
Leçon 1Les couleurs
Leçon 2La Typographie 1
Leçon 3La Typographie 2
Leçon 4Tailles et espacement
Leçon 5Display et positions
Chapitre 3 : Disposition
32m51
Leçon 1Le système de grille I
Leçon 2Le système de grille II
Leçon 3Le placement des colonnes
Leçon 4Les gouttières
Leçon 5Flexbox
Chapitre 4 : Composants sans JS
29m50
Leçon 1Images et tableaux
Leçon 2Les boutons
Leçon 3Les cartes
Leçon 4Breadcrumb et simple navigation
Leçon 5Les listes
Leçon 6Progress bar et spinners
Chapitre 5 : Formulaires
15m40
Leçon 1Les formulaires de base
Leçon 2Styliser les inputs
Leçon 3Divers
Leçon 4La Validation
Chapitre 6 : Composants avec JS
23m42
Leçon 1Le Carousel
Leçon 2Dropdown et accordéon
Leçon 3Modale et alerte
Leçon 4Navbar
Leçon 5Menu rideau
Leçon 6Tooltip et popover
Chapitre 7 : Personnalisation
42m42
Leçon 1Personnalisation installation
Leçon 2Créer une palette
Leçon 3Utilities
Leçon 4Composants et segmentation
Leçon 5La purge
Chapitre 8 : Création de la Landing Page
52m32
Leçon 1Accueil
Leçon 2Services
Leçon 3Section grandes cartes
Leçon 4Section "striped"
Leçon 5Section "projets"
Leçon 6Section "Pricing"
Leçon 7Section parallax
Leçon 8Form et footer
Chapitre 9 : Création du site "Restaurant Japonais"
1h23
Leçon 1Configuration du second site
Leçon 2Palette
Leçon 3Page d'accueil
Leçon 4Section nourriture
Leçon 5Section chefs
Leçon 6Mosaîque et footer
Leçon 7Menu et accordeon
Leçon 8Personaliser l'accordéon
Leçon 9Page reservation
Leçon 10Purger le CSS
Aperçus
Avis des apprenants