Bienvenue dans ce cours qui a pour but de t'apprendre à maîtriser TailwindCSS ! 🎨
Tailwind est un framework CSS populaire qui procure un cadre de travail unique afin de créer des sites/apps webs.
En effet il possède quelques fonctionnalités inédites dans le monde des Frameworks CSS :
- Un dark mode
- Gérer les animation avec des classes HTML
- Gérer les pseudo-classes en HTML
- Une configuration poussée et facile à mettre en place
- Purger son CSS
- etc ...
Le plan du cours va se dérouler comme ceci :
1. Découverte, installation.
2. Les classes utilitaires de base :
- Gérer les couleurs
- Gérer les espacements
- Gérer les tailles
- Utiliser les positions
- Utiliser Flexbox et CSS Grid
- etc ...
3. Utiliser les fonctionnalités spéciales de Tailwind
- Découverte des effets
- Utilisation des filtres
- Gérer les animations
- Créer des interfaces accessibles
- etc ...
4. Créer des composants avec Tailwind
- Coder une page d'inscription
- Coder une section newsletter
- Coder une page de Ecommerce
- etc ...
5. Création d'un Projet "Landing page" !
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 acheté, vous avez le droit de réutiliser le code comme bon vous semble dans votre carrière pro, à l'exception de la création de formations en ligne ou en physique, là c'est non, évidemment.
Rendez-vous de l'autre côté pour coder tout ça !
Votre instructeur
Développeur web, créateur et entrepreneur.
Cette École est née comme une réponse au manque de contenu Français concernant le Développement Web.
L'écosystème Front-End/Back-End/Full-Stack est devenu une vraie pieuvre tentaculaire et on se retrouve très rapidement submergé de tonnes de Frameworks, librairies et autres langages à devoir maîtriser si l'on veut rester compétitif et à jour.
Ce site a pour vocation de réunir des ressources et de t'apprendre tout ces concepts rapidement et efficacement, afin de te permettre de plonger au plus vite dans le monde professionnel et ce dans les meilleures conditions.
Curriculum du cours
-
VoirExplication du bac à sable (5:51)
-
VoirMarges et remplissage (10:11)
-
VoirGérer la taille des éléments (6:54)
-
VoirLa typographie (6:25)
-
VoirLes couleurs et les effets (8:13)
-
VoirLes bordures et les séparations (3:56)
-
VoirLa disposition (10:16)
-
VoirUtiliser Flexbox (3:48)
-
VoirCSS Grid (6:51)
-
VoirFaire une installation classique (12:25)
-
VoirInstallation avec POSTCSS (9:58)
-
VoirGérer le côté réactif (responsive) (5:18)
-
VoirLa personnalisation, mise en place (4:39)
-
VoirLa personnalisation CSS (11:18)
-
VoirLa personnalisation du fichier tailwind.config (14:07)
-
VoirMise en place des concepts de Tailwind (4:30)
-
VoirLes animations et les transitions (6:16)
-
VoirLe "Dark mode" (5:05)
-
VoirLes "modifiers" (5:07)
-
VoirTentez de coder les composants de votre côté !
-
Voir1. Coder une liste de Blog (16:50)
-
Voir2. Coder une section de contenu (7:50)
-
Voir3. Coder un "Call to Action" (8:52)
-
Voir4. Page Ecommerce (7:45)
-
Voir5. Coder un footer (22:45)
-
Voir6. Section "newsletter" (7:18)
-
Voir7. Coder une section "pricing" (14:21)
-
Voir8. Section "Sign up" (17:15)
-
Voir9. Tableau (7:53)
-
Voir10. Créer une liste d'utilisateurs (10:03)