Enfin des projets en JavaScript natif ! ☀️
Le web est inondé de Frameworks, de librairies et d’outils en JavaScript, mais il reste très à sec quand il s’agit du langage en lui-même, quand il s’agit de JavaScript natif.
Déjà qu’il n’y a pas trop de contenu en Anglais sur le JS natif.
Alors en Français …
C’est pour remédier à ça que j’ai tourné ce cours « 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, à 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 erreur, une solution de fortune, 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 devenir developpeur JS, on code en JavaScript.
Alors retroussons-nous les manches et attaquons ces projets !
La liste des projets que nous allons effectuer :
1. Application "calcul d'IMC".
2. Quizz.
3. Recherche Wikipedia.
4. Un créateur de cookies.
5. Une application météo.
6. Un créateur de dégradés en JS.
7. Une app "Pomodoro".
8. Un système de validation de mot de passe dans un formulaire.
9. Créer un jeu de cartes mémoires.
10. Créer un système de scroll infini, comme Pinterest, Instagram, Unsplash...
11. Coder un slider stylé et animé.
12. Un générateur de mots de passe.
13. Une liste d'utilisateurs filtrable.
14. Un lecteur vidéo personnalisé, comme Youtube.
15. Le jeu du morpion sur navigateur.
16. Une animations de particules en JavaScript.
17. Une landing page animée super stylée.
18. Un jeu qui calcule notre vitesse de frappe au clavier.
19. Une calculatrice complète.
20. Un lecteur audio stylé.
Avec ça tu as vraiment de quoi te familiariser avec ce langage, nous traiterons de sujets comme :
- Gérer des données et les intégrer.
- 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 et coder dans un style orienté fonction.
- Gérer toutes sortes d’évenement.
- Voir l’utilisation du DOM en profondeur, une des clés pour bien comprendre JS.
- Etc … On va vraiment voir beaucoup de choses !
A qui s’adresse ce cours ?
Ce cours s’adresse aux personnes ayant un niveau débutant/intermédiaire, 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, des conditions, et manipulé une page web en JS, tu as les connaissances de bases requises.
Sympa hein ? Rendez-vous de l'autre côté pour commencer à coder.
Votre instructeur

Développeur web, créateur et entrepreneur.
Cette École est née comme une réponse au manque de contenu Français concernant le Développement Web.
L'écosystème Front-End/Back-End/Full-Stack est devenu une vraie pieuvre tentaculaire et on se retrouve très rapidement submergé de tonnes de Frameworks, librairies et autres langages à devoir maîtriser si l'on veut rester compétitif et à jour.
Ce site a pour vocation de réunir des ressources et de t'apprendre tout ces concepts rapidement et efficacement, afin de te permettre de plonger au plus vite dans le monde professionnel et ce dans les meilleures conditions.
Curriculum du cours
-
VoirIntroduction (5:33)
-
VoirExplication de la BEM notation (6:20)
-
VoirCoder l'HTML partie 1 (8:28)
-
VoirCoder l'HTML partie 2 (9:12)
-
VoirCoder le CSS partie 1 (8:26)
-
VoirCoder le CSS partie 2 (8:47)
-
VoirJavaScript : Gérer les inputs range (7:15)
-
VoirJavaScript : Mettre à jour l'interface (6:53)
-
VoirJavaScript : Afficher les valeurs du prêt (5:23)
-
VoirIntroduction (2:47)
-
VoirCoder l'HTML et le CSS partie 1 (6:56)
-
VoirCoder l'HTML et le CSS partie 2 + effet fade (8:04)
-
VoirJavaScript : Utilisation de fetch afin d'effectuer une requête HTTP GET (8:00)
-
VoirJavaScript : Afficher les données (5:15)
-
VoirJavaScript : Gestion des erreurs (10:34)
-
VoirIntroduction (3:10)
-
VoirCoder l'HTML du quiz (3:45)
-
VoirJavaScript : Utiliser un fragment (10:56)
-
VoirJavaScript : Gérer les inputs (6:19)
-
VoirJavaScript : Attaque XSS et innerHTML (6:55)
-
VoirJavaScript : Récupérer les résultats (7:33)
-
VoirJavaScript : Afficher le résultat (7:09)
-
VoirJavaScript : Gérer les couleurs (8:55)
-
VoirAjouter le CSS du quiz ✨ (12:46)
-
VoirIntroduction (2:04)
-
VoirCoder l'HTML (6:41)
-
VoirCoder le CSS (14:47)
-
VoirJavaScript : Validation côté Front (5:41)
-
VoirJavaScript : Coder un cookie (12:30)
-
VoirJavaScript : Afficher un cookie après sa création (7:53)
-
VoirJavaScript : Supprimer un cookie (3:57)
-
VoirJavaScript : Afficher les cookies déjà présents (5:26)
-
VoirJavaScript : Créer un toast (4:42)
-
VoirJavaScript : Gérer la modification d'un cookie (13:29)
-
VoirCoder l'HTML (5:09)
-
VoirIntroduction (0:38)
-
VoirCoder le CSS partie 1 (6:10)
-
VoirCoder le CSS partie 2 (4:38)
-
VoirJavaScript : Gérer l'ajout des couleurs de base (5:07)
-
VoirJavaScript : Changement d'angle et de couleur (7:40)
-
VoirJavaScript : Modifier la couleur du texte sur les inputs dynamiquement (4:42)
-
VoirJavaScript : Copier le dégradé partie 1 (7:32)
-
VoirJavaScript : Copier le dégradé partie 12 (9:16)
-
VoirJavaScript : Créer un dégradé aléatoire (5:43)
-
VoirCoder l'HTML (5:23)
-
VoirIntroduction (0:39)
-
VoirCoder le CSS partie 1 (7:45)
-
VoirCoder le CSS partie 2 (5:53)
-
VoirJavaScript : Récupérer les informations de direction partie 1 (7:26)
-
VoirJavaScript : Récupérer les informations de direction partie 2 (4:41)
-
VoirJavaScript : Animer les slides partie 1 (10:24)
-
VoirJavaScript : Animer les slides partie 2 (6:38)
-
VoirIntroduction (2:17)
-
VoirCoder l'HTML (9:22)
-
VoirCoder le CSS (12:12)
-
VoirJavaScript : Animation lors de l'échec de la validation (8:29)
-
VoirJavaScript : Afficher les erreurs de validation (10:26)
-
VoirJavaScript : Valider le nom d'utilisateur (5:17)
-
VoirJavaScript : Valider l'e-mail (5:50)
-
VoirJavaScript : Valider le mot de passe (9:49)
-
VoirValider la confirmation de mot de passe (8:55)
-
VoirIntroduction (0:47)
-
VoirCoder l'HTML (2:46)
-
VoirCoder le CSS partie 1 (5:13)
-
VoirCoder le CSS partie 2 (6:49)
-
VoirJavaScript : Mélanger les cartes (8:31)
-
VoirJavaScript : Afficher les cartes (7:33)
-
VoirJavaScript : Intégrer le reset (6:50)
-
VoirJavaScript : Retourner les cartes (8:04)
-
VoirJavaScript : Vérifier la fin de la partie (9:31)
-
VoirIntroduction (1:19)
-
VoirCoder l'HTML (4:44)
-
VoirCoder le CSS partie 1 (7:36)
-
VoirCoder le CSS partie 2 (2:45)
-
VoirJavaScript : Toggle l'interface (9:34)
-
VoirJavaScript : Ajouter l'animation (4:56)
-
VoirJavaScript : Gérer le "tick" (9:08)
-
VoirJavaScript : Mettre à jour le temps restant (6:54)
-
VoirJavaScript : Gérer le changement de période (7:47)
-
VoirJavaScript : Gérer la pause (3:42)
-
VoirJavaScript : Intégrer le reset (5:42)
-
VoirCoder l'HTML (6:16)
-
VoirIntroduction (2:56)
-
VoirCoder le CSS partie 1 (4:19)
-
VoirCoder le CSS partie 2 (7:19)
-
VoirJavaScript : Récupérer les ensembles de caractères séléctionnés (5:56)
-
VoirJavaScript : Ajouter les caractères obligatoires (3:10)
-
VoirJavaScript : Générer un nombre aléatoire (6:53)
-
VoirJavaScript : Finir la génération (7:24)
-
VoirIntroduction (0:49)
-
VoirCoder l'HTML (7:47)
-
VoirCoder le CSS partie 1 (10:37)
-
VoirJavaScript : Lancer la vidéo (4:56)
-
VoirJavaScript : Afficher la durée de la vidéo (6:41)
-
VoirJavaScript : Gérer la barre de progression (4:09)
-
VoirJavaScript : Gérer le clic sur la barre de progression (6:37)
-
VoirJavaScript : Intégrer la sourdine et le mode plein écran (8:27)
-
VoirIntroduction (1:14)
-
VoirJavaScript : Mise en place du canvas et de la classe Particle (8:51)
-
VoirJavaScript : Remplir le tableau de particules (8:36)
-
VoirJavaScript : Animer et gérer le resizing (5:06)
-
VoirJavaScript : Comment fonctionne RAF ? (3:43)
-
VoirJavaScript : Dessiner les lignes entre les points (9:51)
-
VoirIntroduction (1:05)
-
VoirCoder l'HTML du header et du curseur (7:34)
-
VoirCoder le CSS du header et du curseur (12:54)
-
VoirJavaScript : Animation du curseur partie 1 (9:21)
-
VoirJavaScript : Animation du curseur partie 2 (9:46)
-
VoirJavaScript : Effet machine à écrire (3:32)
-
VoirCoder l'HTML/CSS des voitures (12:41)
-
VoirJavaScript : Animation au scroll (7:30)
-
VoirIntroduction (1:16)
-
VoirCoder l'HTML (4:51)
-
VoirCoder le CSS (12:56)
-
VoirJavaScript : Afficher une phrase (7:40)
-
VoirJavaScript : Gérer le chrono (7:55)
-
VoirJavaScript : Vérifier les spans (11:36)
-
VoirJavaScript : Intégrer le reset (4:58)
-
VoirJavaScript : Afficher des phrases aléatoires (3:14)
-
VoirIntroduction (1:25)
-
VoirCoder l'HTML (10:46)
-
VoirCoder le CSS partie 1 (9:05)
-
VoirCoder le CSS partie 2 (10:50)
-
VoirJavaScript : Afficher les données de la première musique (5:09)
-
VoirJavaScript : Gérer le play/pause (2:42)
-
VoirJavaScript : Afficher les valeurs de durée (5:09)
-
VoirJavaScript : Intégrer la barre de progression (5:12)
-
VoirJavaScript : Changer de musique (5:21)
-
VoirJavaScript : Refactoring (2:45)
-
VoirJavaScript : Ajouter le mode aléatoire (5:12)
-
VoirIntroduction (1:00)
-
VoirCoder l'HTML et le CSS (9:59)
-
VoirJavaScript : Ajouter des chiffres au calcul (7:51)
-
VoirJavaScript : Ajouter des opérateurs (9:56)
-
VoirJavaScript : Ajouter un nombre à virgule (11:09)
-
VoirJavaScript : Gérer le bouton de résultat (5:17)
-
VoirJavaScript : Récupérer un opérateur et son index (7:49)
-
VoirJavaScript : Obtenir les opérandes et les limites du calcul à effectuer (8:19)
-
VoirJavaScript : Calculer un résultat (4:59)
-
VoirJavaScript : Effectuer un calcul par récursion (6:46)
-
VoirJavaScript : Gérer les virgules à afficher (9:19)
-
VoirJavaScript : Implémenter le reset et la supression du dernier caractère (6:54)
-
VoirIntroduction au projet (1:29)
-
VoirCoder l'HTML (6:22)
-
VoirCoder le CSS (12:40)
-
VoirJavaScript partie 1 : Validation de l'utilisateur et l'email (15:23)
-
VoirJavaScript partie 2 : Validation du mot de passe (9:23)
-
VoirJavaScript partie 3 : Afficher la force du mot de passe (8:22)
-
VoirJavaScript partie 4 : Envoyer le formulaire (10:22)
-
VoirIntroduction au projet (1:03)
-
VoirCoder l'HTML et le CSS (12:10)
-
VoirJavaScript partie 1 : Mélanger les cartes et les sélectionner (7:52)
-
VoirJavaScript partie 2 : Vérifier les résultats (4:06)
-
VoirJavaScript partie 3 : Nombre d'essais et fin de partie (4:48)
-
VoirJavaScript partie 4 : Remise à zéro (6:23)
-
VoirIntroduction au projet (1:23)
-
Voircoder l'HTML et le CSS (14:33)
-
VoirJavaScript partie 1 : Générer un nombre au hasard dans un intervalle (7:36)
-
VoirJavaScript partie 2 : Rajouter les ensembles de caractères (4:51)
-
VoirJavaScript partie 3 : Créer le mot de passe (14:58)
-
VoirJavaScript partie 4 : Intégrer la "range" et la copie de mot de passe (9:23)
-
VoirIntroduction au projet (1:02)
-
VoirCoder l'HTML et le CSS (13:26)
-
VoirJavaScript partie 1 : Intégrer la lecture de la vidéo et les timers (13:39)
-
VoirJavaScript partie 2 : Gérer la "range" et le jeu de la vidéo (9:00)
-
VoirJavaScript partie 3 : Navigation et plein écran. (10:36)
-
VoirFinition (1:27)
-
VoirIntroduction au projet (2:02)
-
VoirCoder l'HTML et le CSS (11:05)
-
VoirJavaScript partie 1 : Gérer les chiffres et les opérateurs (10:49)
-
VoirJavaScript partie 2 : Recoder la méthode eval() partie 1 (17:18)
-
VoirJavaScript partie 3 : Calcul de l'évaluation et récursion (11:15)
-
VoirJavaScript partie 4 : Gérer la suppression et le reset et les finitions (7:47)