Bundle 10 exercices 100% frontend HTML, CSS et JS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
11h07
de formation
100
leçons vidéo
10
formations
Intermédiaire
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Bundle 10 exercices 100% frontend HTML, CSS et JS

Promo -28%
4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
11h07
de formation
100
leçons vidéo
10
formations

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 #1: Affichage d'une fenêtre modale Cours 1

JS moderne, Exo #1: Affichage d'une fenêtre modale

JS moderne, Exo #2: Déplacement d'un menu burger Cours 2

JS moderne, Exo #2: Déplacement d'un menu burger

JS moderne, EXO #3 : Fixer une barre de navigation au scroll Cours 3

JS moderne, EXO #3 : Fixer une barre de navigation au scroll

JS moderne, EXO #4 Agrandir ou réduire la taille d'un texte Cours 4

JS moderne, EXO #4 Agrandir ou réduire la taille d'un texte

JS moderne, Exo #5 Afficher ou masquer un Mot de Passe Cours 5

JS moderne, Exo #5 Afficher ou masquer un Mot de Passe

JS moderne, EXO #6 Limiter le nombre de caractères dans un textarea Cours 6

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 Cours 7

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 Cours 8

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 Cours 9

JS moderne, EXO #9, Modifier la Nav sur l'événement scroll

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

JS moderne, EXO #10, Barre de progression horizontale

Plan détaillé des cours

 
Leçon 1

Mise en place de la structure HTML

04m38
Leçon 2

Mise en page avec la technologie CSS-Grid

09m08
Leçon 3

Superposition d'une boîte sur le site

03m19
Leçon 4

Création du bouton d'ouverture de la modale

06m31
Leçon 5

Création de la boîte modale

05m52
Leçon 6

On programme l'affichage de la modale

07m39
Leçon 7

On programme la fermeture de la modale

03m39
Leçon 8

Installation de la librairie animate

03m12
Leçon 9

Animation à l'ouverture de la modale

02m54
Leçon 10

Animation à la fermeture de la popup

09m25
Leçon 11

Décalage de l'animation

05m47
Leçon 12

Conclusion

06m50
 
Leçon 1

Mise en place de la structure HTML

06m28
Leçon 2

Mise en place du CSS de la barre de navigation

09m27
Leçon 3

Mise en place du CSS du menu burger

08m29
Leçon 4

Mise en place du JavaScript pour animer la barre de navigation

10m28
Leçon 5

Mise en place du JavaScript pour animer le menu burger

14m30
Leçon 6

Conclusion

03m26
 

Chapitre 1 : Cours

23m43
 
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

24m06
 
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

14m57
 
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

01m57
 
Leçon 1Conclusion
 

Chapitre 1 : Agrandir ou réduire la taille d'un texte

1h02
 
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

01m31
 
Leçon 1Conclusion
 

Chapitre 1 : Afficher ou cacher un Password

1h36
 
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

02m36
 
Leçon 1Conclusion
 

Chapitre 1 : Compter et limiter le nombre de caractères dans un textarea

15m10
 
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

1h08
 
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

14m05
 
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

01m04
 
Leçon 1Conclusion
 
Leçon 1

Présentation de l'exercice

01m30
Leçon 2

Mise en place du HTML

03m44
Leçon 3

Mise en place du CSS de base

05m20
Leçon 4

Mise en place de l'image de fond d'écran

05m18
Leçon 5

Rappel de la méthode aléatoire

05m35
Leçon 6

On écoute le chargement de la page

07m51
Leçon 7

Ecriture de la fonction aléatoire

04m37
Leçon 8

Conclusion

01m31
 
Leçon 1

Mise en place du HTML

09m31
Leçon 2

Mise en place du CSS

14m24
Leçon 3

Rappel de la création d'un nombre aléatoire

09m41
Leçon 4

Génération d'un caractère aléatoire

07m51
Leçon 5

Génération de plusieurs caractères aléatoires

06m19
Leçon 6

Application du programme à notre formulaire

07m29
Leçon 7

On bloque le formulaire

04m51
Leçon 8

On vérifie que les champs sont remplis 1/2

06m37
Leçon 9

On vérifie que les champs sont remplis 2/2

07m30
Leçon 10

Conclusion

01m17
 
Leçon 1

Mise en place du code HTML de base

07m13
Leçon 2

Mise en place du code CSS

07m26
Leçon 3

Calcul de la distance entre le haut du document et la barre de Nav

06m05
Leçon 4

On fixe la barre de nav à l'écran

07m30
Leçon 5

Modification de la barre de Nav une fois arrivée sur l'article

09m39
Leçon 6

Conclusion

01m19
 
Leçon 1

Mise en place du code de base

11m06
Leçon 2

Mise en place du détail des zones header et footer

07m25
Leçon 3

Mise en place du détail de la zone Nav

11m21
Leçon 4

Mise en place du détail de la zone article

10m11
Leçon 5

Connaître le niveau scrollé par l'utilisateur

11m52
Leçon 6

Obtenir la valeur 1 au maximum à notre calcul

05m11
Leçon 7

Mise en place de la barre de progression

05m09
Leçon 8

Mise en fonctionnement de la barre de progression

05m36
Leçon 9

Conclusion

01m11

Avis des apprenants

Détail des avis
108
Apprenants
2
Commentaires
5/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
0
1/5
0
Cédric Leman
Cédric Leman
Publié 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.
Carl Brison
Carl Brison
C'est une excellente idée Cédric, merci beaucoup pour votre commentaire très gentil ;-)
Valérie Arno
Valérie Arno
Publié 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 :)
Carl Brison
Carl Brison
Merci beaucoup Valérie ;-)))

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
134,99€ 97€
Promo -28%
Paiement unique, sans abonnement
Accès à vie à cette formation
11h07 de vidéo
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 759 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données