CSS Grid, le guide complet en vidéo
CSS Grid, le guide complet en vidéo
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 : Mise en application
CSS-Grid : Mise en application
Plan détaillé des cours
Chapitre 1 : Présentation
11m56
Leçon 1Introduction
Leçon 2Grid et inline-grid
Chapitre 2 : Le conteneur et ses propriétés
41m35
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
16m50
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
30m21
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
16m39
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
43m53
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
22m30
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
14m57
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
28m33
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
29m24
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
13m43
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
18m47
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
27m32
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
05m22
Leçon 1Conclusion
Leçon 2BONUS :: Mon livre sur l'apprentissage du PHP
Avis des apprenants