JS moderne, Exo #1: Affichage d'une fenêtre modale
JS moderne, Exo #1: Affichage d'une fenêtre modale
Dans ce Bundle 100% frontend, je vous propose de réaliser 10 exercices d'application que vous pourrez facilement reproduire lors de vos développements.
Les 10 exercices que je vous propose ici, sont des classiques du développement frontend.
Vous pourrez donc vous en servir fréquemment et ainsi proposer à vos visiteurs, des pages web 100% interactives.
Voici la liste des 10 exercices que nous allons réaliser ensemble, en utilisant les langages frontend courants.
À savoir, les langages HTML, CSS et JavaScript :
- Exo #1 : Affichage d'une fenêtre modale,
- Exo #2 : Déplacement d'un menu burger,
- Exo #3 : Fixer une barre de navigation au scroll,
- Exo #4 : Agrandir ou réduire la taille d'un texte,
- Exo #5 : Afficher ou masquer un Mot de Passe,
- Exo #6 : Limiter le nombre de caractères dans un textarea,
- Exo #7 : Mise en place d'une image de fond d'écran aléatoire,
- Exo #8 : Générer un Mot de Passe aléatoire,
- Exo #9 : Modifier la Nav sur l'événement scroll,
- Exo #10 : Barre de progression horizontale,
Des QCM vous permettront de valider en plus vos connaissances théoriques.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Je vous précise que je mets l'ensemble des codes de chacun des exercices, à vos dispositions.
Vous pourrez adapter ces codes à vos propres codes.
Si vous souhaitez en apprendre plus sur le langage JavaScript, je mets un Bundle complet à votre disposition.
Cours dans ce bundle
JS moderne, Exo #2: Déplacement d'un menu burger
JS moderne, Exo #2: Déplacement d'un menu burger
JS moderne, EXO #3 : Fixer une barre de navigation au scroll
JS moderne, EXO #3 : Fixer une barre de navigation au scroll
JS moderne, EXO #4 Agrandir ou réduire la taille d'un texte
JS moderne, EXO #4 Agrandir ou réduire la taille d'un texte
JS moderne, Exo #5 Afficher ou masquer un Mot de Passe
JS moderne, Exo #5 Afficher ou masquer un Mot de Passe
JS moderne, EXO #6 Limiter le nombre de caractères dans un textarea
JS moderne, EXO #6 Limiter le nombre de caractères dans un textarea
JS moderne, Exo #7, Mise en place d'une image de fond d'écran aléatoire
JS moderne, Exo #7, Mise en place d'une image de fond d'écran aléatoire
JS moderne, Exo #8, Générer un Mot de Passe aléatoire
JS moderne, Exo #8, Générer un Mot de Passe aléatoire
JS moderne, EXO #9, Modifier la Nav sur l'événement scroll
JS moderne, EXO #9, Modifier la Nav sur l'événement scroll
JS moderne, EXO #10, Barre de progression horizontale
JS moderne, EXO #10, Barre de progression horizontale
Plan détaillé des cours
Leçon 1Mise en place de la structure HTML
04m38s
Leçon 2Mise en page avec la technologie CSS-Grid
09m08s
Leçon 3Superposition d'une boîte sur le site
03m19s
Leçon 4Création du bouton d'ouverture de la modale
06m31s
Leçon 5Création de la boîte modale
05m52s
Leçon 6On programme l'affichage de la modale
07m39s
Leçon 7On programme la fermeture de la modale
03m39s
Leçon 8Installation de la librairie animate
03m12s
Leçon 9Animation à l'ouverture de la modale
02m54s
Leçon 10Animation à la fermeture de la popup
09m25s
Leçon 11Décalage de l'animation
05m47s
Leçon 12Conclusion
06m50s
Leçon 1Mise en place de la structure HTML
06m28s
Leçon 2Mise en place du CSS de la barre de navigation
09m27s
Leçon 3Mise en place du CSS du menu burger
08m29s
Leçon 4Mise en place du JavaScript pour animer la barre de navigation
10m28s
Leçon 5Mise en place du JavaScript pour animer le menu burger
14m30s
Leçon 6Conclusion
03m26s
Chapitre 1 : Cours
23m43s
Leçon 1Récupérer la hauteur entre la barre de nav et le haut de la fenêtre
Leçon 2Récupérer le nombre de pixels défilés verticalement
Leçon 3Fixer la barre de navigation
Chapitre 2 : Exercice simple
24m06s
Leçon 1Mise en place du code HTML
Leçon 2Mise en place du code CSS
Leçon 3Fixer la barre de navigation
Chapitre 3 : Exercice complexe
14m57s
Leçon 1Présentation
Leçon 2Calcul de la largeur de la fenêtre
Leçon 3Mise en place du code CSS Grid
Chapitre 4 : Conclusion
01m57s
Leçon 1Conclusion
Chapitre 1 : Agrandir ou réduire la taille d'un texte
1h02m
Leçon 1Mise en place des bases de notre page web
Leçon 2Détail des zones header et nav
Leçon 3Détail des zones article et footer
Leçon 4Détail de la zone section
Leçon 5Détail de la zone aside
Leçon 6Ecriture de notre programme 1/2
Leçon 7Ecriture de notre programme 2/2
Chapitre 2 : Conclusion
01m31s
Leçon 1Conclusion
Chapitre 1 : Afficher ou cacher un Password
1h36m
Leçon 1Mise en place du code HTML
Leçon 2Mise en place de la librairie fontawesome
Leçon 3Mise en forme de la box
Leçon 4Mise en forme du titre de niveau 1
Leçon 5On cible l'action du formulaire
Leçon 6On bloque ou débloque le formulaire en JavaScript moderne
Leçon 7Mise en forme des champs de formulaire
Leçon 8On positionne l'oeil
Leçon 9Ecriture du programme d'affichage du Password 1/2
Leçon 10Ecriture du programme d'affichage du Password 1/2
Leçon 11Réflexion: Montrer à l'internaute l'inactivité du bouton
Leçon 12Réflexion: Informer l'internaute
Chapitre 2 : Conclusion
02m36s
Leçon 1Conclusion
Chapitre 1 : Compter et limiter le nombre de caractères dans un textarea
15m10s
Leçon 1Compter le nombre de caractères dans un textarea
Leçon 2Calculer la limitation du nombre de caractères
Leçon 3Si la limitation du nombre de caractères est dépassée, on écrit en rouge
Chapitre 2 : Exercice #1
1h08m
Leçon 1Mise en place du HTML
Leçon 2Icone sur le bouton du formulaire
Leçon 3Mise en forme de la boîte qui contient le formulaire
Leçon 4Mise en forme du bouton de formulaire
Leçon 5Mise en place du fichier traitement
Leçon 6Mise en forme du formulaire
Leçon 7On vérifie que tous les champs du formulaires sont remplis
Leçon 8On compte le nombre de caractères dans le message
Leçon 9On bloque le formulaire si le nombre de caractères max est dépassé
Leçon 10Création d'une constante
Chapitre 3 : Limiter physiquement le nombre de caractères autorisés
14m05s
Leçon 1Découverte de la fonction substring
Leçon 2Un peu plus loin
Leçon 3Retour à l'exercice précédent
Leçon 4Blocage du décompteur à 0
Chapitre 4 : Conclusion
01m04s
Leçon 1Conclusion
Leçon 1Présentation de l'exercice
01m30s
Leçon 2Mise en place du HTML
03m44s
Leçon 3Mise en place du CSS de base
05m20s
Leçon 4Mise en place de l'image de fond d'écran
05m18s
Leçon 5Rappel de la méthode aléatoire
05m35s
Leçon 6On écoute le chargement de la page
07m51s
Leçon 7Ecriture de la fonction aléatoire
04m37s
Leçon 8Conclusion
01m31s
Leçon 1Mise en place du HTML
09m31s
Leçon 2Mise en place du CSS
14m24s
Leçon 3Rappel de la création d'un nombre aléatoire
09m41s
Leçon 4Génération d'un caractère aléatoire
07m51s
Leçon 5Génération de plusieurs caractères aléatoires
06m19s
Leçon 6Application du programme à notre formulaire
07m29s
Leçon 7On bloque le formulaire
04m51s
Leçon 8On vérifie que les champs sont remplis 1/2
06m37s
Leçon 9On vérifie que les champs sont remplis 2/2
07m30s
Leçon 10Conclusion
01m17s
Leçon 1Mise en place du code HTML de base
07m13s
Leçon 2Mise en place du code CSS
07m26s
Leçon 3Calcul de la distance entre le haut du document et la barre de Nav
06m05s
Leçon 4On fixe la barre de nav à l'écran
07m30s
Leçon 5Modification de la barre de Nav une fois arrivée sur l'article
09m39s
Leçon 6Conclusion
01m19s
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
Avis des apprenants