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

TUTO CSS Grid, le guide complet en vidéo

Carl Brison
29,00€
Acheter maintenant, payer plus tard. En savoir plus

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
320
Apprenants
23
Commentaires
5/5
Note moyenne
5/5
23
4/5
0
3/5
0
2/5
0
1/5
0
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 12/07/2024
De mieux en mieux, on va finir par appuyer sur un bouton pour faire le site à notre place ;-) J'adore les travaux pratiques de fin de formation.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil
Romain Detemmerman
Romain Detemmerman
Publié le 07/07/2024
Merci ..............
Carl Brison
Carl Brison
Merci pour votre commentaire ;-)
Valérie Caruana
Valérie Caruana
Publié le 06/06/2024
très utile et bien expliqué. merci!
Carl Brison
Carl Brison
Merci beaucoup ;-)

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.

Payer plus tard

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

Notre politique de protection des données