Formation Maîtrisez Tailwind CSS : Bundle complet
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
6h45
de formation
89
leçons vidéo
5
formations
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Formation Maîtrisez Tailwind CSS : Bundle complet

Promo -31%
4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
6h45
de formation
89
leçons vidéo
5
formations

Cette formation en vidéo sur Tailwind CSS est conçue pour vous aider à devenir un expert en création d'interfaces web modernes et réactives.
Tailwind CSS est l'un des outils les plus populaires pour le développement front-end, permettant de concevoir des sites web esthétiques et performants plus rapidement que jamais.

Au cours de cette formation, vous apprendrez les bases de Tailwind CSS et l'utilisation des classes utilitaires pour la mise en page, la typographie, les couleurs, les marges, etc.
Vous découvrirez également comment personnaliser Tailwind CSS pour s'adapter à vos besoins spécifiques.

Nous aborderons les bonnes pratiques de développement avec Tailwind CSS, en vous montrant comment structurer votre code de manière efficace.

Enfin, vous travaillerez sur des projets concrets pour mettre en pratique vos compétences nouvellement acquises.

Que vous soyez un débutant cherchant à comprendre les bases du développement web ou un développeur expérimenté souhaitant améliorer sa productivité, cette formation vous préparera à maîtriser Tailwind CSS et à créer des interfaces web élégantes et réactives.

Cours dans ce bundle

Tailwind CSS #1/5. Maîtriser le Formatage des Textes Cours 1

Tailwind CSS #1/5. Maîtriser le Formatage des Textes

Tailwind CSS #2/5. Maîtriser le Formatage des Boîtes DIV Cours 2

Tailwind CSS #2/5. Maîtriser le Formatage des Boîtes DIV

Tailwind CSS #3/5. Créer des mises en page responsives avec Grid Cours 3

Tailwind CSS #3/5. Créer des mises en page responsives avec Grid

Tailwind CSS #4/5. Créer des mises en page responsives avec FlexBox Cours 4

Tailwind CSS #4/5. Créer des mises en page responsives avec FlexBox

Tailwind CSS #5/5. Les effets CSS sur les éléments HTML Cours 5

Tailwind CSS #5/5. Les effets CSS sur les éléments HTML

Plan détaillé des cours

 

Chapitre 1 : Découvrir Tailwind CSS

13m50
 
Leçon 1Installer Tailwind CSS
Leçon 2Installer une extension à notre IDE

Chapitre 2 : Formater les textes

31m29
 
Leçon 1Modifier la police
Leçon 2Modifier la taille du texte
Leçon 3Modifier le gras du texte
Leçon 4Mettre un texte en italique
Leçon 5Modifier l'espace entre les lettres
Leçon 6Souligner, barrer du texte
Leçon 7Aligner du texte
Leçon 8Mettre du texte en majuscule

Chapitre 3 : Créer notre documentation

15m13
 
Leçon 1Les 3 premières propriétés liées au texte
Leçon 2Les 3 propriétés suivantes liées au texte
Leçon 3Les 3 dernières propriétés liées au texte

Chapitre 4 : Exercice

15m51
 
Leçon 1Ce que nous allons faire
Leçon 2Correction de l'exercice 1/2
Leçon 3Correction de l'exercice 2/2

Chapitre 5 : Conclusion

01m38
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Formater des boîtes

40m11
 
Leçon 1Donner une couleur de fond à une boîte
Leçon 2Modifier la largeur d'une boîte
Leçon 3Modifier la hauteur d'une boîte
Leçon 4Donner une image de fond à une boîte
Leçon 5Donner un dégradé de couleur à une boîte
Leçon 6Modifier les marges extérieures
Leçon 7Modifier les marges intérieures
Leçon 8Donner une bordure à une boîte
Leçon 9Arrondir les bordures d'une boîte

Chapitre 2 : Créer notre documentation

19m21
 
Leçon 1Les 3 premières propriétés liées aux boîtes
Leçon 2Les 2 propriétés suivantes liées aux boîtes
Leçon 3Les 2 avant-dernières propriétés liées aux boîtes
Leçon 4Les 2 dernières propriétés liées aux boîtes

Chapitre 3 : Exercice

28m27
 
Leçon 1Ce que nous allons faire
Leçon 2Définir une image de fond
Leçon 3Mettre en forme la section
Leçon 4Mettre en forme le formulaire

Chapitre 4 : Pour la prochaine fois

02m15
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Manipuler les conteneurs avec CSS Grid

28m05
 
Leçon 1Créer des colonnes
Leçon 2Manipuler les hauteurs de ligne
Leçon 3Définir une valeur en auto
Leçon 4Créer des gouttières entre les lignes et les colonnes

Chapitre 2 : Créer notre documentation

04m50
 
Leçon 1Les 4 premières propriétés liées à Grid

Chapitre 3 : Les médias queries

10m10
 
Leçon 1Fonctionnement des médias queries
Leçon 2Retour à notre documentation

Chapitre 4 : Manipuler les contenus avec CSS Grid

17m53
 
Leçon 1Les lignes de grilles verticales
Leçon 2Les lignes de grilles horizontales
Leçon 3Le mot clé span
Leçon 4Retour à notre documentation

Chapitre 5 : Exercice d'application

21m22
 
Leçon 1Enoncé de l'exercice
Leçon 2Mise en place des bases
Leçon 3Mise en page pour les grands écrans
Leçon 4Modifier l'ordre d'affichage pour les grands écrans

Chapitre 6 : Pour la prochaine fois

01m37
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Manipuler les conteneurs avec FlexBox

17m22
 
Leçon 1Définir le display Flex
Leçon 2Définir la direction des contenus
Leçon 3Définir le retour à la ligne des contenus
Leçon 4Aligner les contenus sur l'axe principal
Leçon 5Aligner les contenus sur l'axe secondaire

Chapitre 2 : Créer notre documentation

05m33
 
Leçon 1Les 4 premières propriétés liées à Grid

Chapitre 3 : Manipuler les contenus avec FlexBox

17m07
 
Leçon 1Aligner un contenu
Leçon 2Modifier l'ordre d'affichage
Leçon 3Modifier la largeur d'un contenu
Leçon 4Définir la largeur d'un contenu
Leçon 5Retour à notre documentation

Chapitre 4 : Exercice d'application

21m13
 
Leçon 1Ce que nous allons faire
Leçon 2Mise en place des bases
Leçon 3Retour à Grid CSS
Leçon 4Mise en place du responsive

Chapitre 5 : Pour la prochaine fois

01m18
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Les effets

14m33
 
Leçon 1Définir une ombre portée
Leçon 2Définir une opacité
Leçon 3Modifier la mise à l'échelle
Leçon 4Effectuer une rotation

Chapitre 2 : Créer notre documentation

05m53
 
Leçon 1Déclarer les propriétés liées aux effets

Chapitre 3 : Mise en page

18m39
 
Leçon 1La propriété visibility
Leçon 2La position absolute
Leçon 3La position fixed
Leçon 4La position sticky
Leçon 5La propriété float

Chapitre 4 : Créer notre documentation

02m49
 
Leçon 1Déclarer les propriétés liées à la mise en page

Chapitre 5 : Les événements

07m36
 
Leçon 1Modifier le pointeur de la souris
Leçon 2La pseudo classe hover
Leçon 3La pseudo classe focus
Leçon 4Le pseudo élément placeholder

Chapitre 6 : Créer notre documentation

03m03
 
Leçon 1Déclarer les propriétés liées à la mise en page

Chapitre 7 : Exercice d'application

37m01
 
Leçon 1Présentation du job
Leçon 2Ecrire le code HTML
Leçon 3Mettre en place les bases CSS
Leçon 4Mettre en forme la zone Nav
Leçon 5Mettre en forme le formulaire

Chapitre 8 : Conclusion de la formation

01m21
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
5
Commentaires
4,8/5
Note moyenne
5/5
4
4/5
1
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 31/01/2025
Merci Carl, pour votre formation sur Tailwind CSS, j’ai vraiment appréciée ! J’ai trouvé cet outil bien plus facile d’utilisation que Bulma, et surtout, il est largement plus utilisé en entreprise. La flexibilité qu’il offre avec ses classes utilitaires me fait gagner un temps précieux dans le développement. Encore merci pour cette formation claire et efficace ! Validé 100%
Carl Brison
Carl Brison
Merci beaucoup, Alain ;-) Oui vous avez parfaitement raison, Tailwind est le framework à connaître pour être opérationnel en entreprise actuellement.
Sebastien Fluchon
Sebastien Fluchon
Publié le 28/09/2024
Excelente formation trés bien expliquer et toujours baser sur la pratique.
Carl Brison
Carl Brison
Merci beaucoup, c'est très gentil ;-)
Bernard Chabloz
Bernard Chabloz
Publié le 30/07/2024
#1 Très clair et progressif, comme toujours. L'avantage par rapport au css "classique" n'est pas encore évident... mais l'évidence ne saurait tarder, puisque ça a probablement été inventé pour qu'on gagne en simplicité et en efficacité! #2 Ça roule! #3 idem. Sans utiliser 'order': 'start' et 'span' ont suffi... #4 parfait. Possible avec flex seul, mais en effet plus simple avec flex et grid. #5 extra, merci pour ce tuto!
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
84,99€ 59€
Promo -31%
Paiement unique, sans abonnement
Accès à vie à cette formation
6h45 de vidéo
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 754 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1421 tutos gratuits

Notre politique de protection des données