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.

Tuto composant ce bundle :

JS moderne, Exo #1: Affichage d'une fenêtre modale (voir la fiche produit)
- - Mise en place de la structure HTML 00:04:38
  - Mise en page avec la technologie CSS-Grid 00:09:08
  - Superposition d'une boîte sur le site 00:03:19
  - Création du bouton d'ouverture de la modale 00:06:31
  - Création de la boîte modale 00:05:52
  - On programme l'affichage de la modale 00:07:39
  - On programme la fermeture de la modale 00:03:39
  - Installation de la librairie animate 00:03:12
  - Animation à l'ouverture de la modale 00:02:54
  - Animation à la fermeture de la popup 00:09:25
  - Décalage de l'animation 00:05:47
  - Conclusion 00:06:50
JS moderne, Exo #2: Déplacement d'un menu burger (voir la fiche produit)
- - Mise en place de la structure HTML 00:06:28
  - Mise en place du CSS de la barre de navigation 00:09:27
  - Mise en place du CSS du menu burger 00:08:29
  - Mise en place du JavaScript pour animer la barre de navigation 00:10:28
  - Mise en place du JavaScript pour animer le menu burger 00:14:30
  - Conclusion 00:03:26
JS moderne, EXO #3 : Fixer une barre de navigation au scroll (voir la fiche produit)
- Cours
  - Récupérer la hauteur entre la barre de nav et le haut de la fenêtre 00:10:05
  - Récupérer le nombre de pixels défilés verticalement 00:05:04
  - Fixer la barre de navigation 00:08:34
- Exercice simple
  - Mise en place du code HTML 00:03:08
  - Mise en place du code CSS 00:12:01
  - Fixer la barre de navigation 00:08:57
- Exercice complexe
  - Présentation 00:02:21
  - Calcul de la largeur de la fenêtre 00:05:22
  - Mise en place du code CSS Grid 00:07:14
- Conclusion
  - Conclusion 00:01:57
JS moderne, EXO #4 Agrandir ou réduire la taille d'un texte (voir la fiche produit)
- Agrandir ou réduire la taille d'un texte
  - Mise en place des bases de notre page web 00:12:06
  - Détail des zones header et nav 00:08:56
  - Détail des zones article et footer 00:05:18
  - Détail de la zone section 00:10:21
  - Détail de la zone aside 00:11:03
  - Ecriture de notre programme 1/2 00:07:09
  - Ecriture de notre programme 2/2 00:07:21
- Conclusion
  - Conclusion 00:01:31
JS moderne, Exo #5 Afficher ou masquer un Mot de Passe (voir la fiche produit)
- Afficher ou cacher un Password
  - Mise en place du code HTML gratuit00:09:19
  - Mise en place de la librairie fontawesome 00:06:26
  - Mise en forme de la box 00:11:04
  - Mise en forme du titre de niveau 1 00:04:38
  - On cible l'action du formulaire 00:06:26
  - On bloque ou débloque le formulaire en JavaScript moderne 00:07:08
  - Mise en forme des champs de formulaire 00:10:16
  - On positionne l'oeil 00:05:07
  - Ecriture du programme d'affichage du Password 1/2 00:07:01
  - Ecriture du programme d'affichage du Password 1/2 00:06:13
  - Réflexion: Montrer à l'internaute l'inactivité du bouton 00:11:18
  - Réflexion: Informer l'internaute 00:11:34
- Conclusion
  - Conclusion 00:02:36
JS moderne, EXO #6 Limiter le nombre de caractères dans un textarea (voir la fiche produit)
- Compter et limiter le nombre de caractères dans un textarea
  - Compter le nombre de caractères dans un textarea gratuit00:07:13
  - Calculer la limitation du nombre de caractères 00:03:41
  - Si la limitation du nombre de caractères est dépassée, on écrit en rouge 00:04:16
- Exercice #1
  - Mise en place du HTML 00:08:08
  - Icone sur le bouton du formulaire 00:03:00
  - Mise en forme de la boîte qui contient le formulaire 00:10:29
  - Mise en forme du bouton de formulaire 00:04:48
  - Mise en place du fichier traitement 00:03:26
  - Mise en forme du formulaire 00:07:55
  - On vérifie que tous les champs du formulaires sont remplis 00:13:20
  - On compte le nombre de caractères dans le message 00:08:19
  - On bloque le formulaire si le nombre de caractères max est dépassé 00:05:26
  - Création d'une constante 00:04:01
- Limiter physiquement le nombre de caractères autorisés
  - Découverte de la fonction substring 00:06:36
  - Un peu plus loin 00:02:11
  - Retour à l'exercice précédent 00:03:44
  - Blocage du décompteur à 0 00:01:34
- Conclusion
  - Conclusion 00:01:04
JS moderne, Exo #7, Mise en place d'une image de fond d'écran aléatoire (voir la fiche produit)
- - Présentation de l'exercice 00:01:30
  - Mise en place du HTML 00:03:44
  - Mise en place du CSS de base 00:05:20
  - Mise en place de l'image de fond d'écran 00:05:18
  - Rappel de la méthode aléatoire 00:05:35
  - On écoute le chargement de la page 00:07:51
  - Ecriture de la fonction aléatoire 00:04:37
  - Conclusion 00:01:31
JS moderne, Exo #8, Générer un Mot de Passe aléatoire (voir la fiche produit)
- - Mise en place du HTML 00:09:31
  - Mise en place du CSS 00:14:24
  - Rappel de la création d'un nombre aléatoire 00:09:41
  - Génération d'un caractère aléatoire 00:07:51
  - Génération de plusieurs caractères aléatoires 00:06:19
  - Application du programme à notre formulaire 00:07:29
  - On bloque le formulaire 00:04:51
  - On vérifie que les champs sont remplis 1/2 00:06:37
  - On vérifie que les champs sont remplis 2/2 00:07:30
  - Conclusion 00:01:17
JS moderne, EXO #9, Modifier la Nav sur l'événement scroll (voir la fiche produit)
- - Mise en place du code HTML de base 00:07:13
  - Mise en place du code CSS 00:07:26
  - Calcul de la distance entre le haut du document et la barre de Nav 00:06:05
  - On fixe la barre de nav à l'écran 00:07:30
  - Modification de la barre de Nav une fois arrivée sur l'article 00:09:39
  - Conclusion 00:01:19
JS moderne, EXO #10, Barre de progression horizontale (voir la fiche produit)
- - 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é 320 tutoriels et obtenu une note moyenne de 4,9/5 sur 18 821 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

Avis des clients Questions sur le tuto

5,0
note moyenne

2
avis laissés

5 étoiles

4 étoiles

3 étoiles

2 étoiles

1 étoile

5

avis de ced-dev laissé le 24/03/2023

Voilà c'est fait, Bon ben ça glisse tout seul, ça se répète donc le process est là et on avance vite vu qu'on sait déjà à quoi s'en tenir. Beaucoup de CSS en perspective, plein de bonnes astuces c'est parfait. Merci Carl Aller un petit bundle 10 exercices 100% back-end POO/PHP SQL sur la même idée que celui-ci serait top parce que le format est idéal pour apprendre correctement a contrario des projets full stack qui demande énormément de concentration autrement c'est la chute et après misère à nous jeunes codeurs mdr.

Masquer la réponse de l'auteur Voir la réponse de l'auteur

"C'est une excellente idée Cédric, merci beaucoup pour votre commentaire très gentil ;-)"
5

avis de valerie-a77 laissé le 23/06/2022

Très bien expliqué comme à votre habitude. Beaucoup de répétitions qui aident à mémoriser et à se familiariser avec le code. Avec vous on n'écrit pas que du code, on réfléchit aussi et c'est parfait. C'est le genre de petits tutos bien utiles pour rendre nos sites web plus attrayants. Les 10 exercices sont tous aussi intéressants les uns que les autres, certains plus évidents que d'autres (les maths et moi ne sommes pas très bons amis), J'avoue au fur et à mesure le javascript me paraît beaucoup moins rébarbatif et je ne l'ai plus en horreur comme autrefois. Merci Carl. Grâce à vous mes sites n'ont plus la même tête. On n'est jamais déçu par vos cours :)

Masquer la réponse de l'auteur Voir la réponse de l'auteur

"Merci beaucoup Valérie ;-)))"