Formation Flexbox et Grid Layout
Les mises en page Responsive n'auront plus aucun secret pour vous grâce aux nouveaux modes de positionnement CSS3 révolutionnaires.
Durée de formation : 3 jours (ou +)
Lieux de formation :- Présentiel à Strasbourg
- Possible à Paris
- Possible à distance
- Possible en groupe (intra-entreprise)
Une formation entièrement dédiée au
positionnement moderne et responsive en CSS !
Flexbox et Grid Layout sont deux modes de
positionnement CSS parfaitement complémentaires et désormais exploitables en production sur l’ensemble des
navigateurs. Le concept général de Grid Layout est de structurer l’espace en zones majeures, au sein d’une page web
ou d’une application, tandis que Flexbox a pour rôle de designer les composants qui s'y trouvent.
Vous apprendrez au cours de cette formation :
- à (re)découvrir le positionnement CSS propre et maintenable, dépourvu de bidouilles et code inutile,
- à maîtriser le Responsive grâce à la capacité de Flexbox et Grid Layout à s'adapter immédiatement aux différentes tailles d'écran,
- à gérer de multiples templates (gabarits) de page ou d'application simplement et sans intervenir sur la structure du document,
- à… réapprendre à aimer CSS !
Formation uniquement en intra-entreprise
Cette formation est dispensée en intra-entreprise uniquement (par groupes, chez un client), en présentiel dans vos locaux, mais aussi en ligne en distanciel dans votre canapé si vous le souhaitez !
La durée de formation (21h) est répartie différemment selon le mode choisi : 3 jours en présentiel, ou 5 demi-journées en distanciel.
Concepts généraux de Flexbox
- Distribution
- Alignements
- Ordonnancement
- Flexibilité
- Compatibilité navigateurs
La distribution
display: flexetdisplay: inline-flex- L'orientation avec
flex-direction - Le passage à la ligne avec
flex-wrap - Exemples
L'ordonnancement
- La propriété
order - Particularités
L'alignement
- Comprendre les axes dans Flexbox
- L'alignement dans l'axe principal
- L'alignement dans l'axe secondaire
- L'alignement sur plusieurs pistes
- L'alignement d'éléments individuels
- Le pouvoir de la propriété
margin
La flexibilité
- Comprendre la flexibilité
- Pouvoir s'agrandir avec
flex-grow - Pouvoir se réduire avec
flex-shrink - La taille idéale avec
flex-basis - Cumuls et calculs savants
Les pièges de Flexbox
- Les propriétés prioritaires
- Les bugs des navigateurs
- Les comportements inattendus
- Et à la fin tout finit bien !
Concepts généraux
- Démonstration initiale
- Une spécification W3C finalisée
- 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
- 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()"
Placer explicitement
- 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
- Fonction repeat()
- Les valeurs auto-fill et auto-fit
- La combinaison repeat() + auto-fit + minmax()
Fonctionnalités avancées
- Modification de l'ordre d'affichage
- Superposition d'éléments
- Valeurs négatives de Grid Line
- Construction d'un template responsive
Pour conclure
- Support de Grid Layout
- Ressources
- Choisir entre Flexbox et Grid Layout
Public
Cette formation à CSS3 Flexbox et Grid Layout est destinée aux webdesigners et intégrateurs avancés ou experts qui souhaitent maîtriser en production ces modèles de positionnement Responsive, ainsi qu'aux développeurs et chefs de projet Web qui s’interrogent sur les possibilités offertes par CSS en termes de design d’interfaces.
Objectifs
Être capable de concevoir des pages et applications web avec Flexbox et Grid Layout. Connaître les propriétés nécessaires et leurs usages. Savoir organiser son code et choisir la solution adaptée.
Prérequis
Être familier avec HTML, CSS et bien connaître les notions de base de positionnement CSS (float, position absolute, inline-block, Flexbox)
Moyens pédagogiques
Durant chaque formation, les participants et participantes auront l’opportunité de mettre en application leurs apprentissages grâce à de nombreux cas pratiques et exercices. Ces exercices seront ensuite corrigés et explicités par le formateur ou la formatrice. Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 8 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.
Suivi et appréciation des résultats
L'exécution de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les participants et le formateur. Sanction : attestation de présence. Un bilan des acquis est effectué à l'issue de la formation par questionnaire individuel en ligne et par les exercices réalisés durant la session.
Modalités de positionnement et d’évaluation
Le positionnement à l'entrée est évalué par questionnaire individuel en ligne (comportant des questions relatives au profil, aux attentes, aux connaissances initiales et aux prérequis techniques) ainsi que par échange e-mail lors de la prise de contact et de la préparation du dossier. Un entretien préalable par visioconférence a lieu dans le cas des groupes en intra.
Dernière mise à jour de ces informations :
Besoin d'un financement ?
Une formation est un investissement : pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées dont la prise en charge par votre OPCO.
Avant cette formation, préparez-vous avec :
À la suite de cette formation, nous vous recommandons :
Envie de connaître la date
de nos prochaines formations ?
Nous contacter
Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr
Alsacréations10 Place du Temple Neuf
67000 Strasbourg, France