Syllabus détaillé

TAILWINDCSS

Fini les styles imposés et les classes rigides. Avec Tailwind CSS, apprenez à construire des interfaces uniques directement dans votre HTML. Maîtrisez l'art de composer vos propres designs pixel par pixel, sans jamais quitter votre éditeur, pour des résultats sur mesure qui ne ressemblent à aucun autre site.

Leçon 01

Philosophie Tailwind & Installation

1h 0min

Pourquoi le CSS utilitaire ? Configuration de Tailwind dans un projet Laravel avec Vite. Comprendre le processus de compilation "Just-in-Time" (JIT).

Module certifié M-IT
Leçon 02

Mise en page : Le Modèle de Boîte (Box Model)

1h 30min

Maîtrise des marges (m-), paddings (p-), bordures et dimensions (w-, h-). Utilisation des unités arbitraires w-[350px].

Module certifié M-IT
Leçon 03

Typographie & Couleurs

1h 0min

Gestion des polices, tailles de texte, graisses et interlignages. Exploration de la palette de couleurs étendue et opacité.

Module certifié M-IT
Leçon 04

Flexbox de A à Z

1h 30min

Construire des structures flexibles : flex-row, justify-between, items-center et gestion du gap.

Module certifié M-IT
Leçon 05

Responsive Design : Mobile-First

2h 0min

Utilisation des variantes de breakpoints (sm:, md:, lg:, xl:). Créer des interfaces qui s'adaptent parfaitement du smartphone à l'écran large.

Module certifié M-IT
Leçon 06

États Interactifs : Hover, Focus & Active

1h 0min

Ajouter de la vie à vos composants. Styliser les boutons au survol, les champs de formulaire au focus et gérer les états group-hover.

Module certifié M-IT
Leçon 07

Grilles CSS (Grid Layout)

1h 30min

Créer des layouts complexes avec grid-cols. Maîtrise du col-span et des grilles responsives.

Module certifié M-IT
Leçon 08

Positionnement & Z-Index

1h 0min

Gestion du relative, absolute, fixed et sticky. Maîtriser l'empilement des éléments sur l'axe Z.

Module certifié M-IT
Leçon 09

Configuration du tailwind.config.js

1h 30min

Étendre la palette de couleurs, ajouter ses propres polices et définir des espacements personnalisés pour correspondre à une charte graphique.

Module certifié M-IT
Leçon 10

Composants Réutilisables & @apply

1h 0min

Quand et comment extraire des classes répétitives dans vos fichiers CSS via la directive @apply. Stratégies pour garder un code propre.

Module certifié M-IT
Leçon 11

Formulaires & Plugins Officiels

1h 30min

Utilisation du plugin @tailwindcss/forms (présent dans votre projet) pour styliser facilement les inputs, checkboxes et selects.

Module certifié M-IT
Leçon 12

Animations & Transitions

1h 0min

Ajouter des transitions fluides (transition-all) et des animations natives comme animate-spin, animate-pulse ou animate-bounce.

Module certifié M-IT
Leçon 13

Dark Mode : Implémentation complète

1h 30min

Utiliser la variante dark: pour créer une interface sombre élégante. Basculement automatique via les préférences système ou manuel via JS.

Module certifié M-IT
Leçon 14

Filtres, Effets & Modes de Fusion

1h 0min

Utilisation de blur, drop-shadow, grayscale et des modes de fusion pour des effets visuels avancés directement en HTML.

Module certifié M-IT
Leçon 15

Optimisation pour la Production

1h 0min

Comprendre comment PurgeCSS élimine les classes inutilisées pour réduire votre fichier CSS de plusieurs Mo à quelques Ko.

Module certifié M-IT
Leçon 16

Atelier Pratique : Refactoring d'une page Blade

2h 0min

Prendre une section existante (comme votre section "Thoughts") et la reconstruire entièrement avec Tailwind pour une flexibilité maximale.

Module certifié M-IT

S'inscrire maintenant

Accédez instantanément à nos cours pratiques et propulsez votre carrière au niveau supérieur

S'inscrire