Formation Tailwind CSS : Faire du CSS n'a jamais été aussi simple

Le CSS vous fatigue ? Le responsive vous semble dur ? Vous n'arrivez pas à faire du mobile-first CSS ? Grâce à Tailwind CSS, créez de belles interfaces facilement & rapidement. Formation à Paris.


Description de la formation

Le CSS peut parfois être long et complexe à faire, surtout quand on n'est pas intégrateur web ou développeur front-end à la base.

Malgré que le CSS ne soit pas un langage de programmation, il y a beaucoup de notions qui rentrent en jeu en faisant du CSS et du HTML : cross-browsing, reponsive, mobile-first, accessibilité et j'en passe.

Tout ça, c'est fini !

Bienvenu au utility-first CSS avec Tailwind CSS.

Tailwind CSS change complètement la façon dont on fait du CSS. Il permet de générer tout un tas de classes CSS utilitaires, qui permettent de "designer" sa page beaucoup plus vite et simplement qu'avec un framework CSS classique.

Le plus beau dans tout ça, c'est que Tailwind CSS s'intègre très bien avec le JavaScript et d'autres outils modernes.

Dans cette formation, nous vous montrerons en profondeur ce qu'est-ce Tailwind CSS, comment et surtout quand l'utiliser, et quelles sont ses limites.

Bien sûr, il y a plein d'autres frameworks CSS permettant de se faciliter la vie, comme Bootstrap, Foundation CSS, Bulma CSS, Skeleton CSS, Materialize CSS, Semantic UI, Material UI, UI kit et la liste est encore longue.

Tous ces frameworks CSS viennent avec des composants tout prêts à être utilisés, mais sont parfois très durs à personnaliser.

Avec ces frameworks, on se retrouve souvent à devoir écraser / overrider les styles par défaut pour obtenir un site web ou une application web qui ressemble à ce que l'on veut.

Ce ne sera pas le cas avec Tailwind CSS, il est facilement personnalisable !

Découvrez la suite en participant à notre formation sur Paris.


Objectifs pédagogiques

- Comprendre ce qu’est le utility-first CSS - Comprendre ce qu’est-ce un Tailwind CSS - Savoir créer des interfaces avec Tailwind CSS

Public visé

- Intégrateur web / designer - Développeur informatique - Lead technique / CTO - Manager technique

Prérequis de la formation

- Connaissances du HTML et CSS - Bases de JavaScript

Programme de la formation (personnalisable)

Introduction

  • Qu’est-ce qu’un framework CSS et pourquoi il y en a ?
  • Quel est le souci avec les frameworks CSS actuels ?
  • Qu'est-ce que le utility-fisrt css ?
  • Qu'est-ce que Tailwind CSS ?

Construire et designer une page web avec Tailwind CSS

  • Installation de Tailwind CSS
  • Configuration et personnalisation de Tailwind CSS
  • TD : Créer son premier composant HTML / CSS
  • Comment gérer les pseudo-classes hover, focus et active ?
  • Comment faire du responsive avec Tailwind CSS ?
  • Extraire ses classes utilitaires en composants
  • Ajouter ses propres classes utilitaires
  • TP : refaire la page d'accueil de Airbnb

 

Utiliser Tailwind avec d'autres outils

  • Comment utiliser Tailwind avec SASS ?
  • Comment utiliser Tailwind avec Less ?
  • Comment optimiser les performances de son CSS avec PurgeCSS ?
  • Peut-on utiliser Tailwind CSS à partir du CDN ou sans utiliser Webpack ?