JavaScript Moderne Avancé - Tout savoir sur le menu Burger
ERROR
00:00
00:00

TUTO JavaScript Moderne Avancé - Tout savoir sur le menu Burger

Carl Brison
29,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce cours dédié au JavaScript moderne avancé, nous allons apprendre à créer un menu Burger 100% responsive de A à Z.
Cela signifie que nous allons décortiquer entièrement la mise en place d'un menu responsive, comme on en voit sur tous les sites web modernes.

Nous utiliserons le CSS moderne tel que Flexbox, que nous associerons au JavaScript moderne. Cela nous permettra d'obtenir un menu responsive 100% moderne et 100% fonctionnel !

A la fin de ce tutoriel, vous serez en mesure de mettre en place vous-même un menu responsive entièrement personnalisé pour tous vos projets web !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Pré-requis pour suivre ce cours en ligne

Pour suivre ce tutoriel dans de bonnes conditions, il est fortement conseillé d'avoir des connaissances en JavaScript et notamment en JavaScript moderne.
Si tel n'est pas votre cas, je mets à votre disposition, une formation complète qui vous permettra de connaître toutes les bases en programmation moderne en JavaScript.

Pour aller plus loin :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Les bases
Chapitre 2
Détail de la zone A
Chapitre 3
Détail de la zone B
Chapitre 4
Détail de la zone C
Chapitre 5
Mise en application dans un projet web
Chapitre 6
Conclusion

Plan détaillé du cours

Chapitre 1 : Les bases
27m26s
 
Leçon 1Présentation du tuto
Leçon 2Mise en place des zones A et B
Leçon 3Mise en place de la zone C
Chapitre 2 : Détail de la zone A
33m38s
 
Leçon 1Mise en place d'une zone Logo
Leçon 2Création d'une liste non ordonnée
Leçon 3Mise en forme avec séparateur
Leçon 4Mise en forme avec background
Leçon 5Complément pour la classe "on"
Chapitre 3 : Détail de la zone B
24m53s
 
Leçon 1Mise en place d'un icone Burger
Leçon 2Mise en place d'un icone en Croix
Leçon 3Création d'un menu burger en CSS
Leçon 4Création d'une croix en CSS
Chapitre 4 : Détail de la zone C
16m55s
 
Leçon 1Adoucir l'arrivée de la zone C
Leçon 2Modifier le sens d'arrivée de la zone C
Leçon 3Superposer la zone C à la mise en page
Chapitre 5 : Mise en application dans un projet web
45m58s
 
Leçon 1Création des zones header, nav, article et footer
Leçon 2Détail des zones header, article et footer
Leçon 3Détail de la zone Nav sur les écrans grand et moyen
Leçon 4Détail de la zone Nav sur l'écran petit
Leçon 5Mise en fonctionnement
Leçon 6Petite discussion de mise en page
Chapitre 6 : Conclusion
02m22s
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
6
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 24/02/2023
Merci Carl pour ce tutoriel vraiment intéressant que vous avez créé sur la création d'un menu burger en JavaScript. Cette fonctionnalité est très utile et souvent utilisée, et grâce à votre tutoriel, j'ai pu ajouter un nouvel outil à ma boîte à outils. J'ai apprécié vos bons conseils et votre approche moderne du JavaScript. Votre tutoriel est validé à 100% !
Carl Brison
Carl Brison
Merci à vous Alain, j'en suis ravi ;-)
Valérie Arno
Valérie Arno
Publié le 21/01/2023
C'est le genre de tuto que j'aime bien, pas difficile mais on apprend des choses auxquelles on ne penserait pas, et nos tuyaux se rallongent après chaque cours avec vous. :) Des explications précises pour chaque étape qui nous font bien progresser pour faire des pages web au top. Je pense que je vais revoir mes sites pour ce qui est de l'affichage de mes menus pour les petits écrans :-) En fait rien n'est jamais terminé pour le web. Merci Carl.
Carl Brison
Carl Brison
Merci pour votre commentaire très gentil, Valérie. Oui vous avez parfaitement raison, rien n'est jamais terminé dans l'apprentissage du développement web ! C'est cela qui rend ce secteur passionnant !
Bernard Chabloz
Bernard Chabloz
Publié le 21/07/2021
tuto { top: 100%; }
Carl Brison
Carl Brison
Merci beaucoup ;-)))

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données