20 projets en JavaScript natif : codez des applis web complètes sans aucun framework

Vous avez lu des dizaines de tutos JavaScript, suivi des cours de syntaxe, peut-être même commencé React. Et devant un fichier vide, plus rien ne vient. Le problème n'est pas la théorie, c'est le nombre de fois où vous avez écrit du code de bout en bout. Vingt applications web codées intégralement en JavaScript natif, sans librairie, sans framework, sans rien à installer. Vous partez d'une page blanche et vous finissez avec quelque chose qui marche, vingt fois de suite.

JavaScript natif : ce que vous saurez faire

Ce que vous emportez d'ici ne dépend d'aucune version de framework.

• Décider si le navigateur sait déjà faire, avant d'installer une librairie
• Aller chercher des données sur une API et décider quoi afficher quand elle tombe
• Écrire dans le DOM sans ouvrir une faille d'injection
• Organiser un projet en classes quand la suite de fonctions ne tient plus
• Animer une interface à la main, en maîtrisant la boucle de rendu
• Relire votre code deux jours après et le refactorer sans tout casser

Les 20 projets que vous codez réellement

La liste n'a pas été choisie pour faire nombre. Elle balaie les familles de problèmes qu'on retrouve dans n'importe quelle application : un simulateur de prêt et une app météo pour les données et les APIs, un quiz et une validation de formulaire pour les entrées utilisateur, un scroll infini et une liste filtrable pour l'affichage de collections, un lecteur vidéo et un lecteur audio pour les médias, un morpion, un memory et un jeu de vitesse de frappe pour la logique de partie, des particules sur canvas et un curseur animé pour le rendu, et une calculatrice qui finit sur une évaluation récursive. Le code source complet est fourni, mais tout est construit pour que vous tapiez vous-même. La durée affichée couvre aussi deux éditions antérieures du programme, laissées en archive.

Pourquoi ce JavaScript ne se périme pas

Ce qui est enseigné ici, c'est le JavaScript du navigateur, pas celui d'un outil. fetch, les classes, l'Intersection Observer, le canvas, les événements : ce sont des standards, et ils n'ont pas bougé depuis l'enregistrement. Les versions annuelles du langage ajoutent des commodités par-dessus, elles ne remplacent rien de ce que vous codez dans ces vingt projets. Si les fondamentaux vous manquent encore, Le JavaScript de A à Z du même formateur pose la théorie que ces projets mettent en mouvement.

Pour qui

Le badge affiche Débutant et c'est vrai du rythme : tout est expliqué ligne par ligne, sans saut. Il faut quand même être déjà passé par une boucle, une condition et une fonction, et ne pas être gêné par HTML et CSS, puisque chaque projet commence par son interface. Les premiers projets restent doux, les derniers montent franchement, la calculatrice et le lecteur audio en particulier. C'est voulu : on progresse en se frottant à ce qui dépasse.

Pour aller plus loin

Si vous voulez enchaîner sur le même format côté framework, Coder 10 projets avec React reprend exactement cette logique de projet par projet. Si c'est la logique elle-même qui coince, les tris, les recherches, les structures de données, Apprenez à résoudre des algorithmes en JavaScript travaille ce muscle-là. Et si l'objectif est un métier plutôt qu'une compétence, la formation Développeur Web Front-End mène au titre RNCP avec un mentor et un examen.