Formation CSS Grid Layout

Tirez parti de toutes les nouveautés apportées par cette spécification CSS3 révolutionnaire pour construire des gabarits, des grilles de mise en page, voire des applications web entières en quelques lignes de code.

Public

Cette formation à CSS3 Grid Layout est destinée aux intégrateurs et webdesigner qui souhaitent construire leurs pages ou applications web à l'aide de la dernière petite révolution CSS dans le domaine du positionnement.

Objectifs

À la fin de la formation, vous êtes capable de concevoir des pages et applications web avec Grid Layout.

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

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 physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur. Sanction : attestation de fin de stage.

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

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

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.

Voir les différents financements

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 ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France