4.7/5 Trustpilot (1395 avis)
Coder un portfolio avec Tailwind
Coder un portfolio avec Tailwind
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
[v4] Introduction cours Tailwind
[v4] Introduction cours Tailwind
Chapitre 2
[v4] Apprendre à installer Tailwind
[v4] Apprendre à installer Tailwind
Chapitre 3
[v4] Découverte et utilisation des classe utilitaires Tailwind
[v4] Découverte et utilisation des classe utilitaires Tailwind
Chapitre 4
[v4] Exercices d'intégration
[v4] Exercices d'intégration
Chapitre 5
[v4] Projet final : Landing page SEOTOOL
[v4] Projet final : Landing page SEOTOOL
Chapitre 6
[v3] Introducton au cours Tailwind Version 3
[v3] Introducton au cours Tailwind Version 3
Chapitre 7
[v3] Bac à sable, découverte de Tailwind
[v3] Bac à sable, découverte de Tailwind
Table des matières
Chapitre 1 : [v4] Introduction cours Tailwind
07m33
Leçon 1Introduction
Leçon 2Code source
Chapitre 2 : [v4] Apprendre à installer Tailwind
30m34
Leçon 1Utiliser Tailwind facilement avec le "play CDN" partie 1
Leçon 2Utiliser Tailwind facilement avec le "play CDN" partie 2
Leçon 3Comprendre la page d'installation Tailwind
Leçon 4Installation classique partie 1
Leçon 5Installation classique partie 2
Chapitre 3 : [v4] Découverte et utilisation des classe utilitaires Tailwind
2h25
Leçon 1Gérer les espacement
Leçon 2Appliquer des dimensions
Leçon 3Intégration d'un "Design System" VS "Designing in the browser"
Leçon 4La typographie
Leçon 5Couleurs et fonds
Leçon 6Bordures et effets de bordure
Leçon 7La disposition partie 1
Leçon 8La disposition partie 2
Leçon 9Utiliser Flexbox avec Tailwind
Leçon 10Utiliser CSS Grid avec Tailwind
Leçon 11La personnalisation partie 1
Leçon 12La personnalisation partie 2
Leçon 13Utiliser les "layers"
Leçon 14Les variants partie 1
Leçon 15Les variants partie 2
Leçon 16Gérer le "responsive" partie 1
Leçon 17Gérer le "responsive" partie 2
Leçon 18Animations et transitions
Leçon 19Ajouter un mode sombre ("dark mode") partie 1
Leçon 20Ajouter un mode sombre ("dark mode") partie 2
Leçon 21Ajouter un mode sombre ("dark mode") partie 3
Leçon 22Créer des fichiers CSS séparés
Chapitre 4 : [v4] Exercices d'intégration
2h28
Leçon 1Introduction exercice 1 : Section "call to action"
Leçon 2Résolution exercice 1 : Section "call to action"
Leçon 3Introduction exercice 2 : Section "newsletter"
Leçon 4Résolution exercice 2 : Section "newsletter"
Leçon 5Introduction exercice 3 : Composant carte
Leçon 6Résolution exercice 3 : Composant carte
Leçon 7Introduction exercice 4 : Liste d'articles de blog
Leçon 8Résolution exercice 4 : Liste d'articles de blog
Leçon 9Résolution exercice 4 : Liste d'articles de blog partie 2
Leçon 10Introduction exercice 5 : Coder un tableau
Leçon 11Résolution exercice 5 : Coder un tableau
Leçon 12Introduction exercice 6 : Liste e-commerce
Leçon 13Résolution exercice 6 : Liste e-commerce
Leçon 14Introduction exercice 7 : Liste utilisateurs
Leçon 15Exercice 7 : Liste utilisateurs partie 1
Leçon 16Exercice 7 : Liste utilisateurs partie 2
Leçon 17Exercice 8 : Section pricing introduction
Leçon 18Résolution exercice 8 : Section pricing
Leçon 19Introduction exercice 9 : Page d'inscription
Leçon 20Résolution exercice 9 : Page d'inscription - partie 1
Leçon 21Résolution exercice 9 : Page d'inscription - partie 2
Leçon 22Introduction exercice 10 : Footer
Leçon 23Résolution exercice 10 : Footer - Partie 1
Leçon 24Résolution exercice 10 : Footer - Partie 2
Leçon 25Résolution exercice 10 : Footer - Partie 3
Chapitre 5 : [v4] Projet final : Landing page SEOTOOL
1h22
Leçon 1Introduction au projet
Leçon 2Mise en place Tailwind
Leçon 3Création de la navbar responsive partie 1
Leçon 4Gérer un potentiel problème de layering
Leçon 5Création de la navbar responsive partie 2
Leçon 6Création de la navbar responsive partie 3
Leçon 7Coder le header partie 1
Leçon 8Coder le header partie 2
Leçon 9Coder la première section texte + image
Leçon 10Coder la section de séparation bleue
Leçon 11Coder la section Tarifs
Leçon 12Coder la section "ils nous font confiance"
Leçon 13Coder la section de contact
Leçon 14Coder le footer
Chapitre 6 : [v3] Introducton au cours Tailwind Version 3
06m59
Leçon 1Introduction
Leçon 2Conseils et code source
Chapitre 7 : [v3] 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 8 : [v3] 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 9 : [v3] 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
Avis des apprenants