20 Projets en JavaScript
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO 20 Projets en JavaScript

Enzo Ustariz
Promo -40% Jusqu'au 23 juillet, 00:00
41,39€68,99€
3 paiements de 13,79€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Enfin des projets en JavaScript natif (également appelé Javascript Vanilla).

Le web est inondé de Frameworks, de librairies et d’outils en JavaScript. Mais il reste très sec quand il s’agit de JavaScript natif. Peu de ressources en anglais et encore moins en français. C’est pour cela que je propose ce cours en ligne « 20 projets en pur JavaScript »
Pour aider ceux qui souhaitent apprendre ce langage et savoir une bonne fois pour toute, ce qui appartient à JavaScript et ce qui appartient à un Framework ou autre librairie.

Je vois trop de gens qui se lancent directement dans les Frameworks JS, sans avoir les connaissances nécessaires. Ils se retrouvent complètement perdus et frustrés et à deux doigts de la crise de nerf, ce qui est compréhensible. Ils se disent qu’avec quelques tutos sur des animations JS ou des petits bouts de codes ils auront le bagage nécessaire. Mais c’est une solution erronée, ce n’est pas assez.

Le vrai problème c’est l’expérience, il faut pratiquer.
Il faut visualiser le JavaScript, à quoi il sert, pourquoi a-t-il été créé, où en est t’il de son évolution.
Pour devenir architecte, on dessine des bâtiments. Pour coder en JavaScript on fait des applications web en JS Natif. (Une app web est un site avec de nombreuses fonctionnalités, en général très dynamiques).
 

Voici la liste des 20 Projets Javascript que vous allez apprendre à créer dans ce cours en ligne

Un app de Quizz, une app météo sur navigateur, un Pokédex, un créateur de cookies, une to-do list, une app "Pomodoro", un système de validation de mot de passe dans un formulaire, un site pour créer des dégradés linéaires, un jeu des cartes mémoires, un projet avec l'API de GitHub, un projet d'authentification avec Firebase.
Mais ce n'est pas tout ! Nous apprendrons également à créer un slider, un système de drag and drop stylé, la création des particules en JS, coder le jeu space-invader, -créer un lecteur de vidéo personnalisé, créer le jeu casse-briques, coder un jeu de vitesse d'écriture, faire le jeu du morpion et enfin, coder un visualiseur de son.

Pas de quoi s'ennuyer. Le maître mot de cette formation en vidéo, c'est la pratique !
 

Les compétences JavaScript qui seront développées dans cette formation en ligne :

  • Gérer des données et les transformer.
  • Les conditions, boucles, etc …
  • Appeler des API pour aller chercher des données.
  • Faire du JavaScript asynchrone.
  • Coder en JavaScript moderne.
  • Utiliser des objets / tableaux.
  • Utiliser des classes pour créer des objets dans un style orienté-objet.
  • Créer des interface stylées (HTML / CSS).
  • Utiliser des fonctions.
  • Gérer toutes sortes d’événements.
  • Utiliser une base de données pour faire un système d’authentification (simple).
  • Voir l’utilisation du DOM en profondeur, une des clés pour bien comprendre JS.
  • Utiliser des techniques spéciales très utiles, comme l’utilisation de JavaScript lié au son, mais aussi le système de drag & drop, utiliser des données au format JSON.
  • ...

On va vraiment aborder et apprendre beaucoup de choses !
 

A qui s’adresse ce tuto JavaScript ?

Ce cours s’adresse aux débutants. Ne sois surtout pas apeuré par le nombre de projets, j’explique tout de A à Z.
Et n’oublie pas que pour progresser, il faut se frotter à des projets qui nous dépassent, pour découvrir de nouvelles choses et booster son apprentissage.
Certains projets sont donc vraiment orientés débutants, d’autre atteignent un niveau intermédiaire.
Dans tous les cas un léger bagage est nécessaire, si tu as déjà fait des boucles, utilisé des fonctions et des conditions, tu as les connaissances de bases requises.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Sympa hein ? Alors si tu as envie de booster ton niveau en programmation, rendez-vous de l'autre côté pour commencer à coder !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
Application "Calcul d'IMC"
Chapitre 3
Coder un Quizz
Chapitre 4
Coder une recherche avec l'API de Wikipedia
Chapitre 5
Le créateur de cookies
Chapitre 6
L'application météo sur navigateur
Chapitre 7
Coder une application de création de dégradés !

Plan détaillé du cours

Chapitre 1 : Introduction
13m
 
Leçon 1Introduction
Leçon 2Code source et conseils
Chapitre 2 : Application "Calcul d'IMC"
55m53
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML du projet
Leçon 3Coder le CSS, partie 1
Leçon 4Coder le CSS, partie 2
Leçon 5JavaScript partie 1 : Prendre le formulaire et les inputs.
Leçon 6JavaScript partie 2 : Calculer l'IMC et afficher le résultat
Chapitre 3 : Coder un Quizz
43m03
 
Leçon 1Introduction du projet
Leçon 2Coder l'HTML
Leçon 3Coder le CSS
Leçon 4JavaScript partie 1 : Récupérer les données du formulaire
Leçon 5JavaScript partie 2 : Afficher les résultats
Chapitre 4 : Coder une recherche avec l'API de Wikipedia
30m15
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3JavaScript partie 1 : Gérer l'appel vers l'API
Leçon 4JavaScript partie 2 : Afficher un loader et gérer les erreurs
Chapitre 5 : Le créateur de cookies
53m45
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML
Leçon 3Coder le CSS
Leçon 4JavaScript partie 1 : Gérer les inputs et le formulaire
Leçon 5JavaScript partie 2 : Créer les cookies
Leçon 6JavaScript partie 3 : Afficher et supprimer les cookies
Chapitre 6 : L'application météo sur navigateur
39m09
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3Faire une requête de base
Leçon 4Afficher les données
Leçon 5Gérer les erreurs possible et le loader
Chapitre 7 : Coder une application de création de dégradés !
42m56
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML
Leçon 3Coder le CSS
Leçon 4JavaScript partie 1 : Gérer l'interface
Leçon 5JavaScript partie 2 : Changer la couleur en fonction de la luminosité
Leçon 6JavaScript partie 3 : Copier le dégradé et en créer au hasard
Chapitre 8 : Pomodoro
37m24
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3Afficher le temps dynamiquement
Leçon 4Gérer le décompte
Leçon 5Reset global et animation
Chapitre 9 : Projet "Validation de données"
1h04
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML
Leçon 3Coder le CSS
Leçon 4JavaScript partie 1 : Validation de l'utilisateur et l'email
Leçon 5JavaScript partie 2 : Validation du mot de passe
Leçon 6JavaScript partie 3 : Afficher la force du mot de passe
Leçon 7JavaScript partie 4 : Envoyer le formulaire
Chapitre 10 : Le jeu des cartes mémoires
36m25
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3JavaScript partie 1 : Mélanger les cartes et les sélectionner
Leçon 4JavaScript partie 2 : Vérifier les résultats
Leçon 5JavaScript partie 3 : Nombre d'essais et fin de partie
Leçon 6JavaScript partie 4 : Remise à zéro
Chapitre 11 : Intégrer un scroll infini
29m59
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3JavaScript partie 1 : Appel à l'API et recherche
Leçon 4JavaScript partie 2 : Intersection observer et push to top
Chapitre 12 : Le Slider
36m47
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3JavaScript partie 1 : Gérer les directions
Leçon 4JavaScript partie 2 : Coder l'animation
Leçon 5JavaScript partie 3 : Slide out et vérouillage
Chapitre 13 : Le générateur de mots de passe
52m44
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3JavaScript partie 1 : Générer un nombre au hasard dans un intervalle
Leçon 4JavaScript partie 2 : Rajouter les ensembles de caractères
Leçon 5JavaScript partie 3 : Créer le mot de passe
Leçon 6JavaScript partie 4 : Intégrer la "range" et la copie de mot de passe
Chapitre 14 : Coder une liste filtrable dynamiquement
41m46
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML
Leçon 3Coder le CSS
Leçon 4JavaScript partie 1 : L'appel à l'API et la création de la liste
Leçon 5JavaScript partie 2 : Implémenter le filtre
Chapitre 15 : Le lecteur personnalisé
49m12
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3JavaScript partie 1 : Intégrer la lecture de la vidéo et les timers
Leçon 4JavaScript partie 2 : Gérer la "range" et le jeu de la vidéo
Leçon 5JavaScript partie 3 : Navigation et plein écran.
Leçon 6Finition
Chapitre 16 : Le jeu du Morpion
16m56
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3Coder les fonctionnalités du Morpion
Chapitre 17 : L'animation de particules
33m12
 
Leçon 1Introduction au projet
Leçon 2Mise en place du projet et création de la classe
Leçon 3Remplissage du tableau et animation
Leçon 4Connexion et resize
Chapitre 18 : Coder une landing page animée
1h05
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML
Leçon 3Coder le CSS partie 1
Leçon 4Coder le CSS partie 2
Leçon 5Coder le CSS partie 3
Leçon 6JavaScript partie 1 : Coder le curseur et l'effet machine à écrire
Leçon 7JavaScript partie 2 : Animation au scroll
Chapitre 19 : Le jeu de la vitesse de frappe
42m35
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3JavaScript partie 1 : Afficher la phrase à écrire
Leçon 4JavaScript partie 2 : Vérification et timer
Leçon 5JavaScript partie 3 : Perfectionnement
Chapitre 20 : Coder une calculatrice complète
1h19
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3JavaScript partie 1 : Gérer les chiffres et les opérateurs
Leçon 4JavaScript partie 2 : Recoder la méthode eval() partie 1
Leçon 5JavaScript partie 3 : Calcul de l'évaluation et récursion
Leçon 6JavaScript partie 4 : Gérer la suppression et le reset et les finitions
Chapitre 21 : Coder un lecteur audio
40m44
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML
Leçon 3Coder le CSS
Leçon 4JavaScript partie 1 : Gérer la durée et le jeu de la musique
Leçon 5JavaScript partie 2 : Changer les musiques, shuffle, clic sur progression.
Chapitre 22 : [Ancien Cours] Introduction
11m55
 
Leçon 1Introduction
Leçon 2Code source et conseils
Chapitre 23 : [Ancien Cours] Le quizz
49m53
 
Leçon 1Introduction Quizz
Leçon 2Quizz : partie HTML
Leçon 3Quizz : partie CSS
Leçon 4Quizz : Récupérer les données en JavaScript
Leçon 5Quizz : Obtenir les résultats
Leçon 6Quizz : Afficher les résultats
Leçon 7Quizz : finitions
Chapitre 24 : [Ancien Cours] App météo sur navigateur
1h08
 
Leçon 1Introduction App météo
Leçon 2App Météo : Partie HTML
Leçon 3App Météo : Partie CSS
Leçon 4App Météo : Partie CSS 2
Leçon 5App météo : premier appel à l'API
Leçon 6App météo : gérer les données
Leçon 7App météo : Afficher les prévisions
Leçon 8App météo : Prévisions des jours + loader
Chapitre 25 : [Ancien Cours] Le pokédex
1h03
 
Leçon 1Intro Pokedex
Leçon 2Pokédex : Section CSS
Leçon 3Pokédex : Premier appel à l'API
Leçon 4Pokédex : Gérer les données pour les avoir en FR
Leçon 5Pokédex : Créer les cartes
Leçon 6Pokédex : implémenter le scroll infini
Leçon 7Pokédex : Gérer la recherche
Leçon 8Pokédex : Animer le chargement
Chapitre 26 : [Ancien Cours] Le créateur de cookies
48m25
 
Leçon 1Introduction et HTML
Leçon 2Partie CSS
Leçon 3[removed] Utiliser Date pour se déplacer à la semaine suivante
Leçon 4[removed] Remplir l'objet contenant les infos des cookies
Leçon 5Créer un cookie.
Leçon 6Gérer les actions autorisées.
Leçon 7Afficher et supprimer les cookies
Leçon 8Gérer un petit bug.
Chapitre 27 : [Ancien Cours] La To-Do List.
21m29
 
Leçon 1To-do list : HTML et CSS
Leçon 2To-do list : Logique JS
Chapitre 28 : [Ancien Cours] Projet Pomodoro
26m44
 
Leçon 1Pomodoro : HTML - CSS
Leçon 2Pomodoro : Affichage de base
Leçon 3Pomodoro : Gérer les actions
Leçon 4Pomodoro : finitions
Chapitre 29 : [Ancien Cours] Validation de formulaire
42m12
 
Leçon 1Validation HTML
Leçon 2Validation : CSS
Leçon 3Validation pseudo
Leçon 4Validation de l'email
Leçon 5Validation du mot de passe
Leçon 6Confirmation du mot de passe
Chapitre 30 : [Ancien Cours] App création de dégradés linéaires.
33m35
 
Leçon 1Dégradés : HTML
Leçon 2Dégradés : CSS
Leçon 3Dégradé de base JS
Leçon 4Rajouter des couleurs
Leçon 5Suppression et rajout des couleurs
Leçon 6Mise à jour des couleurs
Chapitre 31 : [Ancien Cours] Jeu des cartes mémoire
22m04
 
Leçon 1Cartes mémoire : HTML & CSS
Leçon 2Stocker les cartes retournées
Leçon 3Verrouiller les cartes et changer l'ordre
Chapitre 32 : [Ancien Cours] Projet utilisateur GitHub
17m56
 
Leçon 1Projet GitHub : HTML & CSS
Leçon 2Projet GitHub créer un template avec des données JS.
Chapitre 33 : [Ancien Cours] Créer un système d'authentification
29m38
 
Leçon 1Créer une base de donnée avec Firebase
Leçon 2Authentification : HTML & CSS
Leçon 3Gérer les modales + inscription
Leçon 4Connexion, déconnexion et contenu public/privé
Chapitre 34 : [Ancien Cours] Le Slider
18m25
 
Leçon 1Slider : HTML & CSS
Leçon 2Slider : Partie JavaScript
Chapitre 35 : [Ancien Cours] App de Drag & Drop
23m22
 
Leçon 1Drag&Drop : Html / CSS
Leçon 2Drag&Drop : ajout des événements
Leçon 3Drag&Drop : Sélectionner une photo
Chapitre 36 : [Ancien Cours] Créer des particules en JavaScript
23m52
 
Leçon 1Particules : Html & CSS
Leçon 2Particules : Créer un tableau contenant les objets
Leçon 3Animer les particules
Chapitre 37 : [Ancien Cours] Space Invaders
40m25
 
Leçon 1HTML / CSS / Création de la grille.
Leçon 2Création des aliens
Leçon 3Déplacer les aliens
Leçon 4Création du laser
Leçon 5Finitions
Chapitre 38 : [Ancien Cours] Le lecteur vidéo
20m56
 
Leçon 1Lecteur vidéo : HTML & CSS
Leçon 2Gérer le volume, le mute, et la barre orange.
Leçon 3Pouvoir cliquer sur la barre orange
Chapitre 39 : [Ancien Cours] Jeu du casse-briques
33m10
 
Leçon 1Création de l'HTML / CSS + création de la balle et de la barre
Leçon 2Dessiner les briques
Leçon 3Animer le jeu
Leçon 4Détecter les collisions
Chapitre 40 : [Ancien Cours] Jeu vitesse d'écriture
21m40
 
Leçon 1Partie HTML / CSS
Leçon 2Afficher une phrase aléatoire
Leçon 3Gérer l'entrée et les erreurs
Chapitre 41 : [Ancien Cours] Le jeu du morpion
17m20
 
Leçon 1Le morpion : HTML / CSS
Leçon 2Le javaScript du jeu du morpion
Chapitre 42 : [Ancien Cours] Visualiseur Audio
17m50
 
Leçon 1Création du visualiseur audio
Chapitre 43 : Nouveau cours
18h17
 
Leçon 1
Leçon 2
Leçon 3
Leçon 4
Leçon 5
Leçon 6
Leçon 7
Leçon 8
Leçon 9
Leçon 10
Leçon 11
Leçon 12
Leçon 13
Leçon 14
Leçon 15
Leçon 16
Leçon 17
Leçon 18
Leçon 19
Leçon 20
Leçon 21
Leçon 22
Leçon 23
Leçon 24
Leçon 25
Leçon 26
Leçon 27
Leçon 28
Leçon 29
Leçon 30
Leçon 31
Leçon 32
Leçon 33
Leçon 34
Leçon 35
Leçon 36
Leçon 37
Leçon 38
Leçon 39
Leçon 40
Leçon 41
Leçon 42
Leçon 43
Leçon 44
Leçon 45
Leçon 46
Leçon 47
Leçon 48
Leçon 49
Leçon 50
Leçon 51
Leçon 52
Leçon 53
Leçon 54
Leçon 55
Leçon 56
Leçon 57
Leçon 58
Leçon 59
Leçon 60
Leçon 61
Leçon 62
Leçon 63
Leçon 64
Leçon 65
Leçon 66
Leçon 67
Leçon 68
Leçon 69
Leçon 70
Leçon 71
Leçon 72
Leçon 73
Leçon 74
Leçon 75
Leçon 76
Leçon 77
Leçon 78
Leçon 79
Leçon 80
Leçon 81
Leçon 82
Leçon 83
Leçon 84
Leçon 85
Leçon 86
Leçon 87
Leçon 88
Leçon 89
Leçon 90
Leçon 91
Leçon 92
Leçon 93
Leçon 94
Leçon 95
Leçon 96
Leçon 97
Leçon 98
Leçon 99
Leçon 100
Leçon 101
Leçon 102
Leçon 103
Leçon 104
Leçon 105
Leçon 106
Leçon 107
Leçon 108
Leçon 109
Leçon 110
Leçon 111
Leçon 112
Leçon 113
Leçon 114
Leçon 115
Leçon 116
Leçon 117
Leçon 118
Leçon 119
Leçon 120
Leçon 121
Leçon 122
Leçon 123
Leçon 124
Leçon 125
Leçon 126
Leçon 127
Leçon 128
Leçon 129
Leçon 130
Leçon 131
Leçon 132
Leçon 133
Leçon 134
Leçon 135
Leçon 136
Leçon 137
Leçon 138
Leçon 139
Leçon 140
Leçon 141
Leçon 142
Leçon 143
Leçon 144
Leçon 145
Leçon 146
Leçon 147
Leçon 148
Leçon 149
Leçon 150
Leçon 151
Leçon 152
Leçon 153
Leçon 154
Leçon 155
Leçon 156
Leçon 157
Leçon 158
Leçon 159
Leçon 160
Leçon 161
Leçon 162
Leçon 163
Leçon 164
Leçon 165

Avis des apprenants

Détail des avis
407
Apprenants
4
Commentaires
4,5/5
Note moyenne
5/5
3
4/5
0
3/5
1
2/5
0
1/5
0
Red Bordeaux
Red Bordeaux
Publié le 08/02/2021
Franchement, top. Mais, stp, c'est très bien que le tuto soit en français, mais le code, c'est en anglais et sans abréviations. Array, c'est par "arr". Je sais que je ne t'apprends rien. mais no Ninja Code. Edit : C'est noté! Merci. (Mais g pas rlv les otr abr utlz dn le crs). En tout cas, c'est de la patate tes cours. C'est juste que quand on est novice, avec les bugs qui arrivent vite, on est chatouilleux... à 3h du mat...
Enzo Ustariz
Array est un mot réservé en JS donc arr est correct ;)
Jean-Pierre Vignolle
Jean-Pierre Vignolle
Publié le 05/02/2021
C'est top merci Enzo!!!!!
Olivier Bouzonnie
Olivier Bouzonnie
Publié le 09/01/2021
Enzo rend les choses accessibles et ludique

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard ou en 3x

Prix d'achat : 41,39 €
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 13,80 €
tous les mois, sans intérêts
Total : 41,39 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1478 tutos gratuits

Notre politique de protection des données