Projets JavaScript pour débutants : commencez à coder dès aujourd'hui

Lire un tutoriel JavaScript et le terminer sont deux expériences bien différentes.

La première donne une impression de productivité. La seconde est celle où l'on apprend vraiment. Vous enchaînez les cours de JS depuis un moment et votre code est toujours coincé dans les exercices de quelqu'un d'autre ? Eh bien, plus pour très longtemps.

Connaître les boucles ne sert à rien tant que vous n'en avez pas utilisé une pour faire fonctionner quelque chose. Les tutoriels vous apprennent les mots. Les projets vous apprennent à parler la langue.

Voici donc 18 projets JavaScript pour débutants, chacun accompagné d'un mini-guide pour savoir par où commencer. Choisissez-en un, codez-le, puis passez au suivant.

Maîtrisez d'abord les bases de JavaScript

Tous les projets JS pour débutants reposent sur les variables, les fonctions, les conditions, les boucles, les tableaux, les objets et quelques méthodes du DOM. Si tout cela n'est pas encore une seconde nature pour vous, vous passerez plus de temps à vous battre avec la syntaxe qu'à coder.

Le cours JavaScript de Coddy est conçu exactement pour cela. Des leçons de cinq minutes qui vous guident pas à pas à travers les bases du langage. Vous écrivez et exécutez votre code directement dans le navigateur au fur et à mesure. Pas d'installation, pas de configuration d'environnement, pas de « commencez par installer Node ».

Bugsy, notre assistant IA intégré, est là à chaque leçon pour vous aider dès que vous bloquez.

Si vous pouvez lire, écrire et expliquer les concepts suivants sans sourciller, vous êtes prêt. Sinon, reprenez les bases de JS sur Coddy jusqu'à ce que ce soit le cas.

• Les variables et les types primitifs (string, number, boolean)
• Les instructions if/else et switch
• Les boucles for, while et for...of
• Les fonctions et les fonctions fléchées
• Les tableaux et leurs méthodes courantes (push, pop, map, filter, find)
• Les objets et la notation par point ou crochets
• L'accès de base au DOM (querySelector, addEventListener, textContent)

Vous maîtrisez tout ça ? Parfait. C'est parti pour la pratique !

Projets pour débuter : Hello, DOM

Ces projets sont volontairement de petite taille. Ils reposent sur un ou deux concepts seulement, de sorte que si quelque chose ne fonctionne pas, vous pouvez rapidement en trouver la cause. Et surtout, ne les passez pas sous prétexte qu'ils ont l'air trop simples !

1. Le compteur classique

En quoi ça consiste : un nombre affiché à l'écran avec un bouton plus et un bouton moins.

Pourquoi c'est top : c'est la plus petite application possible qui combine HTML, CSS et JavaScript. Vous toucherez à la notion d'état (une variable qui change), aux mises à jour du DOM et aux écouteurs d'événements. Environ vingt lignes de code, à peu de chose près.

Comment le coder : un élément span pour le nombre, deux boutons. Déclarez un let count = 0. Associez des écouteurs d'événements au clic sur chaque bouton pour incrémenter ou décrémenter le compteur, puis mettez à jour le textContent du span. Défi supplémentaire : ajoutez un bouton de réinitialisation et bloquez le compteur à zéro.

2. Le calculateur de pourboire

En quoi ça consiste : saisissez le montant d'une addition et un pourcentage de pourboire, puis affichez le montant du pourboire et le total.

Pourquoi c'est top : il introduit les champs de saisie de formulaire et parseFloat, qui posent problème à presque tout le monde la première fois. Vous réaliserez aussi à quel point il est facile de fausser vos calculs si vous oubliez de gérer NaN.

Comment le coder : deux champs de saisie de type nombre (l'addition, le pourcentage), un bouton, deux spans pour l'affichage. Au clic, analysez les deux entrées, faites le calcul, arrondissez à deux décimales avec .toFixed(2) et affichez le résultat. Défi supplémentaire : ajoutez une option pour diviser la note entre plusieurs personnes.

3. Générateur de palettes de couleurs

En quoi ça consiste : cliquez sur un bouton pour obtenir une nouvelle couleur aléatoire affichée sous forme d'échantillon avec son code hexadécimal.

Pourquoi c'est top : vous manipulez des nombres aléatoires, des littéraux de gabarits (template literals) et des styles en ligne dans une toute petite application. Le résultat est visuel, ce qui rend l'exercice très gratifiant.

Comment le coder : créez une fonction qui génère trois fois un entier aléatoire entre 0 et 255, puis renvoie une chaîne de caractères du type rgb(${r}, ${g}, ${b}). Appliquez cette valeur comme couleur de fond de votre échantillon. Défi supplémentaire : générez une palette complète de cinq couleurs au lieu d'un seul échantillon.

4. Générateur de citations aléatoires

En quoi ça consiste : un bouton qui remplace la citation affichée par une autre choisie au hasard dans un tableau.

Pourquoi c'est top : idéal pour s'entraîner avec les tableaux et Math.random, avec en prime un projet sympa que vous pouvez facilement partager.

Comment le coder : définissez un tableau d'objets de citations contenant text et author. Au clic, sélectionnez un index aléatoire et mettez à jour deux éléments HTML. Défi supplémentaire : ajoutez un lien « Partager sur X » qui ouvre un tweet pré-rempli.

5. Horloge numérique

En quoi ça consiste : afficher l'heure actuelle à l'écran et la mettre à jour chaque seconde.

Pourquoi c'est top : c'est ici que vous découvrez setInterval et l'objet Date, que vous utiliserez constamment par la suite. Ajouter un zéro devant les minutes et les secondes à un seul chiffre est un excellent petit exercice de logique.

Comment le coder : créez une fonction qui récupère new Date(), formate les heures, minutes et secondes, puis les écrit dans un span. Englobez le tout dans un setInterval(updateClock, 1000). Défi supplémentaire : ajoutez un bouton pour basculer entre le format 12 heures et 24 heures.

6. Calculateur d'IMC

En quoi ça consiste : saisissez votre taille et votre poids, puis obtenez votre valeur d'IMC et la catégorie correspondante.

Pourquoi c'est top : un cas concret d'utilisation de conditions pour déterminer quel message afficher. C'est aussi l'occasion de s'entraîner à créer une mise en page de formulaire propre.

Comment le coder : créez des champs de saisie numériques pour la taille (en cm) et le poids (en kg). Lors de la validation, calculez l'IMC avec la formule standard, utilisez une structure if/else pour déterminer la catégorie, puis affichez les deux valeurs. Défi supplémentaire : ajoutez un bouton pour basculer vers les unités impériales.

Projets intermédiaires : plus de pièces mobiles

Après avoir réalisé quelques projets, vous commencerez à remarquer des schémas répétitifs. Un clic sur un bouton modifie une variable, une fonction met à jour l'interface utilisateur en fonction de cette variable, et ainsi de suite. C'est l'essence même du développement frontend. Ces projets vous demanderont de jongler avec un peu plus d'états à la fois.

7. Liste de tâches (To-do List)

En quoi ça consiste : saisissez une tâche, appuyez sur Entrée, et elle apparaît dans une liste. Cliquez sur un élément pour le marquer comme terminé. Cliquez sur la croix pour le supprimer.

Pourquoi c'est top : ce n'est pas pour rien que c'est le « Hello World » des frameworks frontend. Vous allez manipuler un tableau, l'afficher dans le DOM et gérer deux ou trois événements. Si vous arrivez à coder une liste de tâches de A à Z, vous n'êtes officiellement plus un parfait débutant.

Comment le coder : gérez un tableau d'objets de tâches contenant id, text et done. Regénérez l'affichage sous forme de liste <ul> après chaque modification. À l'appui sur Entrée, ajoutez une nouvelle tâche. Au clic, basculez l'état done ou utilisez splice pour retirer l'élément du tableau. Défi supplémentaire : sauvegardez les données dans le localStorage pour que les tâches persistent après un rafraîchissement de la page.

8. Chronomètre avec temps intermédiaires

En quoi ça consiste : un chronomètre doté de boutons de démarrage, d'arrêt, de réinitialisation et d'un bouton pour enregistrer des temps intermédiaires (tours).

Pourquoi c'est top : plus complexe que l'horloge, car vous devez gérer votre propre variable de temps écoulé au lieu de simplement interroger le système. Vous toucherez à Date.now(), aux intervalles et à la logique de pause.

Comment le coder : stockez un startTime et un accumulateur elapsed. Au démarrage, définissez startTime = Date.now() et lancez un intervalle. À l'arrêt, faites elapsed += Date.now() - startTime. Pour un temps intermédiaire, ajoutez la valeur actuelle dans un tableau et affichez-la. Défi supplémentaire : formatez proprement les millisecondes.

9. Minuteur Pomodoro

En quoi ça consiste : 25 minutes de travail, 5 minutes de pause, et on recommence. Un signal sonore retentit lorsqu'il est temps de changer de phase.

Pourquoi c'est top : une excellente introduction aux machines à états pour les débutants. Vous naviguez entre les états « travail », « pause » ou « en pause », et l'interface s'adapte en conséquence.

Comment le coder : utilisez le même principe d'intervalle que pour le chronomètre, mais en compte à rebours. Suivez le mode actif. Lorsque le minuteur atteint zéro, changez de mode et jouez un court son avec new Audio('beep.mp3').play(). Défi supplémentaire : ajoutez un compteur de sessions de travail terminées dans la journée.

10. Application de Quiz

En quoi ça consiste : un questionnaire à choix multiples qui affiche votre score à la fin.

Pourquoi c'est top : combine l'itération de tableaux, les conditions et une gestion simple des états d'affichage (question en cours, écran de résultats).

Comment le coder : définissez un tableau d'objets de questions contenant text, options et correctIndex. Affichez une question à la fois. Au clic sur une réponse, comparez-la avec correctIndex, augmentez le score et passez à l'index suivant. Quand il n'y a plus de questions, affichez l'écran des résultats. Défi supplémentaire : ajoutez un minuteur pour chaque question.

11. Générateur de mots de passe

En quoi ça consiste : choisissez une longueur et les types de caractères à inclure, puis obtenez un mot de passe aléatoire.

Pourquoi c'est top : vous manipulez des chaînes de caractères, de l'aléatoire et des cases à cocher en même temps. De plus, c'est un outil réellement utile au quotidien, ce qui est rare pour un projet d'entraînement.

Comment le coder : créez quatre groupes de caractères (minuscules, majuscules, chiffres, symboles). Fusionnez les groupes actifs selon les cases cochées. Faites une boucle de n itérations en choisissant un caractère aléatoire dans le groupe combiné. Défi supplémentaire : ajoutez un indicateur de force qui évalue la sécurité du mot de passe généré.

12. Validateur de formulaire

En quoi ça consiste : un formulaire d'inscription qui met en évidence les champs invalides en rouge et affiche un message d'erreur sous chacun d'eux.

Pourquoi c'est top : c'est une tâche extrêmement courante en développement web réel. Vous manipulerez des expressions régulières (Regex), des événements de focus et du DOM, le tout autour d'un formulaire classique.

Comment le coder : écrivez de petites fonctions de validation pour chaque champ (format de l'e-mail, longueur du mot de passe, correspondance des mots de passe). Lors de la perte de focus (blur), lancez le validateur, ajoutez ou retirez une classe CSS sur le champ et mettez à jour le span d'erreur. Lors de la soumission, ne validez que si tous les tests réussissent. Défi supplémentaire : activez la validation en temps réel après la première perte de focus.

Mini-jeux : là où ça devient amusant

Les jeux vous poussent à aller plus loin car ils impliquent un état continu, de la gestion du temps et de l'interaction. La première fois que vous faites bouger des pixels sur un canvas, vous comprenez enfin la véritable puissance de JavaScript.

13. Pierre-Feuille-Ciseaux

En quoi ça consiste : choisissez pierre, feuille ou ciseaux. L'ordinateur fait son choix également. Découvrez qui gagne.

Pourquoi c'est top : un excellent exercice sur les conditions et l'aléatoire, avec un dénouement victoire/défaite immédiat et gratifiant.

Comment le coder : créez trois boutons pour le choix du joueur. Au clic, l'ordinateur choisit au hasard parmi les trois mêmes options. Utilisez une structure de correspondance simple (ou des if/else imbriqués) pour déterminer le résultat. Suivez le score au fil des manches. Défi supplémentaire : faites une partie en 3 manches gagnantes avec un écran de victoire.

14. Morpion (Tic-Tac-Toe)

En quoi ça consiste : le jeu classique sur une grille de 3x3, où deux joueurs jouent à tour de rôle sur le même écran.

Pourquoi c'est top : vous découvrez comment utiliser un tableau de 9 éléments pour représenter une grille 2D et comment vérifier des conditions de victoire. C'est toujours gratifiant de coder un jeu aussi emblématique.

Comment le coder : affichez neuf cases. Suivez le tour de rôle. Au clic sur une case, placez le symbole du joueur actif et vérifiez si l'une des huit combinaisons gagnantes est complétée. Affichez une bannière de victoire le cas échéant. Défi supplémentaire : créez une IA basique qui choisit une case vide au hasard.

15. Jeu de Memory

En quoi ça consiste : une grille de cartes face cachée. Cliquez sur deux cartes. Si elles correspondent, elles restent visibles. Sinon, elles se retournent.

Pourquoi c'est top : mélange de tableaux, gestion des délais et condition de victoire claire. La première fois que vous coderez la logique du « retournement après une seconde », vous comprendrez enfin l'utilité de setTimeout.

Comment le coder : doublez un tableau de valeurs pour créer des paires, puis mélangez-le (avec l'algorithme de Fisher-Yates). Affichez les cartes face cachée. Au clic, révélez la carte. Lorsque deux cartes sont visibles, comparez-les : si elles correspondent, verrouillez-les ; sinon, retournez-les après un court délai. Le jeu se termine quand toutes les paires sont trouvées. Défi supplémentaire : ajoutez un compteur de coups et un système de meilleur score sauvegardé dans le localStorage.

16. Jeu du juste prix (Devine le nombre)

En quoi ça consiste : l'ordinateur choisit un nombre entre 1 et 100. Vous devez le deviner. Il vous indique « plus grand » ou « plus petit » jusqu'à ce que vous trouviez la bonne réponse.

Pourquoi c'est top : simple mais efficace pour apprendre à gérer les saisies, les comparaisons et la logique de boucle jusqu'à obtention du bon résultat.

Comment le coder : générez un nombre cible au début. Suivez le nombre de tentatives. À chaque essai, comparez-le à la cible et mettez à jour le message d'indication. Bloquez les saisies une fois le nombre trouvé. Défi supplémentaire : limitez le joueur à sept essais, avec un écran de fin de partie s'il échoue.

17. Le jeu du Pendu

En quoi ça consiste : l'ordinateur choisit un mot. Vous devinez les lettres une par une. Chaque mauvaise réponse dessine une partie du pendu.

Pourquoi c'est top : c'est le projet idéal pour ne plus avoir peur de manipuler les chaînes de caractères. Construire l'affichage des lettres trouvées vous fera utiliser split, map et join d'un seul coup.

Comment le coder : choisissez un mot dans un tableau. Affichez un tiret bas par lettre. À chaque fois que le joueur propose une lettre, révélez ses positions ou enregistrez une erreur. Dessinez le pendu par étapes (généralement six erreurs autorisées) en utilisant du CSS ou un canvas. Défi supplémentaire : chargez des mots depuis une API de dictionnaire public.

18. Le jeu du Serpent (Snake)

En quoi ça consiste : le jeu classique du serpent : mangez la nourriture pour grandir, mais attention à ne pas vous mordre la queue ou percuter un mur.

Pourquoi c'est top : c'est le « boss final » des projets pour débutants. Vous toucherez à la gestion d'une grille (canvas ou CSS), aux événements clavier, à la boucle de jeu (game loop), à la détection de collisions et à la logique de croissance.

Comment le coder : générez une grille avec du CSS ou un <canvas>. Représentez le serpent sous forme de tableau d'objets de coordonnées. À chaque étape (tick), déplacez le serpent d'une case dans la direction actuelle. Si la nouvelle tête se trouve sur la nourriture, faites grandir le serpent et générez une nouvelle nourriture. Si la tête touche un mur ou une partie de son corps, c'est le game over. Écoutez les touches fléchées pour changer de direction. Défi supplémentaire : augmentez la vitesse du jeu à mesure que le score augmente.

Bonus : Une application météo

En quoi ça consiste : saisissez une ville et obtenez la température actuelle ainsi qu'une description du temps.

Pourquoi c'est top : votre premier vrai contact avec une API publique et le code asynchrone. N'importe quelle API météo gratuite fera l'affaire.

Comment le coder : récupérez une clé d'API gratuite. Lors de la validation, utilisez fetch en intégrant la ville dans l'URL. Attendez la réponse, analysez le JSON et mettez à jour le DOM avec les données reçues. Enveloppez le tout dans un bloc try/catch pour éviter qu'un nom de ville incorrect ne fasse planter l'interface. Défi supplémentaire : ajoutez des prévisions sur cinq jours.

Comment terminer les projets que vous commencez

Cette liste ne vous servira à rien si vous commencez la moitié des projets pour les abandonner en cours de route. Voici quelques conseils pour aller jusqu'au bout :

• Choisissez le plus petit projet qui vous enthousiasme. L'enthousiasme vous pousse à commencer. La simplicité vous permet de finir. Ensuite, recommencez.
• Fixez-vous une limite de temps, pas de contenu. Accordez-vous une heure ou deux de concentration maximale pour un projet de démarrage. Si vous ne terminez pas, ce n'est pas un échec, c'est simplement une indication sur les points qui vous bloquent.
• Codez d'abord, peaufinez ensuite. Créez une version fonctionnelle mais moche avant de toucher au CSS. Un projet magnifique mais buggé est bien pire qu'un projet moche mais fonctionnel.
• Évitez de sauter de tutoriel en tutoriel. Regarder trois vidéos différentes sur le même projet signifie que vous avez perdu du temps sans écrire une seule ligne de code. Codez de manière imparfaite, puis cherchez des solutions spécifiques pour les points précis qui vous bloquent.
• Entraînez-vous sur les bases les jours où vous ne pouvez pas coder. Cinq minutes sur Coddy dans le bus, c'est une vraie session de travail. Et cela maintient votre série d'apprentissage active.

Ce dernier point est le plus important. Les projets concrétisent vos connaissances, mais ils reposent entièrement sur les bases. De courtes leçons quotidiennes permettent d'éviter que ces projets ne vous paraissent insurmontables.

Le rôle de Coddy là-dedans

Il ne s'agit pas ici de vous vendre un outil spécifique pour coder ces projets. Utilisez l'éditeur de texte de votre choix, lancez vos scripts dans le navigateur et hébergez-les où bon vous semble.

Le rôle de Coddy intervient en amont : rendre vos bases en JavaScript suffisamment solides pour que « créer un quiz » ne se transforme pas en « passer deux heures sur Google à chercher ce que fait .map ».

Coddy a enseigné le JavaScript à des millions d'apprenants sur le web, iOS et Android. Les mêmes leçons, la même progression et le même Bugsy vous accompagnent partout.

La version gratuite couvre l'intégralité des leçons de JS sans aucune configuration requise. Votre seule limite est un système d'énergie qui se recharge après quelques heures.

Vous voulez des sessions illimitées et l'aide de Bugsy à chaque étape ? Les abonnements payants coûtent environ la moitié du prix des plateformes concurrentes. Dans tous les cas : d'abord les bases, ensuite les projets.