Tailwind CSS #1/5. Maîtriser le Formatage des Textes
Tailwind CSS #1/5. Maîtriser le Formatage des Textes
Dans ce quatrième volet de la série NavBar Responsive, nous allons explorer la création d'un menu responsive avec une barre d'outils intégrant des fonctionnalités interactives.
Ce tutoriel vous guidera pas à pas dans la mise en place d'une navigation fluide et moderne, adaptée aux écrans mobiles et desktop.
Nous aborderons :
- La structure HTML du menu, avec une navigation élégante et accessible,
- Le style CSS pour un design épuré et une gestion efficace du mode responsive,
- Le JavaScript pour l'ouverture et la fermeture dynamique du menu, du champ de recherche et du formulaire de connexion.
À la fin de cette vidéo, vous saurez comment implémenter une barre de navigation moderne, intuitive et interactive, idéale pour tout site web.
🚀 Prêt à coder ? Alors c’est parti ! 🎬
Épisodes précédents:
- NavBar Responsive #3 : Menu responsive avec sous-menus
- NavBar Responsive #2 : Améliorez votre menu avec un dropdown animé
- NavBar Responsive #1 : Dominez les Sélecteurs CSS pour un Menu Ultra-Design
Suggestion: Et si vous passiez votre Certification FrontEnd avec moi ?
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Mise en place du HTML
Mise en place du HTML
Leçon 2
Mise en place du CSS général
Mise en place du CSS général
Leçon 3
Mise en place du CSS de base du HEADER
Mise en place du CSS de base du HEADER
Leçon 4
Mise en forme de la zone MENU
Mise en forme de la zone MENU
Leçon 5
Mettre en place le media queries
Mettre en place le media queries
Leçon 6
Ouvrir, Fermer la zone MENU
Ouvrir, Fermer la zone MENU
Leçon 7
Créer une boîte SEARCH
Créer une boîte SEARCH
Plan détaillé du cours
Leçon 1Mise en place du HTML
06m07
Leçon 2Mise en place du CSS général
03m53
Leçon 3Mise en place du CSS de base du HEADER
07m36
Leçon 4Mise en forme de la zone MENU
05m04
Leçon 5Mettre en place le media queries
05m44
Leçon 6Ouvrir, Fermer la zone MENU
04m21
Leçon 7Créer une boîte SEARCH
04m19
Leçon 8Mettre en forme la boîte SEARCH
07m12
Leçon 9Ouvrir, Fermer la boîte SEARCH
09m03
Leçon 10Créer une boîte LOGIN
04m43
Leçon 11Mettre en forme la boîte LOGIN
13m12
Leçon 12Ouvrir, Fermer la boîte LOGIN
03m38
Leçon 13Correction d'un petit bug
02m34
Leçon 14Bonus 1: Si site One Page
04m14
Leçon 15Bonus 2: Factorisation du code One Page
05m06
Leçon 16Bonus 3: Factorisation du code des éléments
07m46
Aperçus
Avis des apprenants