Qu'est-ce que je vais apprendre ?

Apprenez le concept d'utility-first et de design system contraint au fondement de Tailwind !
Maîtriser la mise en page flexible et les grilles avec Tailwind
Adapter les sites à tous les écrans, en développant avec le concept mobile-first
Personnaliser textes et polices pour un impact maximal en maîtrisant la gestion de la typographie avec Tailwind
Créer des designs attractifs avec des fonds et styles de bordure
Améliorez l'esthétique de vos pages avec des ombres, de l'opacité et des filtres
Animer les éléments pour une expérience utilisateur dynamique
Apprenez comment réutiliser les styles en créant des composants ou des classes utilitaires minimalistes
Maitriser la personnalisation de tous les aspects du framework Tailwind : ajout de couleurs, de polices, mode sombre etc
Appliquer toutes ces connaissances dans des projets concrets, notamment en utilisant React, Angular et Vue
Chapitre 1 : Introduction à Tailwind
7 leçons
01:15:00
A l'abordage !
Présentation de Tailwind
Installation de l'environnement - Windows
Installation de l'environnement - MacOs
Installation de l'environnement - Ubuntu
Mise en place de l'environnement
Configuration des extensions VS Code
Chapitre 2 : Notions fondamentales de Tailwind
13 leçons
02:19:00
Chapitre 3 : Utilisation des boites flexibles (flexbox)
4 leçons
00:48:00
Chapitre 4 : Projet 1 - Diane
7 leçons
01:09:00
Chapitre 5 : Gestion des états
5 leçons
00:38:00
Chapitre 6 : Utilisation des grilles
6 leçons
01:03:00
Chapitre 7 : Projet 2 - Saasy
5 leçons
01:01:00
Chapitre 8 : Rendre les applications responsives
6 leçons
01:19:00
Chapitre 9 : Effets, filtres et transform
5 leçons
00:30:00
Chapitre 10 : Transitions et animations
4 leçons
00:25:00
Afficher les 15 chapitres

Les prérequis pour suivre cette formation

Les bases en HTML sont nécessaires

La connaissance du CSS est nécessaire

Certains des projets que nous allons coder ensemble

Diane
Sassy
Biarritz
Ponzo

Nous utiliserons uniquement les bases pour notre premier projet. Un site d'une marque de vêtements : Diane. Le projet sera entièrement responsive.

Description

Découvrez l'univers de Tailwind CSS, le framework CSS moderne et efficace qui révolutionne le développement front-end. Cette formation complète vous plonge dans le cœur de Tailwind CSS, réputé pour sa flexibilité et son approche utilitaire. Vous apprendrez à construire des interfaces utilisateur réactives et esthétiques avec une rapidité inégalée et nous utiliserons plusieurs projets.

Tailwind CSS se distingue par sa simplicité d'utilisation et sa capacité à personnaliser entièrement le design sans écrire une ligne de CSS. Fini les noms de classe longs et répétitifs : avec Tailwind, vous composez vos styles avec des classes utilitaires préconçues, rendant votre code plus lisible et facile à maintenir.

La formation met l'accent sur les bonnes pratiques et les techniques avancées, incluant la configuration personnalisée, le responsive design, et l'intégration avec d'autres technologies comme React ou Vue.js. Que vous soyez un développeur débutant ou expérimenté, Tailwind CSS vous offre une nouvelle perspective sur le design web.

Rejoignez notre formation pour maîtriser Tailwind CSS et rejoindre une communauté grandissante de développeurs passionnés. Avec sa popularité croissante, Tailwind CSS est non seulement un atout pour vos projets actuels, mais aussi un excellent investissement pour votre avenir professionnel dans le développement Web !


En savoir plus

Également inclus dans la formation

Extensions VSCODE

Extensions VSCODE

Tailwind possède un écosystème d'extensions riche sur VSCode qui permet de simplifier la gestion des classes avec le tri automatique et l'aperçu du contenu des classes.
Lire plus

Déploiement

Déploiement

Nous verrons comment utiliser Tailwind avec les principaux frameworks JavaScript : React, Angular, Vue.
Lire plus

Netlify

Netlify

Nous mettrons en ligne une page HTML avec son design Tailwind sur Netlify pour que vous puissiez partager vos projets.
Lire plus