Tailwind CSS #4/5. Créer des mises en page responsives avec FlexBox
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Tailwind CSS #4/5. Créer des mises en page responsives avec FlexBox

Carl Brison
15,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans cette formation, vous apprendrez à utiliser les Flexboxs avec Tailwind CSS pour créer des layouts réactifs et flexibles.
Nous parlerons des concepts fondamentaux des Flexboxs, tels que la direction, le wrap et les alignements, et vous apprendrez à les appliquer en utilisant Tailwind CSS.

Au terme de ce tuto, vous serez en mesure de :

  • Comprendre les concepts fondamentaux des Flexbox
  • Utiliser les utilitaires Tailwind CSS pour créer des layouts avec cette techno,
  • Créer des layouts réactifs et flexibles pour différents appareils et résolutions.

 

Au programme de ce tuto utiliser Flexbox avec TailwindCSS

  • Les concepts fondamentaux,
  • Les utilitaires Tailwind CSS pour les Fllexboxs,
  • La création de layouts réactifs,
  • La création de layouts avec plusieurs lignes,
  • La création de layouts avec des colonnes,
  • L'alignement des éléments dans un layout Flexbox.

Il s'agit ici d'un outil puissant qui vous permettra de créer des designs web plus efficaces et plus attrayants.

Afin de suivre cette formation dans de bonnes conditions, il est fortement conseillé de connaître les Flexboxs.
Voici une formation initiale à la technologie Flexbox.

Flexbox n'est pas la seule technique pour créer des pages responsives. Découvrez cet autre tuto Tailwind CSS pour créer des pages avec CSSgrid

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Manipuler les conteneurs avec FlexBox
Chapitre 2
Créer notre documentation
Chapitre 3
Manipuler les contenus avec FlexBox
Chapitre 4
Exercice d'application
Chapitre 5
Pour la prochaine fois

Plan détaillé du cours

Chapitre 1 : Manipuler les conteneurs avec FlexBox
17m22s
 
Leçon 1Définir le display Flex
Leçon 2Définir la direction des contenus
Leçon 3Définir le retour à la ligne des contenus
Leçon 4Aligner les contenus sur l'axe principal
Leçon 5Aligner les contenus sur l'axe secondaire
Chapitre 2 : Créer notre documentation
05m33s
 
Leçon 1Les 4 premières propriétés liées à Grid
Chapitre 3 : Manipuler les contenus avec FlexBox
17m07s
 
Leçon 1Aligner un contenu
Leçon 2Modifier l'ordre d'affichage
Leçon 3Modifier la largeur d'un contenu
Leçon 4Définir la largeur d'un contenu
Leçon 5Retour à notre documentation
Chapitre 4 : Exercice d'application
21m13s
 
Leçon 1Ce que nous allons faire
Leçon 2Mise en place des bases
Leçon 3Retour à Grid CSS
Leçon 4Mise en place du responsive
Chapitre 5 : Pour la prochaine fois
01m18s
 
Leçon 1Pour la prochaine fois

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source de l'exercice + notre documentation.

Attendez ! 🤗

Accédez à plus de 1333 tutos gratuits

Notre politique de protection des données