Créer des projets est très important pour enrichir votre portfolio de développement web. Transformer une idée en un projet réel peut vous aider à pratiquer et à comprendre des concepts et des techniques clés.

Nous venons de publier un cours de 3 heures en français sur la chaîne YouTube française de freeCodeCamp qui vous apprendra à construire 7 projets avec HTML, CSS et JavaScript.

Si vous avez des amis francophones, n'hésitez pas à partager avec eux la version française de cet article.

Projets du cours

Jeu du Serpent

Dans ce projet, vous travaillerez avec la balise HTML canvas, CSS et JavaScript pour créer le classique jeu du Serpent qui vous procurera de nombreuses heures de divertissement.

Dans ce jeu, le joueur contrôle un serpent qui se déplace dans un environnement en forme de grille. Le but est de manger la "nourriture" qui apparaît à des emplacements aléatoires, mais faites attention car la nourriture fait grandir le serpent en longueur. Si le serpent entre en collision avec lui-même, la partie est terminée.

Image Le jeu du Serpent que vous allez construire

Chronomètre

Suivez le temps avec ce chronomètre génial que vous pouvez démarrer, mettre en pause, arrêter et redémarrer. Vous le construirez étape par étape avec HTML, CSS et JavaScript.

Image Le chronomètre que vous allez construire

Chiffre de César

Le chiffre de César est une technique de cryptage utilisée par Jules César dans la Rome antique. Il fonctionne en décalant chaque lettre de l'alphabet d'un nombre fixe de positions.

Vous utiliserez HTML, CSS et JavaScript pour construire une interface utilisateur où vous pourrez utiliser cette technique pour crypter vos messages et obtenir le texte crypté.

Image Le chiffre de César que vous allez construire

Calculatrice interactive

Une calculatrice interactive est un projet qui devrait figurer dans le portfolio de chaque développeur web. Vous construirez cette calculatrice interactive étape par étape avec HTML, CSS et JavaScript.

Image L'application de calculatrice que vous allez construire

Liste de tâches

Vous construirez ce projet de liste de tâches avec HTML, CSS et JavaScript. C'est l'occasion parfaite de pratiquer vos compétences en manipulation du DOM en ajoutant, triant et marquant les tâches comme terminées.

Image La liste de tâches que vous allez construire

Jeu du Pendu

Vous construirez une version graphique du classique jeu du Pendu en utilisant la balise HTML canvas, CSS et JavaScript. Le pendu sera dessiné étape par étape lorsque l'utilisateur fera des erreurs. Si le pendu est complété, vous perdez la partie !

Image Le jeu que vous allez construire

Générateur de palette de couleurs

Enfin, vous construirez un générateur de palette de couleurs interactif qui vous donnera un nouvel ensemble de couleurs si vous cliquez sur le bouton "Générer une palette". Il sera mis à jour automatiquement.

Image Le générateur de palette de couleurs que vous allez construire

Préparez-vous à pratiquer vos compétences en HTML, CSS et JavaScript en construisant ces projets. Vous travaillerez également avec le DOM et la balise HTML canvas pour créer des interfaces utilisateur interactives.

À la fin du cours, vous serez en mesure de construire vos propres projets interactifs.

💡 Conseil : Veuillez noter qu'il serait utile d'avoir quelques connaissances en HTML, CSS et JavaScript avant de suivre ce cours. Si vous souhaitez réviser ces sujets, nous avons des cours d'introduction sur la chaîne.

Vous pouvez regarder le cours sur la chaîne YouTube française de freeCodeCamp :

📝🸏 Cours créé par Manuel Basanta.