Lecture automatique
Autocomplete
Session précédente
Terminez et continuez
TailwindCSS de A à Z
[v4] Introduction cours Tailwind
Introduction (4:03)
Code source (3:29)
[v4] Apprendre à installer Tailwind
Utiliser Tailwind facilement avec le "play CDN" partie 1 (7:08)
Utiliser Tailwind facilement avec le "play CDN" partie 2 (3:59)
Comprendre la page d'installation Tailwind (5:02)
Installation classique partie 1 (6:27)
Installation classique partie 2 (7:56)
[v4] Découverte et utilisation des classe utilitaires Tailwind
Gérer les espacement (6:59)
Appliquer des dimensions (6:17)
Intégration d'un "Design System" VS "Designing in the browser" (4:49)
La typographie (7:56)
Couleurs et fonds (6:09)
Bordures et effets de bordure (3:42)
La disposition partie 1 (6:24)
La disposition partie 2 (5:07)
Utiliser Flexbox avec Tailwind (6:00)
Utiliser CSS Grid avec Tailwind (9:09)
La personnalisation partie 1 (7:18)
La personnalisation partie 2 (6:38)
Utiliser les "layers" (6:51)
Les variants partie 1 (7:51)
Les variants partie 2 (4:48)
Gérer le "responsive" partie 1 (4:43)
Gérer le "responsive" partie 2 (4:49)
Animations et transitions (7:00)
Ajouter un mode sombre ("dark mode") partie 1 (8:28)
Ajouter un mode sombre ("dark mode") partie 2 (7:42)
Ajouter un mode sombre ("dark mode") partie 3 (5:09)
Créer des fichiers CSS séparés (11:11)
[v4] Exercices d'intégration
Introduction exercice 1 : Section "call to action" (1:34)
Résolution exercice 1 : Section "call to action" (8:56)
Introduction exercice 2 : Section "newsletter" (0:35)
Résolution exercice 2 : Section "newsletter" (10:40)
Introduction exercice 3 : Composant carte (0:38)
Résolution exercice 3 : Composant carte (9:31)
Introduction exercice 4 : Liste d'articles de blog (0:29)
Résolution exercice 4 : Liste d'articles de blog (10:52)
Résolution exercice 4 : Liste d'articles de blog partie 2 (4:27)
Introduction exercice 5 : Coder un tableau (0:23)
Résolution exercice 5 : Coder un tableau (10:21)
Introduction exercice 6 : Liste e-commerce (0:26)
Résolution exercice 6 : Liste e-commerce (13:15)
[v3] Introducton au cours Tailwind Version 3
Introduction (3:57)
Conseils et code source (3:00)
Astuce pour suivre le cours
[v3] Bac à sable, découverte de Tailwind
Explication du bac à sable (5:51)
Marges et remplissage (10:11)
Gérer la taille des éléments (6:54)
La typographie (6:25)
Les couleurs et les effets (8:13)
Les bordures et les séparations (3:56)
La disposition (10:16)
Utiliser Flexbox (3:48)
CSS Grid (6:51)
Faire une installation classique (12:25)
Installation avec POSTCSS (9:58)
Gérer le côté réactif (responsive) (5:18)
La personnalisation, mise en place (4:39)
La personnalisation CSS (11:18)
La personnalisation du fichier tailwind.config (14:07)
Mise en place des concepts de Tailwind (4:30)
Les animations et les transitions (6:16)
Le "Dark mode" (5:05)
Les "modifiers" (5:07)
[v3] Coder des composants
Tentez de coder les composants de votre côté !
1. Coder une liste de Blog (16:50)
2. Coder une section de contenu (7:50)
3. Coder un "Call to Action" (8:52)
4. Page Ecommerce (7:45)
5. Coder un footer (22:45)
6. Section "newsletter" (7:18)
7. Coder une section "pricing" (14:21)
8. Section "Sign up" (17:15)
9. Tableau (7:53)
10. Créer une liste d'utilisateurs (10:03)
[v3] Coder une landing page
Tentez également de coder cette landing page en premier.
Installation de la "Landing page" (5:31)
Coder une navbar réactive avec TailwindCSS (19:42)
Coder la page d'accueil (12:53)
La section "appel à l'action" (9:58)
Coder un bandeau d'informations (4:53)
Section "Preuve sociale" (5:43)
Le formulaire (7:26)
Le footer (5:02)
[Version 2] [Ancien cours] Introduction
Introduction (2:46)
Astuce pour suivre le cours (0:58)
[Version 2] Découverte de Tailwind
Mise en place du bac à sable (2:47)
Création du CSS (11:23)
Les classes liées à la marge et au padding (7:47)
Gérer width & height (7:56)
La typographie (4:02)
Les classes utilitaires de typographie (8:54)
Gérer le background (4:50)
Les bordures (6:56)
La disposition (9:21)
Flexbox (5:37)
CSS Grid (5:22)
Le responsive avec Tailwind (4:04)
La personnalisation partie 1 (8:51)
La personnalisation partie 2 (7:47)
Le Dark mode (4:22)
Les variants (3:48)
La purge (4:53)
Les transitions et animations (4:49)
[Version 2] Création du site
Mise en place (7:51)
Navbar (11:55)
Partie Accueil (9:29)
Section Call to action (12:53)
Séparation bleue (5:47)
Section tarifs (9:45)
Section preuve sociale (4:55)
Formulaire (9:02)
Footer (3:35)
Navigation responsive (11:06)
Résolution exercice 2 : Section "newsletter"
Contenu de la session verrouillé
Si vous êtes déjà inscrit,
vous aurez besoin de vous connecter
.
Achetez le cours pour déverrouiller