$ 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

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é 45 tutoriels et obtenu une note moyenne de 4,9/5 sur 3 103 tutoriels vendus. Voir les autres formations de Carl Brison

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


non, je ne veux pas me former gratuitement

voir notre politique de protection des données