Bienvenue dans ce cours dans lequel vous allez apprendre la nouvelle révolution du positionnement, les CSS GRID !
Apprenez à créer des designs uniques avec cette méthode de positionnement qui offre des possibilités énormes et permet enfin de créer des sites originaux de manières rapide, logique et intuitive.
Ce cours en ligne, et en vidéo, vise les personnes voulant se former, se mettre à jour, ou tout simplement les débutants qui souhaitent avoir un panel de compétences complet.
Des connaissances basiques de CSS sont requises pour suivre le tuto dans de bonnes conditions.
Au programme de cette formation maîtrisez CSS GRID :
- Une partie théorique pour comprendre les propriétés et le concept de CSS Grid,
- Une partie pratique avec 3 projets à réaliser : un thème de blog, un projet de location de voitures et une galerie photo, le tout en CSS Grid !
Vous pourrez ainsi mettre concrètement en application, vos nouvelles compétences.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles question, sur le tuto.
Les fichiers de travail sont fournis.
Bonne découverte de CSS Grid.
Table des matières de cette formation CSS (durée : 1h29m)
-
Introduction
- Introduction gratuit 00:02:32
-
Propriétés et concept
- Création de notre première grille 00:07:29
- Repeat et Fractionnal Unit 00:02:23
- Placement avec Grid-Row et Grid-Col 00:03:17
- Placement sur plusieurs cellules 00:04:17
- Nommer Colonnes et rangés 00:03:23
- Nommer une "area" 00:02:03
- Grille explicite et grille implicite 00:01:30
- Aligner et centrer ces cellules 00:03:19
- Aligner et centrer sa grille 00:02:59
- Max-content et Min-content 00:05:47
- Autofill, autofit et la fonction MinMax 00:04:12
-
Premier projet : Thème de blog
- Créer une disposition complète avec CSS GRID 00:06:25
-
Second projet : Location de voitures
- Projet location de voitures, partie HTML 00:07:18
- Projet location de voitures, partie CSS 1 00:08:55
- Projet location de voitures, partie CSS 2 00:09:48
-
Troisième projet : Galerie CSS GRID
- Projet Galerie partie 1 00:08:45
- Projet Galerie partie 2 00:04:39
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Toujours généreux sur les explications. Merci beaucoup
-
Bon tuto Enzo... comme souvent. on sent vraiment le pro en front-end :) La majorité des propriétés de css grid sont là, une bonne élocution (et gros+ pour ton accent), de bonnes explications aussi (on voit vraiment que c'est du par coeur quand tu parles). Mais bon attention tu risques de faire fuir les débutants comme moi. Pour ma part tes tutos (et donc celui ci) vont BEAUCOUP TROP VITE pour moi ):, on dirait que tu as un train à prendre à chaque fois lol. Certes tu vas me dire qu'on peut baisser la vitesse de la vidéo mais bon ... En fait je pense que tu n'y peux pas grand chose, tu maitrises tellement tous tes sujets que tu te rends pas compte que tu vas vite pour les débutants lol. Là ça m'embête un peu de ne pas te mettre 5 étoiles car tu es hyper compétent mais il faut marquer le coup. Malgré tout ça ne m'empêchera pas de suivre tes prochains tutos. Johan.
-
Merci pour ce tuto explicatif, je pense avoir bien compris le principe du Grid. Je vais maintenant faire des essais pour avoir plus de facilité à travailler.
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le fichier source contient le code source pour vous aider lorsque vous allez effectuer les projets du cours.
note moyenne
avis laissés