Formation Flexbox et Grid Layout

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
            • Support de Grid Layout
            • 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
  • Distribution Flexbox
  • Les commandes display: flex et display: inline-flex
  • L’orientation grâce à la commande flex-direction
  • Le passage à la ligne avec flex-wrap
  • Ordonnancement Flexbox
  • La propriété order
  • Exemples
  • Alignement Flexbox
  • 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
  • Flexibilité Flexbox
  • 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 5/5 :

Nous vous conseillons également

  • Niveau : Expert
  • Ref : TCCGL
  • Durée : 3 jours - 21h
  • Prix : 1300€
  • Niveau : Expert
  • Ref : TCCGL
  • Durée : 3 jours - 21h
  • Prix : à définir

Paris

Aucune date pour le moment.

A distance

Aucune date pour le moment.

organiser votre formation

Objectifs

  • Redécouvrir du HTML et du CSS
  • Maîtriser le Responsive grâce à la capacité de Grid Layout à s'adapter immédiatement aux différentes tailles d'écran,
  • Savoir gérer multiples templates (gabarits) de page ou d'application simplement et sans intervenir sur la structure du document

Public

  • Webdesigners et intégrateurs avancés ou experts
  • Développeurs
  • Chefs de projet Web

Pré-requis

  • Être familier avec HTML, CSS
  • Bonne connaissance des notions de base de positionnement CSS (float, position absolute, inline-block, Flexbox)
Pré-inscription
Nous réalisons cette formation avec les experts d'AlsaCreations.
logo_alsacreations
Nous proposons
Consulting
Formation