CSS Grid, le guide complet en vidéo
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO CSS Grid, le guide complet en vidéo

Carl Brison
29,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans cette formation en vidéo, je vous propose un guide complet sur l'apprentissage d'une nouveauté en CSS : la CSS Grid (ou grille CSS en français). Cette nouvelle forme de mise en page CSS n'est pas en concurrence avec Flexbox, mais un complèment indispensable à connaître pour tout bon concepteur de site internet du côté Front End !

Note : Si vous ne connaissez pas Flexbox et que vous souhaitez découvrir cette technologie CSS, j'ai également réalisé une formation sur le sujet.
 

Au programme de cette formation CSS Grid en vidéo

Dans cette suite de tutoriels vidéo, vous apprendrez à mettre en place très facilement une grille virtuelle à l'aide de nouvelles propriétés CSS. Le but de cette grille sera de caller des contenus très simplement, sur l'écran.

Les propriétés CSS ainsi que leurs différentes valeurs seront étudiées tout au long de ce tuto complet afin de vous permettre de savoir réaliser des mises en page rapides et faciles grâce à cette nouvelle technologie !

Après la théorie, une séance d'entrainement vous sera proposée afin de bien assimiler les propriétés CSS nouvellement apprises.

Nous terminerons ce tuto par un exercice dont je mets les sources à votre disposition. 
Enfin un QCM vous sera proposé pour tester vos nouvelles compétences ! Je reste bien évidemment disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 

A la fin de ce tuto, les grilles CCS seront pour vous un véritable jeu d'enfant !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Présentation
Chapitre 2
Le conteneur et ses propriétés
Chapitre 3
Les contenus et leurs propriétés
Chapitre 4
Autres propriétés
Chapitre 5
Déplacement des contenus
Chapitre 6
Consolidation des nouveaux acquis
Chapitre 7
Création d'une maquette d'un site responsive

Plan détaillé du cours

Chapitre 1 : Présentation
11m56s
 
Leçon 1Introduction
Leçon 2Grid et inline-grid
Chapitre 2 : Le conteneur et ses propriétés
41m35s
 
Leçon 1Mise en place du conteneur et des contenus
Leçon 2Et flexbox ?
Leçon 3Création des colonnes
Leçon 4Gestion de la hauteur des lignes
Leçon 5Complèment d'informations
Leçon 6Les gouttières
Leçon 7Une nouvelle unité de mesure
Leçon 8La fonction repeat
Chapitre 3 : Les contenus et leurs propriétés
16m50s
 
Leçon 1Les lignes de grilles verticales
Leçon 2Les lignes de grilles horizontales
Leçon 3Le mot clé span
Leçon 4Propriétés raccourcies
Chapitre 4 : Autres propriétés
30m21s
 
Leçon 1Changer le sens d'affichage
Leçon 2Créer une colonne virtuelle
Leçon 3Créer une ligne virtuelle
Leçon 4Petit exercice de rappel
Leçon 5Définition des zones
Leçon 6La fonction minmax
Leçon 7La propriété order
Chapitre 5 : Déplacement des contenus
16m39s
 
Leçon 1Présentation
Leçon 2Alignement de la grille sur l'axe horizontal
Leçon 3Alignement de la grille sur l'axe vertical
Leçon 4Alignement de tous les contenus
Leçon 5Alignement d'un contenu
Chapitre 6 : Consolidation des nouveaux acquis
43m53s
 
Leçon 1Intro
Leçon 2Q.R. 1 à 4
Leçon 3Q.R. 5 à 8
Leçon 4Q.R. 9 à 12
Leçon 5Q.R. 13 à 16
Leçon 6Q.R. 17 à 20
Leçon 7Q.R. 21 à 24
Leçon 8Q.R. 25 à 28
Leçon 9Conclusion
Chapitre 7 : Création d'une maquette d'un site responsive
22m30s
 
Leçon 1Présentation du travail
Leçon 2Mise en place des bases du travail
Leçon 3CSS côté smartphone
Leçon 4CSS côté ordinateur
Leçon 5Conclusion

Avis des apprenants

Détail des avis
114
Apprenants
20
Commentaires
5/5
Note moyenne
5/5
20
4/5
0
3/5
0
2/5
0
1/5
0
Guillaume Duval
Guillaume Duval
Publié le 09/01/2024
super tuto comme d'habitude super clair et interressant
Carl Brison
Carl Brison
Merci beaucoup, c'est très gentil ;-)
Frédéric Dumas
Frédéric Dumas
Publié le 18/05/2023
C'est tout simplement un excelent cours pour apprendre Grid, très intelligible pour ceux qui comme moi veulent le découvrir sans peine, en comprendre les fondements, commencer à le manipuler et même avec un chouilla de responsiv, sans oublié une vidéo chapitrée et une voix très agréable qui sait nous guider dans cet apprentissage. Bref je n'ai qu'une hâte, commencer la deuxième vidéo que vous nous proposez sur le sujet. Le Grid Garden est un super plus à faire par soi-même ;)
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Jean Villemont
Jean Villemont
Publié le 22/02/2023
cela devient très facile de réaliser un site web avec 'Grid' et 'Flexbox'. fini le temps des positionnements avec float ou table ou position absolute merci beaucoup
Carl Brison
Carl Brison
Vous avez parfaitement raison. Merci beaucoup pour votre commentaire ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Les codes sources de l'exercice final.

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données