14,00

Tuto JS moderne, EXO #10, Barre de progression horizontale avec JavaScript

14,00

  • Une formation vidéo de 1h09m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
JS moderne, EXO #10, Barre de progression horizontale

ajouter ce cours aux favoris retirer ce cours des favoris

Retrouvez cette formation dans le bundle :

Bundle 10 exercices 100% frontend HTML, CSS et JS

-28% de réduction

voir les détails du bundle


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



Formateur : Carl Brison

Carl Brison a publié 262 tutoriels et obtenu une note moyenne de 4,9/5 sur 16 845 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de zolb laissé 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?)
    "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."

  • Que contient le fichier source ?
    Le code source de l'exercice.
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1437 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données