JS moderne, EXO #10, Barre de progression horizontale
ERROR
00:00
00:00

TUTO JS moderne, EXO #10, Barre de progression horizontale

Carl Brison
14,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce cours en ligne dédié à la pratique du JavaScript moderne, nous allons apprendre à mettre en place une barre de progression horizontale qui va augmenter ou diminuer sa jauge selon le défilement de la barre de scroll.

Pour cela, nous allons réaliser un site web responsive en utilisant la technologie CSS Grid, qui est une technique moderne de mise en page du CSS.

Notre barre de progression réagira en fonction de la mise en page des éléments HTML qui la compose.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation. Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Pour suivre ce tutoriel dans de bonnes conditions, il est recommandé de connaître :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du code de base
Leçon 2
Mise en place du détail des zones header et footer
Leçon 3
Mise en place du détail de la zone Nav
Leçon 4
Mise en place du détail de la zone article
Leçon 5
Connaître le niveau scrollé par l'utilisateur
Leçon 6
Obtenir la valeur 1 au maximum à notre calcul
Leçon 7
Mise en place de la barre de progression

Plan détaillé du cours

Leçon 1Mise en place du code de base
11m06s
Leçon 2Mise en place du détail des zones header et footer
07m25s
Leçon 3Mise en place du détail de la zone Nav
11m21s
Leçon 4Mise en place du détail de la zone article
10m11s
Leçon 5Connaître le niveau scrollé par l'utilisateur
11m52s
Leçon 6Obtenir la valeur 1 au maximum à notre calcul
05m11s
Leçon 7Mise en place de la barre de progression
05m09s
Leçon 8Mise en fonctionnement de la barre de progression
05m36s
Leçon 9Conclusion
01m11s

Aperçus

Avis des apprenants

Détail des avis
4
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 10/09/2023
Merci Carl, ce tutoriel est pratique et bien expliqué. Ce visuel peut être un ajout intéressant pour une expérience utilisateur agréable. J'ai également apprécié le raisonnement pour arriver au calcul de la barre de progression avec les propriétés clientHeight et scrollY. Validé 100 % #barre_de_prog_horizontale
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Alain ;-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 26/10/2022
sympa comme exercice , bien expliqué et détaillé
Carl Brison
Carl Brison
Merci beaucoup ;-)
Bernard Chabloz
Bernard Chabloz
Publié le 15/01/2022
Merci, ça marche à la perfection (même si l'égalité entre le scrollY max et la différence des hauteurs "body - html" n'est vraie qu'à 1 ou 2 px près... mystère?)
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire. Je pense que l'on doit subir un padding lié aux textes, c'est ce qui devrait faire cette différence.

Vos questions sur le cours

Que contient le fichier source ?

Le code source de l'exercice.

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données