Formation CSS3 techniques de pros !

Exploitez CSS avancés en production au sein d'un projet d'intégration web. Maîtrisez toutes les techniques concrètes récentes et d'automatisation pour faciliter le quotidien.

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 à 7 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.

Propriétés graphiques CSS3

  • border-radius, les coins arrondis
  • box-shadow, ombrage de boîtes
  • text-shadow, ombrage de textes
  • background-size, dimensions d'un arrière-plan
  • arrière-plans multiples
  • linear-gradient(), radial-gradient(), les dégradés de couleurs
  • filter(), les filtres de couleurs
  • Exercices et travaux pratiques

Sélecteurs CSS2 et CSS3 avancés

  • :first-child, les premiers enfants
  • +, le sélecteurs d'adjacence
  • ~, le sélecteurs d'adjacence indirect
  • […], le sélecteur d'attribut
  • [attr^="…"], [attr$="…"], [attr*="…"], les sélecteurs d'attribut avancés
  • :last-child, :last-of-type, les derniers enfants
  • :nth-child(), :nth-last-child()
  • :nth-of-type(), :nth-last-of-type()
  • :only-child, :only-of-type, les enfants uniques
  • :root, :empty, :not(), :target
  • :enabled, :disabled, :valid, :invalid, :checked, les états de formulaires
  • ::before, ::after, le contenu généré en CSS
  • Exercices et travaux pratiques

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
  • Exercices et 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 ?

Évolution du positionnement CSS

  • De <table> à Grid Layout

Flexbox partie 1 : les bases

  • distribution avec flex-direction et flex-wrap
  • ordonnancement avec order
  • alignements et centrages (justify-content, align-items)
  • flexbibilité (flex-grow, flex-shrink, flex-basis)
  • exercices associés

Flexbox partie 2 : la maîtrise

  • les bugs connus des navigateurs
  • être un flex-container et un flex-item
  • quelques valeurs méconnues
  • les priorités dans Flexbox
  • le calcul de flex-grow et flex-basis en détail
  • comportements inattendus décortiqués
  • Flexbox, outil de grille
  • Flexbox, outil de patterns
  • Quiz, exercices et travaux pratiques

Grid Layout

  • Compatibilité et différences avec Flexbox
  • Glossaire : grid container, grid item, grid line, grid track, grid cell, grid area
  • Construction de grilles : initialisation, colonnes, grilles
  • Positionnement dans la grille : classique, par "area", automatique
  • Conception d'un template responsive en Grid Layout
  • Ressources et exercice

Outils et bonnes pratiques

  • bonnes pratiques CSS
  • créer sa propre convention CSS
  • les éditeurs modernes et leurs plugins
  • Les plugins indispensables : CSSlint, emmet, beautify, autoprefixer, csscomb

Méthodologies

  • OOCSS
  • BEM
  • SMACSS, ITCSS, Atomic CSS
  • maintenir ses feuilles de style

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

L'art de l'automatisation

  • minifier, concaténer, autoprefixer, etc.
  • les outils de compilation (logiciels, plugins, ligne de commande, en ligne)
  • encore plus loin, les "task runners" : Bower, Grunt, Gulp, Brunch
  • créer un "workflow", initiation à Gulp
  • Exercices variés : liens évolués, onglets arrondis, infobulles, compteurs en CSS, design fluide, etc.

Exemples de diaporamas de la formation

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

09 54 96 50 50 contact alsacreations point fr

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