Formation Bonnes pratiques CSS3

Toutes les techniques CSS modernes et professionnelles pour faciliter vos intégrations. Bonnes pratiques et méthodologies sont au programme!

Durée de formation : 3 jours (ou +)

Lieux de formation :
  • Strasbourg
  • Paris
  • en ligne
  • en intra-entreprise

Vous n'êtes plus à jour en CSS3 ? Votre code n'est pas toujours facile à maintenir ou améliorer ?

Avec ce programme aux petits oignons élaboré par un expert reconnu, concentrez-vous sur l'essentiel des CSS modernes en production, sans vous perdre dans les méandres des nombreuses spécifications. Vos mauvaises pratiques CSS ne seront bientôt qu'un mauvais souvenir.

Exemple d'usage du sélecteur CSS :has()

Ce que vous apprendrez dans cette formation :

  • les bonnes pratiques pour produire du code propre, maintenable et performant,
  • les fonctionnalités récentes, les unités fluides, les animations et tout ce qui rend CSS agréable aujourd'hui,
  • les techniques du Web Mobile ainsi que les stratégies de contenu (images "retina"),
  • l'optimisation de vos ressources (images, fonts, animations) pour de meilleures performances,
  • et surtout, à laisser tomber toutes vos mauvaises habitudes !

Attention, cette formation n'aborde pas les positionnements CSS modernes. La formation Flexbox et Grid Layout est dédiée aux positionnements CSS modernes et responsive.

Boîtes, conteneurs et empilements

  • Boîtes et box-sizing
  • Notion de Bloc Englobant
  • Notion de Contexte de formatage
  • Notion de Contexte d'empilement (et z-index)

Unités et Sélecteurs CSS modernes

  • rem, le “pixel accessible”
  • les unités de Viewport (vw, vh, vmin, vmax)
  • les tailles intrinsèques (min-content, max-content, fit-content)
  • les sélecteurs historiques (class, id, attributs, descendance, enfance, frères)
  • les sélecteurs modernes (:not, where, :has)
  • les sélecteurs de formulaires : :enabled, :disabled, :valid, :invalid, :checked

Le CSS moderne (CSS4 ?)

  • Les "variables" en CSS : custom properties
  • Réinitialiser une propriété : inherit, initial, unset
  • Positionner en adhérence avec position: sticky
  • Un filtre derrière un élément avec backdrop-filter
  • Le support de fonctionnalités avec @supports
  • Conserver le ratio avec aspect-ratio
  • S'adapter au thème (light / dark) avec prefers-color-scheme
  • Les media queries d'interaction @media (pointer)
  • Trois valeurs à la fois avec clamp()
  • Gérer la spécificité avec @layer()
  • Alléger les imbrications avec display: contents
  • Plein d'autres fonctionnalités CSS utilisables en production aujourd'hui

Produire des CSS maintenables

  • Pourquoi CSS est-il si compliqué à maintenir ?
  • Historique des Méthodologies (BEM, OOCSS, SMACSS, Atomic CSS) et des Frameworks (Bootstrap, Tailwind)
  • La petite dernière : CubeCSS
  • Bonnes pratiques générales : conventions de nommage, performance, réutilisabilité

État des lieux du Web mobile

  • Périphériques, OS, navigateurs, moteurs, langages
  • Le marché mobile et ses statistiques

Un contenu fluide

  • Gérer les débordements de contenus (césures et autres coupures)
  • Gérer les débordements de médias (images, vidéos, flash, etc.)
  • Bonus : points de suspension, cas des liens, cas des éléments préformatés

Les tailles des devices mobiles

  • Des vrais et des faux pixels
  • Taille de fenêtre virtuelle : Viewport
  • Taille d'écran : screen-width
  • Taille déclarée : device-width
  • Le pixel-ratio

Les images responsive

  • "Retina" ?
  • La base : les images fluides
  • Images de décoration (cover, image-set())
  • Images de contenu (srcset, <picture>)

Transformations CSS

  • rotate(), la rotation d'éléments
  • scale(), le zoom / dézoom
  • translate(), la translation
  • skewX(), skewY(), la déformation
  • transform-origin, le point d'origine

Les transitions et animations

  • Propriétés : property, duration, delay, timing-function
  • Accélération
  • Propriétés supportées
  • Animer avec keyframes
  • Éviter les animations trop gourmandes en ressources ?

Optimisation des webfonts

  • anatomie de @font-face
  • .woff, .woff2 et formats compressés
  • Google Fonts
  • font-display pour optimiser l'affichage
  • fontes variables
  • indicateurs de pré-chargement de ressources

Optimisation des images pour le Web

  • vectoriel vs bitmap
  • gif, jpeg et png
  • webp
  • avif
  • jpeg xl
  • <picture> à la rescousse
  • quelle stratégie adopter ?

TP Intégration de maquette

De l'analyse de la maquette graphique à l'intégration HTML/CSS en respectant à la fois : Bonnes Pratiques, Responsive, Mobile First et Dark Mode.

On en profitera pour échanger et expérimenter sur tous les thèmes utiles : artchitecture des fichiers, notions de wireframes / maquettes / UIKit / Styleguide / Design System, les variables CSS, découpage (layout et composants), positionnements Flexbox et Grid Layout, etc.

Préprocesseur Sass

Immersion au sein du préprocesseur le plus courant en CSS : l'utilité, le fonctionnement, les fonctionnalités principales (partiels, variables, imbrications).

Et pour les plus chevronnés, les notions de Sélecteur de parent «&», Fonctions intégrées, Extend, Placeholder, Mixin, Interpolation de variables, Boucles, Conditions, Listes, Maps.

Public

Intégrateurs, développeurs front-end et webdesigners utilisant au quotidien HTML et CSS et souhaitant parfaire leurs compétences et découvrir les secrets et techniques avancées pour un usage en production.

Objectifs

Être capable d'exploiter CSS3 en production dans un projet d'intégration web. Maîtriser toutes les techniques concrètes avancées pour faciliter le quotidien : méthodes de positionnement, sélectionnement, astuces, bonnes pratiques, respecter des conventions, etc. Connaître et utiliser les outils de "workflow" et d'automatisation des tâches.

Prérequis

Avoir suivi une formation telle que "Initiation HTML et CSS" ou être très familier avec les langages HTML et CSS, bien connaître les modes de positionnement classiques CSS (float, position absolute, relative, fixed). Cette formation avancée n'est pas du tout adaptée aux débutants en HTML et CSS

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 physique 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 et bilan des acquis.

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.

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

En soumettant ce formulaire vous acceptez que les informations saisies soient utilisées pour permettre de vous répondre. Votre e-mail ne sera pas mémorisé pour un autre usage. En savoir plus