Tailwind CSS #3/5. Créer des mises en page responsives avec Grid
Tailwind CSS #3/5. Créer des mises en page responsives avec Grid
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 !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introducton au cours Tailwind Version 3
Introducton au cours Tailwind Version 3
Chapitre 2
Bac à sable, découverte de Tailwind
Bac à sable, découverte de Tailwind
Chapitre 3
Coder des composants
Coder des composants
Chapitre 4
Coder une landing page
Coder une landing page
Chapitre 5
Introduction Tailwind
Introduction Tailwind
Plan détaillé du cours
Chapitre 1 : Introducton au cours Tailwind Version 3
06m59
Leçon 1Introduction
Leçon 2Conseils et code source
Chapitre 2 : Bac à sable, découverte de Tailwind
2h21
Leçon 1Explication du bac à sable
Leçon 2Marges et remplissage
Leçon 3Gérer la taille des éléments
Leçon 4La typographie
Leçon 5Les couleurs et les effets
Leçon 6Les bordures et les séparations
Leçon 7La disposition
Leçon 8Utiliser Flexbox
Leçon 9CSS Grid
Leçon 10Faire une installation classique
Leçon 11Installation avec POSTCSS
Leçon 12Gérer le côté réactif (responsive)
Leçon 13La personnalisation, mise en place
Leçon 14La personnalisation CSS
Leçon 15La personnalisation du fichier tailwind.config
Leçon 16Mise en place des concepts de Tailwind
Leçon 17Les animations et les transitions
Leçon 18Le "Dark mode"
Leçon 19Les "modifiers"
Chapitre 3 : Coder des composants
2h01
Leçon 11. Coder une liste de Blog
Leçon 22. Coder une section de contenu
Leçon 33. Coder un "Call to Action"
Leçon 44. Page Ecommerce
Leçon 55. Coder un footer
Leçon 66. Section "newsletter"
Leçon 77. Coder une section "pricing"
Leçon 88. Section "Sign up"
Leçon 99. Tableau
Leçon 1010. Créer une liste d'utilisateurs
Chapitre 4 : Coder une landing page
1h11
Leçon 1Installation de la "Landing page"
Leçon 24-0-navbar.mp4
Leçon 3Coder la page d'accueil
Leçon 4La section "appel à l'action"
Leçon 5Coder un bandeau d'informations
Leçon 6Section "Preuve sociale"
Leçon 7Le formulaire
Leçon 8Le footer
Chapitre 5 : Introduction Tailwind
6h53
Leçon 1
Leçon 2
Leçon 3
Leçon 4
Leçon 5
Leçon 6
Leçon 7
Leçon 8
Leçon 9
Leçon 10
Leçon 11
Leçon 12
Leçon 13
Leçon 14
Leçon 15
Leçon 16
Leçon 17
Leçon 18
Leçon 19
Leçon 20
Leçon 21
Leçon 22
Leçon 23
Leçon 24
Leçon 25
Leçon 26
Leçon 27
Leçon 28
Leçon 29
Leçon 30
Leçon 31
Leçon 32
Leçon 33
Leçon 34
Leçon 35
Leçon 36
Leçon 37
Leçon 38
Leçon 39
Leçon 40
Leçon 41
Leçon 42
Leçon 43
Leçon 44
Leçon 45
Leçon 46
Leçon 47
Leçon 48
Leçon 49
Leçon 50
Leçon 51
Leçon 52
Leçon 53
Leçon 54
Leçon 55
Leçon 56
Leçon 57
Leçon 58
Leçon 59
Leçon 60
Leçon 61
Leçon 62
Leçon 63
Leçon 64
Leçon 65
Leçon 66
Leçon 67
Leçon 68
Avis des apprenants