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
Flexbox CSS3 est un modèle de boîtes flexibles qui succède aux solutions de display "inline" et "float" pour gérer la disposition des éléments et structures des pages web.
Voici, un cours complet en ligne pour apprendre les concepts de base de Flexbox
Dans ce tuto Flexbox vous allez apprendre
- les options de direction et d'orientation (row et column)
- les options pour aligner des éléments dans un conteneur flexible et gestion des espaces disponibles (fluidité),
- Alignements et centrages horizontaux et verticaux, justifiés, répartis ...
- le contrôle de l'ordre avec la réorganisation des éléments indépendamment de l’ordre du flux (DOM),
- et, Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé,
Plusieurs démos sur:
- le conteneur flexible
- les propriétés flex
- la disposition des éléments flex en colonne et rangée
- les options d'alignement des éléments flex
- le contrôle de l'ordre des éléments flex
Des TP pour une mise en pratique rapide :
- des exemples et projets de mise en page, de simple à plus complexe, avec les propriétés Flex
- menu responsive flex, galerie d'images ...
Enfin, nous apprendrons à utiliser Bootstrap 4 avec Flex : un projet pour découvrir les bénéfices du CSS moderne et d'une mise en page contrôlée et facilitée grâce aux classes et utilities Flex de Bootstrap 4.
A la fin du cours un QCM vous sera proposé pour valider vos nouvelles connaissances. Vous aurez acquis de nouvelles compétences CSS et aurez abordés quelques projets pratiques.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Bonne formation Flexbox.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Bienvenue !
Bienvenue !
Chapitre 2
Présentation
Présentation
Chapitre 3
Démos - Flex properties
Démos - Flex properties
Chapitre 4
Démos - Flex Items Properties
Démos - Flex Items Properties
Chapitre 5
[TP] - Flex en action avec TP, exercices, challenge et solutions
[TP] - Flex en action avec TP, exercices, challenge et solutions
Chapitre 6
[Projet] - Flexy Bootstrap Theme
[Projet] - Flexy Bootstrap Theme
Plan détaillé du cours
Chapitre 1 : Bienvenue !
56s
Leçon 1Introduction
Chapitre 2 : Présentation
08m25
Leçon 1Histoire & Evolution de Flexbox
Leçon 2Grille CSS
Chapitre 3 : Démos - Flex properties
46m13
Leçon 1Flex Direction : row et column
Leçon 2Flex wrap
Leçon 3Flex flow
Leçon 4Flex Justify Content
Leçon 5Flex Align Items
Leçon 6Flex Align Content
Chapitre 4 : Démos - Flex Items Properties
19m13
Leçon 1Flex Order
Leçon 2Flex Grow
Leçon 3Flex Shrink
Leçon 4Flex Basis
Leçon 5Flex (shorthand)
Chapitre 5 : [TP] - Flex en action avec TP, exercices, challenge et solutions
2h04
Leçon 11) Flex Menu - introduction
Leçon 21) Flex Menu - solution
Leçon 32) Flex Images Gallery - introduction
Leçon 42) Flex Images Gallery - solution - 1/2
Leçon 52) Flex Images Gallery - solution - 2/2
Leçon 63) Flex menu responsive - introduction
Leçon 73) Flex menu responsive - solution
Leçon 84) Flex Cards - introduction
Leçon 94) Flex Cards - solution
Leçon 105) Flex Pricing Grid - introduction
Leçon 115) Flex Pricing Grid - solution 1/3
Leçon 125) Flex Pricing Grid - solution 2/3
Leçon 135) Flex Pricing Grid - solution 3/3
Leçon 146) Flex Charts - introduction
Leçon 156) Flex Charts - solution
Chapitre 6 : [Projet] - Flexy Bootstrap Theme
1h16
Leçon 1Projet de démarrage
Leçon 2Navbar - flex align et justify content
Leçon 3Navbar - flex order
Leçon 4Navbar - flex et responsive
Leçon 5Carousel - Flex alignement options
Leçon 6Align Items
Leçon 7Centered (vertical et horizontal)
Leçon 8Content Flex basis
Leçon 9Content Flex Wrap
Leçon 10Gallery Flex
Leçon 11Images Gallery Flex
Leçon 12Flex responsive & order
Leçon 13Footer & Final
Aperçus
Avis des apprenants