Apprenez à utiliser Flexbox + Projet avec Bootstrap
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Apprenez à utiliser Flexbox + Projet avec Bootstrap

Sandy Ludosky
18,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 !
Chapitre 2
Présentation
Chapitre 3
Démos - Flex properties
Chapitre 4
Démos - Flex Items Properties
Chapitre 5
[TP] - Flex en action avec TP, exercices, challenge et solutions
Chapitre 6
[Projet] - Flexy Bootstrap Theme

Plan détaillé du cours

Chapitre 1 : Bienvenue !
56
 
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

Détail des avis
157
Apprenants
4
Commentaires
4,3/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
1
1/5
0
Philippe Piatti
Philippe Piatti
Publié le 29/03/2021
Très bon cours ! cela m'a permis de réviser mes flexbox, de me renforcer et même de m' enrichir dans ce domaine . Bravo pour ce travail !
Agacom
Agacom
Publié le 10/04/2020
Super tuto, très bien expliqué, avec pas mal d'exemples, et d'exercices pratique. Je recommande vivement !
Sandy Ludosky
Sandy Ludosky
merci :)
Alain Nogues
Alain Nogues
Publié le 08/04/2020
Très bon tuto, clair et complet à la fois. Bravo Juste une remarque : peut-être éviter d'utiliser des termes anglais quand l'équivalent existe en français (mais je sais que le globish est la langue la plus parlée ..)
Sandy Ludosky
Sandy Ludosky
Top ! Merci Alain pour cet avis. C’est très apprécié

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

vscode 1

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 18,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données