19,00

Tuto Apprenez à utiliser Flexbox + Projet avec Bootstrap avec CSS, Bootstrap

19,00

  • Une formation vidéo de 4h36m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.
 

Table des matières de cette formation CSS, Bootstrap (durée : 4h36m)

  • Bienvenue !
    • Introduction gratuit 00:00:56
  • Présentation
    • Histoire & Evolution de Flexbox gratuit 00:04:58
    • Grille CSS 00:03:27
  • Démos - Flex properties
    • Flex Direction : row et column 00:08:19
    • Flex wrap 00:07:01
    • Flex flow 00:08:22
    • Flex Justify Content 00:09:18
    • Flex Align Items 00:08:20
    • Flex Align Content 00:04:53
  • Démos - Flex Items Properties
    • Flex Order 00:04:17
    • Flex Grow gratuit 00:03:27
    • Flex Shrink 00:04:18
    • Flex Basis 00:02:56
    • Flex (shorthand) 00:04:15
  • [TP] - Flex en action avec TP, exercices, challenge et solutions
    • 1) Flex Menu - introduction 00:02:55
    • 1) Flex Menu - solution 00:06:44
    • 2) Flex Images Gallery - introduction 00:02:58
    • 2) Flex Images Gallery - solution - 1/2 00:07:26
    • 2) Flex Images Gallery - solution - 2/2 00:06:09
    • 3) Flex menu responsive - introduction 00:01:08
    • 3) Flex menu responsive - solution 00:11:40
    • 4) Flex Cards - introduction 00:07:11
    • 4) Flex Cards - solution 00:15:37
    • 5) Flex Pricing Grid - introduction 00:02:14
    • 5) Flex Pricing Grid - solution 1/3 00:12:04
    • 5) Flex Pricing Grid - solution 2/3 00:14:11
    • 5) Flex Pricing Grid - solution 3/3 00:14:12
    • 6) Flex Charts - introduction 00:02:26
    • 6) Flex Charts - solution 00:17:47
  • [Projet] - Flexy Bootstrap Theme
    • Projet de démarrage 00:07:23
    • Navbar - flex align et justify content 00:05:50
    • Navbar - flex order 00:03:01
    • Navbar - flex et responsive 00:01:44
    • Carousel - Flex alignement options 00:05:47
    • Align Items 00:04:16
    • Centered (vertical et horizontal) 00:09:53
    • Content Flex basis 00:10:00
    • Content Flex Wrap 00:02:39
    • Gallery Flex 00:09:41
    • Images Gallery Flex 00:01:48
    • Flex responsive & order 00:09:30
    • Footer & Final 00:05:22



Formateur : Sandy Ludosky

Sandy Ludosky a publié 26 tutoriels et obtenu une note moyenne de 4,3/5 sur 3 310 tutoriels vendus. Sandy Ludosky est un formateur certifié tuto.com. Voir les autres formations de Sandy Ludosky

4,0
note moyenne

3
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
1
1 étoile
0
  • 5
    avis de agacom laissé le 10/04/2020
    Super tuto, très bien expliqué, avec pas mal d'exemples, et d'exercices pratique. Je recommande vivement !

  • 5
    avis de alain_du_lac laissé 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 ..)
    "Top ! Merci Alain pour cet avis. C’est très apprécié"

  • 2
    avis de f087 laissé le 29/04/2020
    Je vais être franc : les explications ne sont pas claires. Le point le plus important des flexbox, à savoir que certaines propriétés changent de comportement en fonction du type de flex-direction utilisé (axe principal et axe secondaire), n'est même pas expliqué. Les exemples ont le mérite d'exister, mais les explications sont vraiment confuses. Pour finir, je tiens à préciser que j'ai acheté cette formation juste pour me remettre toutes les propriétés / valeurs en tête, ayant à la base une très bonne connaissance des flex. Je ne conseille donc pas cette formation à un réel débutant, à cause des explications, mais aussi et surtout à cause de l'utilisation abondante du javascript... employé ici uniquement pour éviter de faire des copier-collers de blocs de code. Un vrai débutant trouvera tout cela bien compliqué.

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    vscode 1
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1251 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données