Bundle 10 exercices 100% frontend HTML, CSS et JS
-28% de réduction
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 :
Table des matières de cette formation JavaScript (durée : 1h09m)
-
- Mise en place du code de base 00:11:06
- Mise en place du détail des zones header et footer 00:07:25
- Mise en place du détail de la zone Nav 00:11:21
- Mise en place du détail de la zone article 00:10:11
- Connaître le niveau scrollé par l'utilisateur 00:11:52
- Obtenir la valeur 1 au maximum à notre calcul 00:05:11
- Mise en place de la barre de progression 00:05:09
- Mise en fonctionnement de la barre de progression 00:05:36
- Conclusion 00:01:11
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
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?)
-
Que contient le fichier source ?Le code source de l'exercice.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissé