Cette formation va vous permettre de passer un cap dans votre expertise sur CSS
Description de la formation Flexbox CSS Grid Layout
Grâce à cette formation de trois jours, vous serez à même de profiter de toutes les nouveautés apportées par cette spécification CSS3 pour pour construire des gabarits, des grilles de mise en page, voire des applications web entières en quelques lignes de code.
Le module de positionnement Grid Layout est une spécification du W3C à l’état de Candidate Recommandation . Ce dernier est maintenant exploitable en production sur l’ensemble des navigateurs, le concept général de Grid Layout (ou « positionnement en grille ») est de structurer l’espace en zones majeures, au sein d’une page web ou d’une application.
Le flexbox est un modèle de description unidimensionnel des éléments CSS des différentes zones des pages web.
Bulletin d’
inscription Demande de
devis Détail du
programme
Programme de la formation Flexbox et CSS Grid Layout
- Concepts de base de Grid Layout
- Démonstration initiale
- La dernière spécification W3C
- Grid Container, Grid Item
- Grid Line, Grid Track, Grid Cell, Grid Area
- Les propriétés de grille sur le parent
- Les propriétés de grille sur les enfants
- Le flux dans la grille Grid Layout
- Grille implicite
- Grille explicite
- Propriétés de flux automatique
- Placement automatique
- Unités et valeurs de Grid Layout
- L’unité « fr »
- La valeur « auto »
- La fonction « minmax() »
- Le placement sur mesure avec Grid Layout
- Le Placement défini
- Propriétés de placement défini
- Les Zones nommées
- Propriétés de zones nommées
- Les propriétés raccourcies
- Les méthodes de fusion de cellules
- Appliquer des gouttières
- Aligner dans Grid Layout
- Alignement des l’ensemble des cellules
- Alignement général des Grid Items
- Alignement individuel d’un Grid Item
- Répétition de motifs Grid Layout
- Fonction repeat()
- Les valeurs auto-fill et auto-fit
- La combinaison repeat() + auto-fit + minmax()
- Fonctionnalités avancées Grid Layout
- Modification de l’ordre d’affichage
- Superposition d’éléments
- Valeurs négatives de Grid Line
- Construction d’un template responsive
- Tableau de support navigateurs
- Ressources : Grid Polyfill et Gridbugs
- Amélioration progressive
- Le « cas » IE
- Les stratégies de mise en production
|
- Concepts de base de Flexbox
- Le concept de distribution
- Le concept d’alignement
- Le concept d’ordonnancement
- Le concept de flexibilité
- La compatibilité des navigateurs
- Les commandes display: flex et display: inline-flex
- L’orientation grâce à la commande flex-direction
- Le passage à la ligne avec flex-wrap
- La propriété order
- Exemples
- La notion d’axe dans Flexbox
- Les alignements sur l’axe principal et l’axe secondaire
- L’alignement sur plusieurs pistes ou éléments individuels
- Un mot sur la propriété margin
- Le concept de flexibilité
- Agrandissement (flex-grow), réduction (flex-shrink) et taille idéale (flex-basis)
|
|
LA SATISFACTION DES PARTICIPANTS À CETTE FORMATION EST DE 4.2/5 :