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

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

Carl Brison
17,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce cours, nous allons apprendre à utiliser Tailwind CSS pour créer des mises en page complexes et responsives en utilisant la technologie Grid.
Nous commencerons par une introduction à la grille et aux différents types de lignes et de colonnes que nous pouvons utiliser.
Ensuite, nous verrons comment utiliser la grille pour créer des mises en page de base, telles que des grilles à deux et trois colonnes.

Nous verrons également comment utiliser les médias queries au travers de Tailwind CSS.
Cela nous permettra de réaliser des mises en page complexes au travers de Tailwind CSS en utilisant la technologie Grid.

Objectifs de ce tuto Tailwind mise en pages responsives

À la fin de ce cours, vous serez en mesure de :

  • Comprendre le fonctionnement de la grille Tailwind CSS,
  • Utiliser la grille pour créer des mises en page de base,
  • Utiliser la grille pour créer des mises en page avancées.

Un exercice d'application concret viendra clôturer ce cours afin de valider vos nouvelles connaissances.
Un QCM vous permettra de réviser vos connaissances.
Je reste disponible pour répondre à vos éventuelles questions sur ce tutoriel.

Prérequis

Pour suivre ce cours, vous devez avoir une compréhension de base de Grid CSS.
Si vous êtes débutant, je vous recommande de suivre mon cours d'introduction à Grid CSS.

Épisodes précédents

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Manipuler les conteneurs avec CSS Grid
Chapitre 2
Créer notre documentation
Chapitre 3
Les médias queries
Chapitre 4
Manipuler les contenus avec CSS Grid
Chapitre 5
Exercice d'application
Chapitre 6
Pour la prochaine fois

Plan détaillé du cours

Chapitre 1 : Manipuler les conteneurs avec CSS Grid
28m05s
 
Leçon 1Créer des colonnes
Leçon 2Manipuler les hauteurs de ligne
Leçon 3Définir une valeur en auto
Leçon 4Créer des gouttières entre les lignes et les colonnes
Chapitre 2 : Créer notre documentation
04m50s
 
Leçon 1Les 4 premières propriétés liées à Grid
Chapitre 3 : Les médias queries
10m10s
 
Leçon 1Fonctionnement des médias queries
Leçon 2Retour à notre documentation
Chapitre 4 : Manipuler les contenus avec CSS Grid
17m53s
 
Leçon 1Les lignes de grilles verticales
Leçon 2Les lignes de grilles horizontales
Leçon 3Le mot clé span
Leçon 4Retour à notre documentation
Chapitre 5 : Exercice d'application
21m22s
 
Leçon 1Enoncé de l'exercice
Leçon 2Mise en place des bases
Leçon 3Mise en page pour les grands écrans
Leçon 4Modifier l'ordre d'affichage pour les grands écrans
Chapitre 6 : Pour la prochaine fois
01m37s
 
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.

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données