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 !
Table des matières de cette formation JavaScript (durée : 26h29m)
-
Introduction
- Introduction 00:04:14
- Code source et conseils 00:08:46
-
Application "Calcul d'IMC"
- Introduction au projet 00:08:28
- Coder l'HTML du projet 00:08:44
- Coder le CSS, partie 1 00:10:17
- Coder le CSS, partie 2 00:06:14
- JavaScript partie 1 : Prendre le formulaire et les inputs. 00:09:37
- JavaScript partie 2 : Calculer l'IMC et afficher le résultat 00:12:33
-
Coder un Quizz
- Introduction du projet 00:01:23
- Coder l'HTML 00:08:02
- Coder le CSS 00:10:31
- JavaScript partie 1 : Récupérer les données du formulaire 00:12:41
- JavaScript partie 2 : Afficher les résultats 00:10:26
-
Coder une recherche avec l'API de Wikipedia
- Introduction au projet 00:02:27
- Coder l'HTML et le CSS 00:08:23
- JavaScript partie 1 : Gérer l'appel vers l'API 00:11:28
- JavaScript partie 2 : Afficher un loader et gérer les erreurs 00:07:57
-
Le créateur de cookies
- Introduction au projet 00:01:14
- Coder l'HTML 00:02:53
- Coder le CSS 00:03:52
- JavaScript partie 1 : Gérer les inputs et le formulaire 00:08:31
- JavaScript partie 2 : Créer les cookies 00:17:20
- JavaScript partie 3 : Afficher et supprimer les cookies 00:19:55
-
L'application météo sur navigateur
- Introduction au projet 00:03:32
- Coder l'HTML et le CSS 00:10:13
- Faire une requête de base 00:08:58
- Afficher les données 00:05:21
- Gérer les erreurs possible et le loader 00:11:05
-
Coder une application de création de dégradés !
- Introduction au projet 00:02:16
- Coder l'HTML 00:05:00
- Coder le CSS 00:06:20
- JavaScript partie 1 : Gérer l'interface 00:07:14
- JavaScript partie 2 : Changer la couleur en fonction de la luminosité 00:09:02
- JavaScript partie 3 : Copier le dégradé et en créer au hasard 00:13:04
-
Pomodoro
- Introduction au projet 00:00:56
- Coder l'HTML et le CSS 00:08:58
- Afficher le temps dynamiquement 00:08:35
- Afficher le temps dynamiquement 00:08:35
- Afficher le temps dynamiquement 00:08:35
- Gérer le décompte 00:05:48
- Gérer le décompte 00:05:48
- Gérer le décompte 00:05:48
- Reset global et animation 00:13:07
- Reset global et animation 00:13:07
- Reset global et animation 00:13:07
-
Projet "Validation de données"
- Introduction au projet 00:01:30
- Coder l'HTML 00:06:22
- Coder le CSS 00:12:41
- JavaScript partie 1 : Validation de l'utilisateur et l'email 00:15:23
- JavaScript partie 2 : Validation du mot de passe 00:09:24
- JavaScript partie 3 : Afficher la force du mot de passe 00:08:22
- JavaScript partie 4 : Envoyer le formulaire 00:10:23
-
Le jeu des cartes mémoires
- Introduction au projet 00:01:03
- Coder l'HTML et le CSS 00:12:11
- JavaScript partie 1 : Mélanger les cartes et les sélectionner 00:07:52
- JavaScript partie 2 : Vérifier les résultats 00:04:07
- JavaScript partie 3 : Nombre d'essais et fin de partie 00:04:49
- JavaScript partie 4 : Remise à zéro 00:06:23
-
Intégrer un scroll infini
- Introduction au projet 00:02:31
- Coder l'HTML et le CSS 00:08:44
- JavaScript partie 1 : Appel à l'API et recherche 00:07:57
- JavaScript partie 2 : Intersection observer et push to top 00:10:47
-
Le Slider
- Introduction au projet 00:00:43
- Coder l'HTML et le CSS 00:12:32
- JavaScript partie 1 : Gérer les directions 00:05:50
- JavaScript partie 2 : Coder l'animation 00:09:37
- JavaScript partie 3 : Slide out et vérouillage 00:08:05
-
Le générateur de mots de passe
- Introduction au projet 00:01:23
- Coder l'HTML et le CSS 00:14:33
- JavaScript partie 1 : Générer un nombre au hasard dans un intervalle 00:07:36
- JavaScript partie 2 : Rajouter les ensembles de caractères 00:04:51
- JavaScript partie 3 : Créer le mot de passe 00:14:58
- JavaScript partie 4 : Intégrer la "range" et la copie de mot de passe 00:09:23
-
Coder une liste filtrable dynamiquement
- Introduction au projet 00:01:17
- Coder l'HTML 00:04:01
- Coder le CSS 00:18:04
- JavaScript partie 1 : L'appel à l'API et la création de la liste 00:09:17
- JavaScript partie 2 : Implémenter le filtre 00:09:07
-
Le lecteur personnalisé
- Introduction au projet 00:01:02
- Coder l'HTML et le CSS 00:13:26
- JavaScript partie 1 : Intégrer la lecture de la vidéo et les timers 00:13:39
- JavaScript partie 2 : Gérer la "range" et le jeu de la vidéo 00:09:01
- JavaScript partie 3 : Navigation et plein écran. 00:10:36
- Finition 00:01:28
-
Le jeu du Morpion
- Introduction au projet 00:00:44
- Coder l'HTML et le CSS 00:03:39
- Coder les fonctionnalités du Morpion 00:12:33
-
L'animation de particules
- Introduction au projet 00:00:58
- Mise en place du projet et création de la classe 00:07:47
- Remplissage du tableau et animation 00:12:34
- Connexion et resize 00:11:53
-
Coder une landing page animée
- Introduction au projet 00:00:29
- Coder l'HTML 00:09:12
- Coder le CSS partie 1 00:14:03
- Coder le CSS partie 2 00:08:45
- Coder le CSS partie 3 00:07:18
- JavaScript partie 1 : Coder le curseur et l'effet machine à écrire 00:12:26
- JavaScript partie 2 : Animation au scroll 00:12:57
-
Le jeu de la vitesse de frappe
- Introduction au projet 00:01:58
- Coder l'HTML et le CSS 00:09:09
- JavaScript partie 1 : Afficher la phrase à écrire 00:10:11
- JavaScript partie 2 : Vérification et timer 00:13:25
- JavaScript partie 3 : Perfectionnement 00:07:52
-
Coder une calculatrice complète
- Introduction au projet 00:02:02
- Coder l'HTML et le CSS 00:11:06
- JavaScript partie 1 : Gérer les chiffres et les opérateurs 00:10:49
- JavaScript partie 2 : Recoder la méthode eval() partie 1 00:17:19
- JavaScript partie 3 : Calcul de l'évaluation et récursion 00:11:16
- JavaScript partie 4 : Gérer la suppression et le reset et les finitions 00:07:47
-
Coder un lecteur audio
- Introduction au projet 00:00:41
- Coder l'HTML 00:04:04
- Coder le CSS 00:11:36
- JavaScript partie 1 : Gérer la durée et le jeu de la musique 00:12:28
- JavaScript partie 2 : Changer les musiques, shuffle, clic sur progression. 00:11:55
-
[Ancien Cours] Introduction
- Introduction gratuit 00:03:47
- Code source et conseils gratuit 00:08:08
-
[Ancien Cours] Le quizz
- Introduction Quizz gratuit 00:02:33
- Quizz : partie HTML 00:08:31
- Quizz : partie CSS 00:10:55
- Quizz : Récupérer les données en JavaScript 00:07:10
- Quizz : Obtenir les résultats 00:05:21
- Quizz : Afficher les résultats 00:07:49
- Quizz : finitions 00:07:34
-
[Ancien Cours] App météo sur navigateur
- Introduction App météo gratuit 00:02:26
- App Météo : Partie HTML gratuit 00:06:44
- App Météo : Partie CSS 00:10:22
- App Météo : Partie CSS 2 00:06:04
- App météo : premier appel à l'API gratuit 00:11:42
- App météo : gérer les données 00:08:51
- App météo : Afficher les prévisions 00:11:41
- App météo : Prévisions des jours + loader 00:10:25
-
[Ancien Cours] Le pokédex
- Intro Pokedex gratuit 00:01:18
- Pokédex : Section CSS 00:11:30
- Pokédex : Premier appel à l'API 00:04:31
- Pokédex : Gérer les données pour les avoir en FR 00:08:13
- Pokédex : Créer les cartes 00:10:10
- Pokédex : implémenter le scroll infini 00:09:16
- Pokédex : Gérer la recherche 00:08:36
- Pokédex : Animer le chargement 00:06:29
-
[Ancien Cours] Le créateur de cookies
- Introduction et HTML gratuit 00:06:04
- Partie CSS 00:04:08
- [removed] Utiliser Date pour se déplacer à la semaine suivante 00:06:10
- [removed] Remplir l'objet contenant les infos des cookies 00:07:34
- Créer un cookie. 00:05:15
- Gérer les actions autorisées. 00:08:17
- Afficher et supprimer les cookies 00:08:35
- Gérer un petit bug. 00:02:22
-
[Ancien Cours] La To-Do List.
- To-do list : HTML et CSS 00:08:33
- To-do list : Logique JS 00:12:56
-
[Ancien Cours] Projet Pomodoro
- Pomodoro : HTML - CSS 00:06:23
- Pomodoro : Affichage de base 00:06:41
- Pomodoro : Gérer les actions 00:06:32
- Pomodoro : finitions 00:07:08
-
[Ancien Cours] Validation de formulaire
- Validation HTML 00:06:24
- Validation : CSS 00:08:23
- Validation pseudo 00:06:12
- Validation de l'email 00:05:38
- Validation du mot de passe 00:11:17
- Confirmation du mot de passe 00:04:18
-
[Ancien Cours] App création de dégradés linéaires.
- Dégradés : HTML 00:03:18
- Dégradés : CSS 00:04:56
- Dégradé de base JS 00:03:41
- Rajouter des couleurs 00:09:25
- Suppression et rajout des couleurs 00:06:14
- Mise à jour des couleurs 00:06:01
-
[Ancien Cours] Jeu des cartes mémoire
- Cartes mémoire : HTML & CSS 00:09:24
- Stocker les cartes retournées 00:05:35
- Verrouiller les cartes et changer l'ordre 00:07:05
-
[Ancien Cours] Projet utilisateur GitHub
- Projet GitHub : HTML & CSS 00:06:47
- Projet GitHub créer un template avec des données JS. 00:11:09
-
[Ancien Cours] Créer un système d'authentification
- Créer une base de donnée avec Firebase 00:04:59
- Authentification : HTML & CSS 00:07:55
- Gérer les modales + inscription 00:09:13
- Connexion, déconnexion et contenu public/privé 00:07:31
-
[Ancien Cours] Le Slider
- Slider : HTML & CSS 00:08:46
- Slider : Partie JavaScript 00:09:39
-
[Ancien Cours] App de Drag & Drop
- Drag&Drop : Html / CSS 00:06:10
- Drag&Drop : ajout des événements 00:07:06
- Drag&Drop : Sélectionner une photo 00:10:06
-
[Ancien Cours] Créer des particules en JavaScript
- Particules : Html & CSS 00:10:13
- Particules : Créer un tableau contenant les objets 00:03:13
- Animer les particules 00:10:26
-
[Ancien Cours] Space Invaders
- HTML / CSS / Création de la grille. 00:11:55
- Création des aliens 00:06:46
- Déplacer les aliens 00:10:05
- Création du laser 00:05:49
- Finitions 00:05:50
-
[Ancien Cours] Le lecteur vidéo
- Lecteur vidéo : HTML & CSS 00:06:44
- Gérer le volume, le mute, et la barre orange. 00:08:32
- Pouvoir cliquer sur la barre orange 00:05:40
-
[Ancien Cours] Jeu du casse-briques
- Création de l'HTML / CSS + création de la balle et de la barre 00:06:24
- Dessiner les briques 00:07:42
- Animer le jeu 00:09:35
- Détecter les collisions 00:09:29
-
[Ancien Cours] Jeu vitesse d'écriture
- Partie HTML / CSS 00:05:11
- Afficher une phrase aléatoire 00:07:20
- Gérer l'entrée et les erreurs 00:09:09
-
[Ancien Cours] Le jeu du morpion
- Le morpion : HTML / CSS 00:03:45
- Le javaScript du jeu du morpion 00:13:35
-
[Ancien Cours] Visualiseur Audio
- Création du visualiseur audio 00:17:50
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
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...
-
C'est top merci Enzo!!!!!
-
Enzo rend les choses accessibles et ludique
-
Avec quelle version de logiciel ce tuto est-il compatible ?JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés