Maîtriser ce Framework CSS
Tailwind de A à Z.
Tailwind est un framework CSS populaire qui procure un cadre de travail unique afin de créer des sites/apps webs.
L'entièreté du code source est fourni et nous avancerons pas à pas, ensemble.
Le plan du cours va se dérouler comme ceci :
- Découverte, installation
- Les classes utilitaires de base
- Utiliser les fonctionnalités spéciales de Tailwind
- Créer des composants avec Tailwind
- Création d'un Projet "Landing page"
Code source fourni 👌
Comme d'habitude pour mes cours sur les Frameworks CSS, je vous ai préparé un système de bac à sable afin 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'exeption de la création de formations en ligne ou en physique, là c'est non, évidemment.
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du cours
- 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)
- 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)
- 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)
- 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)
Cliquez sur les questions
Foire aux questions.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants