Sommes honnêtes dès le départ. Peu importe le nombre de livres sur la programmation que vous lisez, de vidéos que vous regardez ou de podcasts que vous écoutez, si vous voulez devenir un meilleur développeur, vous devez pratiquer continuellement.
Dans l’espace front-end, beaucoup de frameworks existent : React, Angular, Vue, pour n’en citer que quelques-uns. Chacun d’entre eux est génial et sans eux, le développement front-end ne serait pas dans son état actuel. Mais ce que ces frameworks, outre toutes leurs différences, ont en commun, c’est qu’ils sont tous basés sur JavaScript. Oui, ce bon vieux JS !
JavaScript est ce qui fait tourner le web aujourd’hui, sans aucun doute. Et pour tout développeur front-end, qu’il soit déjà expérimenté ou en début de carrière, il est obligatoire de connaître les bases de JavaScript, HTML et CSS.
Les frameworks vont et viennent, mais JavaScript restera ! Mais quelle est la meilleure façon de pratiquer JavaScript ? La meilleure réponse que je puisse vous donner est de construire des projets !
Projets JavaScript
Les projets JavaScript sont des tutoriels guidés ou des idées de projets JavaScript qui vous aident à aiguiser vos compétences en construisant de véritables applications, sites Web, jeux, composants, etc. Parfois, vous trouverez des idées de projets qui contiennent juste un titre et quelques phrases de ce que vous devez construire.
Exemple : Construire un compteur avec JavaScript qui décompte les heures jusqu’à la fin de l’année.
Ce format est bon si vous avez déjà un peu d’expérience et que vous cherchez simplement des idées.
Projets JavaScript pour les débutants
Cependant, si vous êtes nouveau dans le développement web, il est souvent préférable de chercher des exemples de projets JavaScript avec le code source ou des projets JavaScript spécifiques pour les débutants. Ceux-ci contiennent souvent une application de démonstration en cours d’exécution, un dépôt GitHub avec le code source, et un guide étape par étape sur la façon de construire le projet.
Projets de pratique JavaScript
Donc, pour que vous puissiez gagner en pratique, j’ai listé neuf idées de projets javascript géniales que vous pouvez faire pour rafraîchir vos compétences, apprendre de nouvelles choses sur le JS, et rester pertinent à l’avenir. Tous ces projets sont basés sur du JavaScript pur, du HTML et du CSS. Vous pouvez les ajouter à votre portfolio, les montrer à des recruteurs ou à des employeurs potentiels, ou les conserver dans votre GitHub comme références pour un travail futur. Soyons clairs : il ne s’agit pas de tout vous apprendre sur JavaScript. Il existe des cours parfaits pour vous qui couvrent JS de A à Z. Il s’agit de construire des choses. Se salir les mains. Travailler sur votre mémoire musculaire.
Vue d’ensemble des projets JavaScript
- Construire une application de méditation JavaScript
- Construire un projet de clavier virtuel JavaScript
- Construire un projet de panier d’achat eCommerce JavaScript
- Construire une application météo JavaScript
- Construire un projet JavaScript de suivi des problèmes
- Construire un projet JavaScript de bloc-notes
- Construire un projet JavaScript de page d’accueil
- Construire un projet JavaScript de jeu Roche Papier Ciseaux
- Construire un projet JavaScript de jeu Tic Tac Toe
- Bonus : Construire des mini-projets JavaScript 9 en 1
- Bonus : idées de projets JavaScript pour débutants
- Bonus : idées de projets JavaScript pour intermédiaires
- Bonus : idées de projets JavaScript pour avancés
.
Pour vous donner une longueur d’avance, j’ai classé ces projets tutoriels pour vous. Mais ce n’est que mon opinion, donc je vous recommande vivement de les essayer par vous-même car vous savez comment apprendre le mieux et à quel niveau vous êtes actuellement.
Construire une application de méditation
Ce que vous allez construire
Vous allez construire une application qui fournit un son ambiant pour la méditation. Les utilisateurs peuvent choisir entre différentes minuteries et différents sons.
Rating
Ce tutoriel fait appel à Vanilla JavaScript, précisément ce que nous visons. La voix de l’instructeur, ainsi que ses instructions, sont claires et bonnes à comprendre. De plus, vous apprendrez à manipuler le son et la vidéo avec JS. C’est un projet javascript amusant que j’apprécie vraiment.
5/5 étoiles
Construire un clavier virtuel
Ce que vous allez construire
Vous allez construire un clavier virtuel à partir de zéro avec Vanilla JS, HTML et CSS qui peut être utilisé dans le navigateur et qui sera réactif et prêt à être touché !
Note
J’aime l’originalité de ce projet, c’est une excellente idée de projet javascript. Je n’ai pas créé un clavier virtuel avant, donc faire cela avec juste JavaScript, HTML et CSS était vraiment une grande expérience pour moi. La voix de l’instructeur est claire et il explique plutôt bien les choses.
5/5 étoiles
Construire un panier d’achat eCommerce
Ce que vous allez construire
Vous allez construire un panier d’achat qui peut être utilisé sur des boutiques en ligne et des sites eCommerce avec Vanilla JS, HTML et CSS. L’instructeur fait appel à Contentful, qui est un CMS sans tête pour le stockage des informations sur les produits. Apprendre à traiter avec Contentful ou un CMS sans tête, en général, n’est pas l’objectif principal de cette pièce, mais c’est un service formidable, donc vous ne regretterez pas de le voir en action.
Note
L’enregistrement de ce tutoriel est vraiment long. D’un côté, c’est impressionnant mais d’un autre côté aussi un peu laborieux. La voix de l’instructeur est claire et bonne à comprendre. Il est parfois un peu difficile de le suivre, mais c’est probablement dû à la complexité de ce projet. C’est donc plutôt un projet js intermédiaire.
4/5 étoiles
Construire une application météo
Ce que vous allez construire
Ce projet va vous apprendre à construire une application météo avec Vanilla JS, HTML et CSS. L’instructeur utilise l’API Dark Sky pour récupérer les informations météorologiques, ce qui est une excellente occasion pour vous d’apprendre à interagir avec les API, une autre grande chose que vous pouvez faire avec javascript.
Rating
Ce projet pourrait être un bon ajustement pour votre portefeuille. Si vous avez déjà fait le projet 1., vous connaissez déjà l’instructeur, et je peux vous dire qu’il livre à nouveau une haute qualité. Il semble qu’il sache vraiment comment enseigner d’une manière compréhensible et divertissante.
5/5 étoiles
Construire un Issue Tracker
Ce que vous allez construire
Dans ce tutoriel, vous allez construire un issue tracker qui peut être utilisé sur n’importe quel site Web pour créer des problèmes (par exemple avec des produits logiciels) avec Vanilla JS, HTML et CSS. Cela peut également être un bon ajout à votre portfolio et un excellent projet javascript pour les débutants !
Note
L’instructeur a un concept clair de ce qu’il veut construire avec vous. Sa voix est claire et bonne à comprendre, et ce projet est un projet javascript pour débutants.
4/5 étoiles
Construire un PIN Pad
Dans ce projet javascript, vous allez construire un PIN Pad qui fonctionne dans le navigateur et a la fonctionnalité de vérifier les codes PIN pour leur exactitude. L’instructeur utilise uniquement Vanilla JS, HTML et CSS pour ce tutoriel. C’est vraiment une idée de projet javascript géniale pour les débutants, donc vous voulez certainement le vérifier !
Note
Je trouve que c’est un projet de tutoriel très créatif pour vous montrer ce dont Vanilla JavaScript est capable. L’instructeur fait un bon travail pour tout expliquer clairement et d’une manière facile à suivre. C’est un projet javascript cool et j’ai eu beaucoup de plaisir à le faire.
4/5 étoiles
Construire une page de destination
Ce que vous allez construire
Brad va vous montrer comment construire une page de destination interactive qui affiche l’heure et le nom de l’utilisateur. L’application utilise le stockage local pour stocker le nom, il est donc agréable pour vous d’observer cela.
Note
Brad est bien connu pour ses tutoriels complets et remarquables. Celui-ci est plutôt court et je dirais simpliste, mais il n’utilise que JavaScript, HTML et CSS et constitue donc un excellent projet de pratique de javascript pour les débutants.
4/5 étoiles
Construire un jeu Rock Paper Scissors
Ce que vous allez construire
Construire des jeux peut être une façon amusante d’apprendre de nouvelles choses. JavaScript offre de grandes possibilités pour créer des jeux basés sur le navigateur. Dans ce projet de tutoriel, vous allez réaliser le jeu classique pierre papier ciseaux avec JavaScript.
Note
Comme dans le projet 1., l’instructeur fait un bon travail avec ce tutoriel. Il est divertissant et on peut bien le suivre. Et encore une fois, ce projet est basé sur Vanilla JavaScript et un bon projet javascript pour les débutants !
4/5 étoiles
Construire un jeu de Tic Tac Toe
Ce que vous allez construire
Dans ce projet, vous allez construire un jeu de tic tac toe qui est un exercice amusant, mais aussi complexe, car il utilise une IA et des algorithmes de base. Mais à part cela, tout est réalisé avec juste Vanilla JS, HTML et CSS.
Note
Ce projet a une bonne taille, une structure claire, et est amusant à construire. La voix de l’instructeur est claire et il est facile de le suivre. Les explications sont vraiment bonnes, et vous devriez vous sentir plutôt bien à la fin.
5/5 étoiles
Bonus : Construire des mini-projets 9-en-1
Ce que vous allez construire
C’est un petit bonus que je voulais vous présenter : un seul enregistrement qui contient neuf petits projets javascript indépendants sur lesquels vous pourrez pratiquer vos compétences en JavaScript, HTML et CSS. Peut-être pourrez-vous utiliser certains de ces snippets pour votre propre site ?
Note
J’aime l’idée d’avoir plusieurs petits snippets dans un seul enregistrement. La voix de l’instructeur pourrait être plus claire, et il est parfois un peu difficile de le suivre.
3/5 étoiles
Plus d’idées de projets JavaScript
Ce sont sans aucun doute d’excellents projets à suivre. Si vous voulez créer quelque chose par vous-même sans suivre un tutoriel étape par étape, j’ai quelques autres idées de projets javascript que vous pouvez construire :
Projets JavaScript pour débutants
-
Application de base de données avec JavaScript
Tâche : Créer une app simple qui utilise l’IndexedDB des navigateurs modernes pour stocker des données. -
Convertisseur JSON vers CSV avec JavaScript
Tâche : Construire une app simple où les utilisateurs peuvent soit coller une chaîne JSON, soit télécharger un fichier JSON. L’application doit convertir l’entrée en CSV et l’afficher à l’utilisateur. -
Countdown Timer avec JavaScript
Tâche : Construire une fonctionnalité simple où les utilisateurs peuvent entrer un nombre de secondes et la fonctionnalité commence un compte à rebours. -
Application de quiz avec JavaScript
Tâche : Construire une application de quiz simple où les utilisateurs peuvent cocher des cases pour les bonnes solutions. -
Application de chronomètre avec JavaScript
Tâche : Construire une fonctionnalité simple de chronomètre où les utilisateurs peuvent démarrer et arrêter une minuterie. -
Application de notes avec JavaScript
Tâche : Créer une application où les utilisateurs peuvent prendre et gérer des notes. -
Convertisseur de dollars en centimes avec JavaScript
Tâche : Les utilisateurs doivent pouvoir saisir un nombre de dollars et l’appli leur présente la valeur en cents. -
Horloge Pomodoro avec JavaScript
Tâche : Construire une appli où les utilisateurs peuvent créer des minuteries de travail (25min), des minuteries de pause (5min), et des fonctionnalités pour démarrer/arrêter/réinitialiser ces minuteries. -
Application de recettes avec JavaScript
Tâche : Créer une appli où les utilisateurs peuvent trouver des recettes pour différentes catégories. Bonus : intégrer une API de recettes. -
Générateur de Lorem Ipsum avec JavaScript
Tâche : Créer une app ou un composant qui génère du texte Lorem Ipsum selon la longueur souhaitée par l’utilisateur.
Projets intermédiaires en JavaScript
-
Convertisseur de devises avec JavaScript
Tâche : Construire une application pour convertir une devise en une autre. -
Application de dessin avec JavaScript
Tâche : Les utilisateurs doivent pouvoir dessiner des formes et des tableaux simples dans la fenêtre de leur navigateur. -
Application Emoji avec JavaScript
Tâche : Construire une application où les utilisateurs peuvent rechercher des emojis et les copier dans le presse-papiers. -
Générateur de mèmes avec JavaScript
Tâche : Construire une application où les utilisateurs peuvent télécharger des images, leur ajouter du texte et les enregistrer & télécharger. -
Générateur de mots de passe avec JavaScript
Tâche : Les utilisateurs doivent pouvoir créer des mots de passe aléatoires avec différents ensembles de règles comme la longueur, la difficulté, les caractères, etc. -
Scanner d’images avec JavaScript
Tâche : Construire une app qui lit et visualise les métadonnées des images téléchargées. -
Application de tâches à faire avec JavaScript
Tâche : Créer une appli pour gérer les tâches à faire. -
Application de vote avec JavaScript
Tâche : Créer une appli où les utilisateurs peuvent créer des sondages sur lesquels les autres peuvent voter. -
Application Flashcards avec JavaScript
Tâche : Créer une application où les utilisateurs peuvent créer des flashcards pour que les autres apprennent de nouvelles choses. -
Application Book Finder avec JavaScript
Tâche : Créer une app où les utilisateurs peuvent rechercher des livres avec différents critères comme l’auteur, l’année, le contenu, les recommandations, etc. Bonus : intégrer une API de livres.
Projets avancés en JavaScript
-
Application de film avec JavaScript
Tâche : Les utilisateurs doivent pouvoir parcourir les films, voir les évaluations, trouver les acteurs, obtenir des recommandations. Bonus : intégrer une API de film. -
Application de sondage avec JavaScript
Tâche : Les utilisateurs doivent pouvoir créer des sondages pour les autres qui peuvent ensuite y répondre. -
Application de chat avec JavaScript
Tâche : Les utilisateurs devraient pouvoir discuter entre eux en temps réel. -
Clone d’Instagram avec JavaScript
Tâche : Les utilisateurs devraient être en mesure d’expérimenter des fonctionnalités similaires à celles d’Instagram. Par exemple le téléchargement d’images, le marquage, les likes, etc. -
Clone Twitter avec JavaScript
Tâche : Les utilisateurs doivent être en mesure d’expérimenter des fonctionnalités similaires à celles de Twitter. Par exemple le téléchargement d’images, le marquage, les likes, etc. -
Clone Pinterest avec JavaScript
Tâche : Les utilisateurs doivent être en mesure d’expérimenter des fonctionnalités similaires à celles de Pinterest. Par exemple le téléchargement d’images, les collections, les likes, etc. -
Application de trading boursier avec JavaScript
Tâche : Les utilisateurs doivent pouvoir regarder des graphiques et acheter des actions (peut être simulé bien sûr). Bonus : intégrer une API boursière. -
Application analytique avec JavaScript
Tâche : Créer une app pour suivre le comportement des utilisateurs sur un site web, comme les visites, le taux de rebond, etc. -
Application vidéo avec JavaScript
Tâche : Créer une application où les utilisateurs peuvent télécharger et regarder des vidéos. -
Application de partage de fichiers avec JavaScript
Tâche : L’utilisateur doit pouvoir télécharger des fichiers avec ou sans inscription.
Une bonne idée serait que vous le documentez lorsque vous construisez un projet et que vous partagez cela avec la communauté !
D’accord, c’est tout pour le moment. Et je suis presque sûr que vous ne pouvez pas attendre de commencer avec ces superbes tutoriels. Mais laissez-moi vous dire encore une chose. Regarder les vidéos et coder le long est une bonne façon d’apprendre des choses et de s’entraîner. Cependant, vous en tirerez le meilleur parti si vous ajoutez vos propres saveurs aux projets – améliorez-les, modifiez-les, combinez-les, améliorez-les. Ou encore mieux : Créez votre propre projet et documentez-en la réalisation. Vous apprendrez beaucoup et les autres vous en seront reconnaissants !
Si vous aimez ce que j’écris et que vous voulez me soutenir et soutenir mon travail, suivez-moi sur Twitter pour en savoir plus sur la programmation, la fabrication, l’écriture & carrières🥰
.