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
68,99€
3 paiements de 22,67€ 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
1h32
 
Leçon 1Introduction au projet
Leçon 2Coder l'HTML et le CSS
Leçon 3Afficher le temps dynamiquement
Leçon 4Afficher le temps dynamiquement
Leçon 5Afficher le temps dynamiquement
Leçon 6Gérer le décompte
Leçon 7Gérer le décompte
Leçon 8Gérer le décompte
Leçon 9Reset global et animation
Leçon 10Reset global et animation
Leçon 11Reset 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

Avis des apprenants

Détail des avis
399
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 : 68,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 22,67 €
tous les mois, sans intérêts
Total : 68,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1424 tutos gratuits

Notre politique de protection des données