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.
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.
grid-template-columns et subgridQue va vous apprendre 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 !
Programme de la formation
Introduction à Flexbox
- Distribution
- Alignements
- Ordonnancement
- Flexibilité
La distribution
display: flexetdisplay: inline-flex- L'orientation avec
flex-direction - Le passage à la ligne avec
flex-wrap
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
Les pièges de Flexbox
- Les propriétés prioritaires
- Les bugs des navigateurs
- Les comportements inattendus
Introduction à Grid Layout
- 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
- Appliquer des gouttières
Placement automatique
- Grille implicite
- Grille explicite
- Propriétés de flux automatique
Unités et valeurs de Grid Layout
- L'unité "fr"
- La valeur "auto"
- La fonction "minmax()"
Placement explicite
- Propriétés de placement défini
- Les Zones nommées (grid-area)
- Propriétés de zones nommées
- Les propriétés raccourcies
- Les méthodes de fusion de cellules
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
Comparatif Flexbox et Grid Layout
- Contenu ou conteneur
- Fluidité ou rigueur
- Axe unique ou axe double
Au cas par cas, Flexbox ou Grid Layout
- Alignement de formulaire
- Composant "Media"
- Liste
- Galerie
- Les "cacahuètes"
- Slider
- Verdict final
Informations complémentaires
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 à 10 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.
Inscription et informations pratiques
Durée de formation
Lieux disponibles
Formateur
Raphaël Goetter
Raphaël est créateur et administrateur du site Alsacreations.com, intégrateur HTML et CSS, auteur de plusieurs livres CSS publiés chez Eyrolles. Passionné de standards, d'accessibilité et de bonnes pratiques web.
Certifié accessibilité Access42
Atouts de la formation
- Effectif réduit (jamais plus de 12 participant·e·s).
- Repas de midi offert chez Alsacréations (à Strasbourg).
- Formateur à l’écoute, chacun peut intervenir à tout moment.
- Travaux pratiques réalisés en conditions réelles.
- Supports complets fournis.
Infos complémentaires
Derniers avis
Témoignage
Une formation comme ont les aime, un formateur à l’écoute, maîtrise son sujet. Les choses sont expliquées de façon claire et compréhensible. Une formation à recommander à tout point de vue.
Témoignage
Formation très intéressante, merci beaucoup ! Je connaissais un peu Flexbox et Grid Layout mais, grâce à cette formation, j'ai pu approfondir mes connaissances et acquérir des techniques très intéressantes. Merci beaucoup au formateur!
Témoignage
Merci pour la qualité de cette formation et la pédagogie du formateur. Comme toujours les formations sont d'excellente qualité chez Alsacreations.
Date de mise à jour :
