$ 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é 63 tutoriels et obtenu une note moyenne de 4,9/5 sur 4 084 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

3
avis laissés
5 étoiles
3
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de nos_ave laissé le 19/08/2018
    Excellente formation sur les grilles. Les explications sont claires et conscises, très faciles à comprendre. Cette formation m'aura appris beaucoup de chose sur les grilles, merci ^^. Je valide à 100% ;).

  • 5
    avis de valerie-a77 laissé le 21/07/2018
    Bonjour Carl et merci pour ce cours très sympathique :-) J'ai beaucoup aimé et comme toujours, clairement expliqué et avec simplicité. Pas trop rapide ce qui permet de bien capter. J'avoue que j'ai calé au Grid-Garden mais je me suis rattrapée à la partie suivante. C'est une technique fabuleuse. Pour Bootstrap c'est dommage je vais devoir le faire quand même car j'ai acheté une (ou deux je ne sais plus) formations sur un autre site). Mais je vais me cramponner aux grid et flexbox.
    "Merci à vous Valérie ;-) Oui, cramponnez-vous à CSS-Grid ainsi qu'au Flexbox, c'est cela l'avenir de la mise en page web !"

  • 5
    avis de vishnou laissé le 14/07/2018
    Explications claires, très bonne pédagogie

  • 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 1155 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données