$ 29.00

Tuto CSS Grid, le guide complet en vidéo avec CSS

$ 29.00

  • Une formation vidéo de 3h03m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Devenir un Pro en CSS Grid !
Retrouvez cette formation dans le bundle :

Devenir un Pro en CSS Grid !

-28% de réduction

voir les détails du bundle


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 !

Table des matières de cette formation CSS (durée : 3h03m)

  • Présentation
    • Introduction gratuit 00:04:13
    • Grid et inline-grid 00:07:43
  • Le conteneur et ses propriétés
    • Mise en place du conteneur et des contenus 00:04:48
    • Et flexbox ? 00:07:11
    • Création des colonnes 00:05:37
    • Gestion de la hauteur des lignes 00:06:36
    • Complèment d'informations 00:03:51
    • Les gouttières 00:05:17
    • Une nouvelle unité de mesure 00:04:25
    • La fonction repeat 00:03:50
  • Les contenus et leurs propriétés
    • Les lignes de grilles verticales 00:06:26
    • Les lignes de grilles horizontales 00:03:57
    • Le mot clé span 00:02:44
    • Propriétés raccourcies 00:03:43
  • Autres propriétés
    • Changer le sens d'affichage 00:02:46
    • Créer une colonne virtuelle 00:03:40
    • Créer une ligne virtuelle 00:02:16
    • Petit exercice de rappel 00:09:03
    • Définition des zones 00:07:32
    • La fonction minmax 00:03:14
    • La propriété order 00:01:50
  • Déplacement des contenus
    • Présentation 00:02:47
    • Alignement de la grille sur l'axe horizontal 00:05:23
    • Alignement de la grille sur l'axe vertical 00:03:36
    • Alignement de tous les contenus 00:02:42
    • Alignement d'un contenu 00:02:11
  • Consolidation des nouveaux acquis
    • Intro 00:01:12
    • Q.R. 1 à 4 00:06:45
    • Q.R. 5 à 8 00:04:20
    • Q.R. 9 à 12 00:03:54
    • Q.R. 13 à 16 00:05:38
    • Q.R. 17 à 20 00:06:34
    • Q.R. 21 à 24 00:05:10
    • Q.R. 25 à 28 00:09:14
    • Conclusion 00:01:06
  • Création d'une maquette d'un site responsive
    • Présentation du travail 00:01:16
    • Mise en place des bases du travail 00:07:28
    • CSS côté smartphone 00:05:48
    • CSS côté ordinateur 00:04:34
    • Conclusion 00:03:24



Formateur : Carl Brison

Carl Brison a publié 96 tutoriels et obtenu une note moyenne de 4,9/5 sur 6 219 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

6
avis laissés
5 étoiles
6
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de vinceb0 laissé le 07/05/2019
    C'est clair, c'est bien expliqué, c'est passionnant. Tout y est ! Avec un prof comme Mr Brison, on a envie d'apprendre d'avantage et on devient aussi passionné que lui. Bref, je continue les cours en sa compagnie. Merci
    "Merci à vous, c'est vraiment super sympas ;-)"

  • 5
    avis de laroccavideo laissé le 04/04/2019
    Très clair et accessible. On sent que le formateur est passionné et est donc passionnant. Il répond même parfois aux questions lorsqu'elles nous viennent à l'esprit, avant qu'on les lui pose !

  • 5
    avis de pierrefranck laissé le 29/01/2019
    Sacré pedagogue :) Merci pour cette formation. je vais certainement laisser tomber l'apprentissage de bootstrap et passer aux flexbox qui me parraissent être la suite au grid pour styler le contenu des box. petite question : meme si j'imagine que c'est déconseillé. est il possible d'insérer un menu bootstrap dans une boite de ma grille?
    "Merci BEAUCOUP pour votre commentaire ;-) !!! Pour répondre à votre question, oui pourquoi pas. Du moment que votre code soit cohérent. Maintenant, vous avez parfaitement raison de vous tourner sur les flexbox. Et quand ce sera fait, allez faire un tour sur ce tuto: https://fr.tuto.com/css/savoir-utiliser-grid-et-flexbox-ensemble-css,116231.html"

  • 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.
accédez à plus de 1150 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données