Bundle 10 exercices 100% frontend HTML, CSS et JS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Bundle 10 exercices 100% frontend HTML, CSS et JS

Carl Brison
Promo -28%
97,00€135,00€
3 paiements de 32,33€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Détail des avis
4
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

Payer plus tard ou en 3x

Prix d'achat : 97,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 32,33 €
tous les mois, sans intérêts
Total : 97,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1363 tutos gratuits

Notre politique de protection des données