Devenir un Pro en CSS Grid !
ERROR
00:00
00:00

TUTO Devenir un Pro en CSS Grid !

Carl Brison
Promo -28%
39,00€54,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Pour ce troisième Bundle, je vous propose de devenir incollable 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 assoir 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
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
 
Chapitre 1 : Introduction et rappel
14m57s
 
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
28m33s
 
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
29m24s
 
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
13m43s
 
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
18m47s
 
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
27m32s
 
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
05m22s
 
Leçon 1Conclusion
Leçon 2BONUS :: Mon livre sur l'apprentissage du PHP

Avis des apprenants

Détail des avis
77
Apprenants
15
Commentaires
5/5
Note moyenne
5/5
14
4/5
1
3/5
0
2/5
0
1/5
0
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 ;-)
Ninon Daniel
Ninon Daniel
Publié le 03/06/2021
ludique, très bien expliqué
Carl Brison
Carl Brison
Merci beaucoup, c'est super gentil ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

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 !

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données