Bienvenue dans ce cours 100% en ligne, pour apprendre à maîtriser TailwindCSS !
TailwindCSS est un framework CSS populaire, qui procure un cadre de travail unique pour créer des sites webs.
En effet, il possède quelques fonctionnalités inédites :
- Un dark mode,
- Gérer les animations avec des classes HTML,
- Gérer les pseudo-classes en HTML,
- Configurer son code à volonté,
- Purger son CSS,
- etc ...
En plus de cela, il propose des classes utilitaires, parfaites pour coder un site rapidement, directement depuis notre HTML.
Il est également utilisé avec tous les Frameworks JS, car il permet de produire rapidement le côté front-end d'une web app.
Au programme de cette formation TaildwindCSS de A à Z
Comme d'habitude, pour mes cours sur les Frameworks CSS, je vous ai préparé un système de bac à sable pour qu'on puisse découvrir ensemble toutes les fonctionnalités de TailwindCSS.
Une fois les fonctionnalités fondamentales acquises, nous passerons sur la réalisation d'un exercice pratique : nous ferons un site complet de A à Z.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur Tailwind.
Rendez-vous de l'autre côté pour coder tout ça !
Table des matières de cette formation CSS (durée : 5h40m)
-
Introducton au cours Tailwind Version 3
- Introduction 00:03:58
- Conseils et code source 00:03:01
-
Bac à sable, découverte de Tailwind
- Explication du bac à sable 00:05:51
- Marges et remplissage 00:10:11
- Gérer la taille des éléments 00:06:54
- La typographie 00:06:25
- Les couleurs et les effets 00:08:13
- Les bordures et les séparations 00:03:56
- La disposition 00:10:17
- Utiliser Flexbox 00:03:48
- CSS Grid 00:06:51
- Faire une installation classique 00:12:26
- Installation avec POSTCSS 00:09:58
- Gérer le côté réactif (responsive) 00:05:19
- La personnalisation, mise en place 00:04:40
- La personnalisation CSS 00:11:19
- La personnalisation du fichier tailwind.config 00:14:08
- Mise en place des concepts de Tailwind 00:04:30
- Les animations et les transitions 00:06:16
- Le "Dark mode" 00:05:05
- Les "modifiers" 00:05:08
-
Coder des composants
- 1. Coder une liste de Blog 00:16:51
- 2. Coder une section de contenu 00:07:51
- 3. Coder un "Call to Action" 00:08:52
- 4. Page Ecommerce 00:07:46
- 5. Coder un footer 00:22:46
- 6. Section "newsletter" 00:07:19
- 7. Coder une section "pricing" 00:14:21
- 8. Section "Sign up" 00:17:16
- 9. Tableau 00:07:54
- 10. Créer une liste d'utilisateurs 00:10:04
-
Coder une landing page
- Installation de la "Landing page" 00:05:31
- 4-0-navbar.mp4 00:19:43
- Coder la page d'accueil 00:12:53
- La section "appel à l'action" 00:09:58
- Coder un bandeau d'informations 00:04:54
- Section "Preuve sociale" 00:05:43
- Le formulaire 00:07:26
- Le footer 00:05:03
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Excellent tuto, les explications sont très claires et la partie bac-à-sable théorique est très bien conçue. On voit qu'il y a beaucoup de travail de préparation en amont. Merci beaucoup Enzo pour cette formation sur Taildwind CSS qui ne cesse de prendre de l'ampleur.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissé