NavBar Responsive #1 : Dominez les Sélecteurs CSS pour un Menu Ultra-Design
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h10
de formation
10
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Carl Brison
Carl Brison
Formateur certifié

NavBar Responsive #1 : Dominez les Sélecteurs CSS pour un Menu Ultra-Design

4.8/5 Trustpilot (1392 avis) Satisfait ou remboursé
1h10
de formation
10
leçons vidéo
1
chapitre

Créez une NavBar Responsive avec HTML, CSS et Javascript et maîtrisez les Sélecteurs CSS comme un Pro !
Vous souhaitez concevoir une barre de navigation moderne, fluide et 100 % responsive ? Cette formation vidéo est faite pour vous !

Dans ce tuto NavBar responsive

  • Structurer une NavBar ergonomique avec HTML5
  • Styliser votre menu avec des effets CSS avancés
  • Exploiter la puissance des sélecteurs CSS pour des animations élégantes
  • Rendre votre menu interactif avec JavaScript Implémenter une navigation mobile optimisée avec un menu burger

Grâce à des explications claires et des démonstrations concrètes, vous découvrirez des techniques professionnelles pour sublimer vos interfaces.

🎯 Formation de niveau intermédiaire : idéale pour les développeurs ayant déjà des bases en HTML et CSS et souhaitant aller plus loin !

Pourquoi suivre ce cours ?

  • 👉 Approfondissez vos connaissances en CSS grâce à des sélecteurs puissants et peu connus
  • 👉 Apprenez à optimiser l’expérience utilisateur avec des animations fluides
  • 👉 Gagnez en efficacité en adoptant des bonnes pratiques en responsive design

Prêt à maîtriser les menus modernes et interactifs ? Rejoignez la formation dès maintenant !
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
Leçon 2
Mise en forme des enfants directs de Nav
Leçon 3
Mise en forme des enfants directs de Menu
Leçon 4
Mise en place d'un point de rupture
Leçon 5
Mise en place du code JavaScript
Leçon 6
Modifier la mise à l'échelle
Leçon 7
Flouter les icones sauf le survolé

Table des matières

Leçon 1

Mise en place du HTML

10m18
Leçon 2

Mise en forme des enfants directs de Nav

10m21
Leçon 3

Mise en forme des enfants directs de Menu

07m54
Leçon 4

Mise en place d'un point de rupture

08m45
Leçon 5

Mise en place du code JavaScript

07m13
Leçon 6

Modifier la mise à l'échelle

02m56
Leçon 7

Flouter les icones sauf le survolé

05m57
Leçon 8

Déplacer les liens sur le hover

07m47
Leçon 9

Souligner le lien survolé

05m51
Leçon 10

Flouter les liens sauf le survolé

03m24

Aperçus

Avis des apprenants

Détail des avis
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Thierry Raymond
Thierry Raymond
Publié le 07/07/2025
5
Merci pour ce tuto très clair ! ... et voilà une alternative du soulignement du span à partir du centre : nav .menu ul span::before { content: ''; position: absolute; left: 50%; /* <- left: 0; */ bottom: -2px; width: 0; height: 2px; background-color: #94a7ae; transition: width 0.5s, margin-left 0.5s; /* <- transition: width 0.5s; */ } nav .menu ul a:hover span::before { width: 100%; margin-left: -50%; /* <- */ }
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire
Valérie Arno
Valérie Arno
Publié le 23/05/2025
5
Très bon tuto - de la réflexion quand même pour faire les choses dans le bon ordre et trouver comment les faire. On a déjà les connaissances mais il faut savoir les appliquer pour obtenir ce résultat. C'est la gymnastique du CSS :-) Merci beaucoup Carl et à très bientot.
Carl Brison
Carl Brison
Absolument, pas mal de gymnastique ! Merci beaucoup pour votre commentaire, Valérie ;-)
Regis Philippe
Regis Philippe
Publié le 17/05/2025
5
bonjour, Comme toujours une mine de découverte pour améliorer notre apprentissage . Merci , continuez encore pour notre plus grand plaisir.
Carl Brison
Carl Brison
C'est très gentil, merci beaucoup ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le code source complet de ce tuto
Choisissez votre accès

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
24,90€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h10 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 784 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)
Continuez votre progression

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

+ 1,400,000 d’apprenants et d’entreprises se forment au quotidien sur Tuto.com
  • Logo adobe
  • Logo etapes
  • Logo nikon
  • Logo arte
  • Logo xp-pen
  • Logo citia
  • Logo universal
  • Logo jc-decaux
  • Logo cite-science
  • Logo credit-agricole
  • Logo om
  • Logo fff
Paiement 100% sécurisé

Vos données sont chiffrées et protégées pendant toute la transaction.

  • visa-mono
  • mastercard-alt
  • maestro-alt
  • paypal-mono
  • klarna-mono
  • apple-pay-mono
  • google-pay-mono
Besoin d’aide ?

Notre équipe répond à vos questions du lundi au vendredi de 10h à 12h et de 14h à 16h.
Support par e-mail ou par téléphone au 01 84 80 80 29.

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données