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
Sous-titres non disponibles

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

Carl Brison
16,99€
Acheter maintenant, payer plus tard. En savoir plus

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
28m05
 
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
04m50
 
Leçon 1Les 4 premières propriétés liées à Grid
Chapitre 3 : Les médias queries
10m10
 
Leçon 1Fonctionnement des médias queries
Leçon 2Retour à notre documentation
Chapitre 4 : Manipuler les contenus avec CSS Grid
17m53
 
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
21m22
 
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
01m37
 
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.

Payer plus tard

Prix d'achat : 16,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 1424 tutos gratuits

Notre politique de protection des données