Formation CSS avancé

Description

CSS est un langage simple et rapide à prendre en main. Cependant, il regorge de particularités souvent méconnues et sous-estimées par les développeurs.

Dans cette formation CSS Avancé, nous reviendrons sur ces principes afin de démystifier le fonctionnement de ce langage. Nous irons encore plus loin en nous intéressant également aux différentes techniques modernes et frameworks qui peuvent vous aider à mieux travailler au quotidien et à maintenir une base de code CSS dans la durée.

A l’issue de cette formation CSS Avancé, vous repartirez avec le code source de votre projet, construit ensemble au fil des exercices.

🇺🇸 Cette formation est aussi disponible en anglais

Les objectifs

• Comprendre les subtilités du langage CSS
• Savoir utiliser les outils de développement CSS dans un navigateur et un IDE
• Rendre son code CSS maintenable et évolutif
• Découvrir les dernières évolutions de la norme
• Optimiser les performances de son code CSS

Pré-requis

• Bases des langages CSS et HTML
• Expérience minimum en développement web
• Notions de GIT
• Ordinateur portable à apporter

Le programme de la formation CSS avancé

Jour 1 : prise en main

• Mise en place du projet Git
• Le langage CSS, standard et évolution
• Prise en main des DevTools Chrome

Reprise de concepts clés

• Notions de cascade, spécificité et héritage
• Le modèle de boite
• Marges et Flux
• Sélecteurs CSS avancés

Mises en pratique : Selection précise et héritage

Positionnement et mise en page

• Comprendre le positionnement
• Couches et stacking

Mises en pratique: Intégration avec des positionnements relatifs et absolus.

• Flexbox

Mises en pratique: Intégration avec flexbox.

• CSS Grid

Jour 2 : maintenabilité et performances

Maintenabilité du CSS

• Resets
• Media queries
• Unités relatives.

Mises en partique: Décliner un composant en variations de tailles avec les unités relatives.

• Architecture CSS et conventions de nommage
• CSS Encapsulé
• CSS Utilitaire et TailwindCSS

Mises en pratique: Refactoring avec TailwindCSS.

Performances CSS

• Critical CSS
• Outils d'analyse du CSS

Mises en pratique: Débug de performances layout shift sur une animation CSS

• Écrire du CSS performant

Autour du CSS

• Présentation des principaux pré-processeurs : SASS, LESS, Stylus
• Utilisation de post-processeurs
• Optimisation et traitements des fichiers CSS
• Automatisation avec les outils de build : Webpack, Vite, Gulp...
• Frameworks CSS : Bootstrap, Foundation, etc.

A l’issue de cette formation CSS Avancé, vous repartirez avec le code source de votre projet, construit ensemble au fil des exercices.

Télécharger le programme

Formations associées

• 

  React Avancé

  3 jours
• 

  Next.js

  3 jours
• 

  Vue.js

  3 jours

Formateur

Romain PETIT

Romain est consultant indépendant sur des technologies web front-end depuis 2012.
Il utilise le framework JavaScript Vue.JS et Nuxt au quotidien pour développer des applications. Il croit en un web accessible, et défend la JAMstack.

Romain donne des formations depuis 6 ans pour différentes structures: Le Campus Numérique in The Alps sur des formations innovantes, avec l'Université de Grenoble Alpes et Oxiane.

Il monté le collectif d'indépendants et espace de travail Le Médiastère au centre ville de Grenoble, son camp de base.
Depuis 2020, il a rejoint l'équipe de BackMarket.

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 2224 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 104 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux