CSS est un langage incontournable pour tout développeur. Il permet de mettre en forme des pages web en offrant des possibilités de personnalisation de plus en plus impressionnantes.

Objectifs

Cette formation CSS avancé, qui associe théorie et exercices pratiques, s’adresse aux intégrateurs et développeurs qui souhaitent optimiser leurs méthodes de travail en exploitant CSS à un niveau avancé dans leurs projets.

Public

Cette formation s’adresse aux intégrateurs et développeurs

Pré-requis

  • Connaissances intermédiaires de CSS
  • Ordinateur portable avec un navigateur récent

Plan de cours

Jour 1 : Les bases

  • Rappel sur les unités CSS
    • Différences entre unités absolues et relatives
    • Bien choisir son unité
  • Propriétés graphiques
    • Les incontournables : border-radius, box-shadow, etc.
    • Gestion des images
    • Un peu de transparence ? Masques, filtres et plus si affinité
  • Sélecteurs CSS avancés
    • Les combinateurs
    • Les pseudo-classes
    • Les pseudo-éléments
  • Transformations 2D & 3D
    • Flux et contexte d’empilement
    • Les différentes valeurs de la propriété : transform
    • Travailler dans un plan 3D
  • Transitions et animations CSS
    • Les transitions CSS
    • Les animations CSS
    • Performances et accélération matérielle
  • Media Queries
    • La règle @media
    • Les types de média
    • Les caractéristiques de média
    • Quelques bonnes pratiques

Jour 2 : Les propriétés avancées

  • Propriétés personnalisées
    • Rappel sur la fonction calc()
    • Qu’est-ce qu’une propriété personnalisée ?
    • Notions d’héritage et de cascade
    • Le combo gagnant
    • Interaction avec le langage JavaScript
    • Compatibilité
  • Boîtes flexibles (Flexbox)
    • Concepts de base
    • Le conteneur : Direction et alignement
    • Les éléments : Flexibilité et ordonnancement
    • Compatibilité
  • Grilles CSS (Grid Layout)
    • Concepts de base
    • Les similitudes avec Flexbox
    • Le conteneur : Direction, alignement et gouttières
    • Les éléments : Placement, alignement et ordonnancement
    • Compatibilité

Jour 3 : Un peu de méthodologie

  • Préprocesseurs CSS
    • Un préprocesseur, c’est quoi ?
    • Introduction à Sass
    • Les fonctionnalités programmatiques
    • Les fonctionnalités structurelles
    • Sass et CSS
    • Les pièges à éviter
  • Architecture et nomenclature CSS
    • Différentes méthodologies : OOCSS, Atomic Design, ITCSS, etc.
    • La convention de nommage BEM
    • Un monde idéal ?
  • Outils
    • Maintenir son code : Styleguide, Autoprefixer CSS, Stylelint
    • Debugger son code : Sourcemaps
    • Optimiser son code : unCSS, Critical CSS, CSSnano

Méthode pédagogique

Avant chaque formation, nos formateurs contactent les participants afin de déterminer vos objectifs et savoir s’il faut mettre l’accent sur un sujet particulier. C’est le bon moment, pour vous, d’échanger avec le formateur pour lui permettre de mieux cerner vos objectifs et les aspects que vous aimeriez voir approfondis.

Tout au long de la formation, le formateur s’assura de l’assimilation des connaissances en communiquant avec les participants, en répondant à leurs questions et en contrôlant l’appropriation des connaissances en début, pendant et à la fin de chaque journée de formation.

Le responsable de formation évaluera la formation donnée, mesurera ses effets, son utilité et sa valeur ajoutée à travers des questionnaires de satisfaction à froid et à chaud.

  • Alternance de cours magistraux et de travaux pratiques sur machine individuelle
  • Des apports théoriques appuyés par des études de cas, jeux de rôles, mise en situation
  • Un projet en fil rouge tout au long de la formation, servant de support aux exercices proposés
  • Des corrections collégiales et individualisées pour chaque mise en pratique

Moyens

JoliCampus met à disposition pour le bon déroulement de la formation :

  • Un formateur expert dans le domaine du développement avec Symfony, et ayant prouvé sa maîtrise à transmettre ses connaissances.
  • Une salle calme et lumineuse, adaptée à cet effet et avec une excellente connexion internet.
  • Des supports de formation (slides, exercices…) récupérables par chaque participant.