Devenir un Pro en CSS Grid !
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
5h22
de formation
72
leçons vidéo
2
formations
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Devenir un Pro en CSS Grid !

Promo -50%
4.8/5 Trustpilot (1388 avis) Satisfait ou remboursé
5h22
de formation
72
leçons vidéo
2
formations

Pour ce troisième Bundle, je vous propose de devenir incollables en CSS Grid.
Au fait, c'est quoi CSS-Grid ? CSS-Grid est une technologie officielle du CSS qui permet de réaliser des mises en page de sites Internet très facilement grâce à la mise en place d'une grille. 

La connaissance de cette technologie est indispensable pour celles et ceux qui souhaitent travailler du côté Front-End !

Au programme de ce Bundle devenir un pro en CSS Grid

Dans ce Bundle, je vous propose de découvrir

  • toute la théorie autour de CSS-Grid,
  • puis, de passer ensemble à la pratique afin de bien asseoir les connaissances nouvellement acquises.

Nous allons voir des cas concrets dans les conditions d'Entreprise. Nous travaillerons côté Mobile First mais aussi côté Desktop First.
Ainsi, vous serez totalement opérationnel dans l'utilisation de la technologie CSS-Grid.

Je reste disponible dans le salon d'entraide. Les fichiers de travail sont fournis.
Bonne formation !

Cours dans ce bundle

CSS Grid, le guide complet en vidéo Cours 1

CSS Grid, le guide complet en vidéo

CSS-Grid : Mise en application Cours 2

CSS-Grid : Mise en application

Plan détaillé des cours

 

Chapitre 1 : Présentation

11m56
 
Leçon 1Introduction
Leçon 2Grid et inline-grid

Chapitre 2 : Le conteneur et ses propriétés

41m35
 
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

16m50
 
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

30m21
 
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

16m39
 
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

43m53
 
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

22m30
 
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
 

Chapitre 1 : Introduction et rappel

14m57
 
Leçon 1Présentation du tuto
Leçon 2Le viewport
Leçon 3Les points de ruptures
Leçon 4Les medias queries
Leçon 5Le mobile first

Chapitre 2 : Premier job, côté mobile first

28m33
 
Leçon 1Présentation
Leçon 2Mise en place de la structure HTML
Leçon 3Mise en place du CSS pour les smartphones
Leçon 4Mise en place du CSS pour les ordinateurs

Chapitre 3 : Second job, côté mobile first

29m24
 
Leçon 1Présentation
Leçon 2Mise en place de la structure HTML
Leçon 3Mise en place du CSS pour les smartphones
Leçon 4Mise en place du CSS pour les tablettes
Leçon 5Mise en place du CSS pour les ordinateurs
Leçon 6Une grille dans la grille

Chapitre 4 : Troisième job, côté desktop first

13m43
 
Leçon 1Présentation
Leçon 2Mise en place de la structure HTML
Leçon 3Mise en place du CSS pour les ordinateurs
Leçon 4Mise en place du CSS pour les smartphones

Chapitre 5 : Quatrième job, côté desktop first

18m47
 
Leçon 1Présentation
Leçon 2Mise en place de la structure HTML
Leçon 3Mise en place du CSS pour les ordinateurs
Leçon 4Mise en place du CSS pour les tablettes
Leçon 5Mise en place du CSS pour les smartphones

Chapitre 6 : Cinquième job, côté desktop ou mobile first

27m32
 
Leçon 1Présentation
Leçon 2Mise en place de la structure HTML
Leçon 3Desktop first, côté ordinateurs
Leçon 4Desktop first, côté tablettes et smartphones
Leçon 5Mobile first, côté smartphones
Leçon 6Mobile first, côté tablettes et ordinateurs

Chapitre 7 : Conclusion

05m22
 
Leçon 1Conclusion
Leçon 2BONUS :: Mon livre sur l'apprentissage du PHP

Avis des apprenants

Détail des avis
328
Apprenants
16
Commentaires
5/5
Note moyenne
5/5
15
4/5
1
3/5
0
2/5
0
1/5
0
Françoise Richard
Françoise Richard
Publié le 01/07/2026
Merci beaucoup pour ce tuto ! J'ai bien compris et je me suis beaucoup amusée !!
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Nico Vigo
Nico Vigo
Publié le 01/01/2022
Formateur très appréciable et qualité des tutos, c'est top!
Carl Brison
Carl Brison
Merci pour votre commentaire
Cyrille Monstard
Cyrille Monstard
Publié le 04/06/2021
Très bon tuto, je le recommande
Carl Brison
Carl Brison
Merci beaucoup ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Bonjour Carl :-) Dommage j'ai déjà acheté les 2 formations qui composent ce bundle. Je ne les ai pas encore faites. J'aurai dû attendre un peu, j'aurai eu du 2 en 1. Je suis impatiente de découvrir cette nouvelle méthode. (Quoi que ça me fait penser à Bootstrap que je laisse loin sur le côté pour le moment.). Valérie

Bonjour Valérie. Merci pour votre message. Concernant Bootstrap, je vous conseille de laisser totalement tomber et de vous concentrer sur css-grid et flexbox ;-)

Bonjour, je vois dans une de vos réponse qu'il vaut mieux laisser tomber totalement bootstrap. Pourquoi ?

Bonjour, Bootstrap fut très bien en son temps. Son principale problème : ses mises à jour qui obligent à réapprendre de nouveaux codes et rendre plus difficile la maintenabilité des sites. Et enfin, il n'y a plus aucun intérêt à se servir de la grille de bootstrap si on maîtrise CSS-Grid ! Je pense que so bootstrap veut continuer d'exister, il devra se réinventer. C'est mon avis ! Vous avez parfaitement le droit de voir les choses différemment !

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
53,99€ 27€
Promo -50%
Paiement unique, sans abonnement
Accès à vie à cette formation
5h22 de vidéo
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 767 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1424 tutos gratuits

Notre politique de protection des données