Historique des conversations
Chargement...
Chapitre 8 : Hover/Focus
1. Interactivité facile
Tailwind permet d'ajouter des styles uniquement lors de certaines interactions utilisateur.
2. Exemples classiques
Survol (Hover)
<button class="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded">
Survolez-moi
</button>Focus (Saisie formulaire)
<input class="border focus:border-blue-500 focus:outline-none">Clic (Active)
<button class="active:scale-95">Effet de pression</button>3. Grouper les animations
Pour rendre ces transitions plus douces :
<button class="transition duration-300 hover:scale-105">...</button>Conclusion
Votre site commence à se sentir "vivant". Dans le prochain chapitre : Configuration (tailwind.config.js).
Objectifs du chapitre
- Comprendre les concepts clés de États : Hover, Focus, Active.
- Savoir appliquer ces concepts sur un cas concret.
- Éviter les erreurs fréquentes et adopter les bonnes pratiques.
Explication
Ce chapitre vous guide pas à pas sur le thème États : Hover, Focus, Active. L'idée est de partir d'une approche simple, puis de progresser vers des usages plus réalistes.
Exemple pratique
Essayez d'appliquer la notion vue ici dans un mini-exemple de votre projet personnel. Ensuite, comparez votre résultat avec les exercices associés pour valider votre compréhension.
À retenir
Maîtriser États : Hover, Focus, Active vous permettra d'aller plus vite dans les chapitres suivants.
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les bases : États : Hover, Focus, Active
Atelier #1Expliquez avec vos mots le concept principal de ce chapitre, puis illustrez-le par un exemple simple.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#2 — Application guidée
Atelier #2Réalisez un exercice pratique en reprenant la structure vue dans le cours et en modifiant au moins 2 paramètres.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#3 — Mini défi
Atelier #3Concevez une petite solution personnelle liée à 'États : Hover, Focus, Active' et justifiez vos choix techniques.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.