Formation CSS3 techniques de pros !
Maîtrisez toutes les techniques CSS modernes pour faciliter vos intégrations.
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 de CSS3 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.
Ce que vous apprendrez dans cette formation :
- à maîtriser les modèles de positionnement CSS3 modernes tels que Flexbox et Grid Layout,
- 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 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 !
Les indispensables CSS3
- Unités
emetrem - Unités de Viewport :
vw,vh,vminetvmax - La valeur-fonction
calc() - La propriété
box-sizing
Propriétés graphiques CSS3
border-radius, les coins arrondisbox-shadow, ombrage de boîtestext-shadow, ombrage de textesbackground-size, dimensions d'un arrière-plan- arrière-plans multiples
linear-gradient(),radial-gradient(), les dégradés 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- Les sélecteurs d'enfants :
:nth-child(),:last-child,:nth-of-type(),:only-child, etc. :root,:empty,:not(),:target:enabled,:disabled,:valid,:invalid,:checked, les états de formulaires- Exercices et travaux pratiques
Transformations CSS
rotate(), la rotation d'élémentsscale(), le zoom / dézoomtranslate(), la translationskewX(),skewY(), la déformationmatrix(), la combinaison de transformationstransform-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 ?
Les dernières nouveautés
- Les variables CSS3 (custom properties)
- Adhérer au scroll avec
position: sticky - Contour de police avec
text-stroke - Détecter le support navigateur avec
@supports() - Exercices et travaux pratiques
Évolution du positionnement CSS
- De
<table>à Grid Layout
Flexbox partie 1 : les bases
- distribution avec
flex-directionetflex-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
flex-grow,flex-shrinketflex-basisen détail- comportements inattendus décortiqués
- 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
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
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
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.
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 ?
Nous contacter
Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr
Alsacréations10 Place du Temple Neuf
67000 Strasbourg, France