Motion Web Design : créez une animation façon Twitter
Motion Web Design : créez une animation façon Twitter
Je vous propose un tuto vidéo sur les flexbox avancés. Nous allons ici parler des propriétés suivantes :
- flex-grow,
- flex-shrink,
- flex-basis.
Au programme de ce tuto Flexbox Avancé
Nous allons étudier les valeurs de ces propriétés Flexbox et comprendre ainsi leurs comportements, mais aussi le comportement par défaut de Flexbox.
Une fois que nous aurons bien compris ces propriétés CSS liées à Flexbox, nous ferons 2 applications afin de consolider ces nouvelles connaissances. Je mets les codes de ces deux applications à votre disposition avec le cours.
Un QCM de fin vous permettra de valider vos connaissances.
Je reste disponible dans le salon d'entraide pour répondre à vos questions sur Flexbox.
Pour en savoir plus sur Flexbox :
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Théorie
Théorie
Chapitre 2
Pratique
Pratique
Chapitre 3
Conclusion
Conclusion
Plan détaillé du cours
Chapitre 1 : Théorie
25m04s
Leçon 1Comportement par défaut des contenus
Leçon 2Modification de la valeur de flex-grow
Leçon 3Beaucoup d'infos dans un contenu
Leçon 4Compréhension du rôle de flex-grow
Leçon 5Modification de la valeur de flex-basis
Leçon 6Modification de la valeur de flex-shrink
Leçon 7Compréhension du rôle de flex-shrink
Leçon 8Propriété raccourcie
Chapitre 2 : Pratique
18m46s
Leçon 1Barre de navigation
Leçon 2Mise en page en colonne de type journal
Chapitre 3 : Conclusion
01m38s
Leçon 1Conclusion
Avis des apprenants