Formation CSS3 techniques de pros !

Maîtrisez toutes les techniques CSS modernes pour faciliter vos intégrations. Bonnes pratiques et méthodologie sont au programme!

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 (ce que l'on appelle - à tort -  "CSS3" ou "CSS4"), sans vous perdre dans les méandres des nombreuses spécifications. Vos mauvaises pratiques CSS ne seront bientôt qu'un mauvais souvenir.

Exercice Grid Layout

Ce que vous apprendrez dans cette formation :

  • les bonnes pratiques pour produire du code propre, maintenable et performant,
  • les variables, les unités fluides, les animations et tout ce qui rend CSS3 agréable aujourd'hui,
  • les techniques de Responsive Webdesign ainsi que les stratégies de contenu (images "retina"),
  • les préprocesseurs CSS (Sass) pour automatiser les tâches répétitives,
  • et surtout, à laisser tomber toutes vos mauvaises habitudes !

Plongez dès maintenant dans ce programme de trois journées riches de cas pratiques et d'exercices concrets !
Attention, cette formation n'explore pas les positionnements CSS. La formation Flexbox et Grid Layout est dédiée aux positionnements CSS modernes et fluides.

Unités, valeurs et fonctions

  • Unités em et rem
  • Unités de Viewport : vw, vh, vmin et vmax
  • La valeur-fonction calc()
  • La propriété box-sizing

Sélecteurs CSS modernes

  • :first-child, les premiers enfants
  • + et ~, les sélecteurs d'adjacence
  • [attr^="…"], [attr$="…"], [attr*="…"], les sélecteurs d'attribut avancés
  • Les sélecteurs d'enfants : :nth-child(), :last-child, :nth-of-type(), :only-child, etc.
  • :root, :empty, :not()>
  • :enabled, :disabled, :valid, :invalid, :checked, les états de formulaires

Transformations CSS

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

Le CSS de demain (CSS4 ?)

  • Les "variables" en CSS : custom properties
  • Positionner en adhérence avec position: sticky
  • Le contour de texte avec text-stroke
  • Le support de fonctionnalités avec @supports
  • Cibler un parent avec :focus-within
  • Ce que le CSS du futur nous réserve et comment le mettre en oeuvre

Produire des CSS maintenables

  • Méthodologies : BEM, OOCSS, SMACSS, Atomic CSS
  • Outils : StyleLint, CSS comb, Editorconfig, Autoprefixer
  • 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
  • Des composants fluides

Un design Responsive

  • Les Media Queries en CSS
  • Les critères pour mobiles (width, height, device-width, device-pixel-ratio, orientation, etc.)
  • Le cumul de critères ("et", "ou", "non")
  • Prise en compte de l'orientation
  • Mobile First : pourquoi les petits écrans en priorité ?
  • La meta HTML "viewport"
  • Comment choisir ses breakpoints

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>)
  • Tester la connectivité et la bande passante

Travaux Pratiques de groupe

Réalisation d'une navigation responsive au "touch", animée, avec contraintes de performances, d'accessibilité, de sémantique.

Sass et les préprocesseurs

  • introduction aux Préprocesseurs (LESS, Sass, Stylus)
  • les outils de compilation Sass
  • les variables (locales, globales)
  • la notation imbriquée
  • les opérations et fonctions simples
  • les fonctions personnalisées (mixin, extend, placeholder)
  • les boucles et conditions
  • Travaux Pratiques

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 ?

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

Exploiter CSS3 en production au sein d'un projet d'intégration web. Maîtriser toutes les techniques concrètes avancées pour faciliter le quotidien : astuces, bonnes pratiques, conventions, méthodes de positionnement, sélectionnement, etc. et découvrir 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

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.

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

En soumettant ce formulaire j’accepte que les informations saisies soient utilisées pour permettre de me recontacter. En savoir plus