Hello World! Today I wanted to share with you 10 projects you can build to be from zero to hero in javascript!
🔖 - Bookmark the article to save it and remember the like ❤️ and maybe super like🦄
Read also:
Article No Longer Available
⚡Giveaway ⚡
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
a) General --> For beginners
1. Converters
I don't have to say a lot in reality for this category. Just build something that with a given input, convert it into a nice-looking output, for us to gain the time of doing it manually 🙃. If you do a full webpage around it, that's always a plus, but you can even do a really easy javascript code.
For example, I built a currency converter, it was one of my first JS projects!
A CodePen - JavaScript: Currency Calculator
2. Word counter
Just another easy fun project, build something count the number of words and characters in a text. Then the goal is to give as many stats as possible, showing reading and speaking time, keywords and their frequency, and others, be creative!
An Article - Building a Word Counter in JavaScript
3. Timer / Clock
That one also is quite easy, just try to build a basic functionality around time, like a timer, a digital clock, a scheduled alarm... And if you have time and willingness to learn, why not doing the entire clock app, maybe on an entire website!
An Article - How to Create a Digital Clock using JavaScript
4. Random password generator
Keep your learnings secure, you can create a random password generator in 10 minutes in reality. But like so many other projects on this list, they are fun to do only if you make them yours by adding special features! I think you can go deep into customization possibilities with this one.
5. Calculator
Now you can build something more challenging, a fully working calculator. That should not be too difficult, everyone knows how a calculator works. Just try to be original, adding features obviously. Make math fun!
A freecodecamp Article - How to build an HTML calculator app from scratch using JavaScript
Another Source - A CodePen - "Neumorphism calculator with dark mode switch"
b) Games
5. Guess the number
That's a very famous and easy game, you generate a random number from 0 to 50, the user has to guess it. And you give him some hints in the process (lower or greater). Nothing extraordinary, but you're starting to make great progress!
Learn JavaScript by writing a guessing game
6. Math questions
That can be fun, you create a game that generates random math questions (like 1304+222), with an open answer or a list of different propositions for the user. The code automatically checks if the result is right or wrong. Then you can do a scorekeeper, a timer, let the user set a difficulty, add a leaderboard, and make it even more customizable allowing the user to filter questions!
Stack Exchange - Code Review - Maths Q&A game in JavaScript
7. Other games
--> Card Game, Rock-Paper-Scissors, Tic tac toe, Pong game...
Actually, you can build lots of games with javascript, but I think these four do quite a lot in making you progress in javascript. A card game is fun to do and can be easily played directly on the console, without adding the full visual stuff. For example, I built a blackjack game completely playable from the console. Then Rock paper scissor and Tic tac toe. You can do the first two players game, or even build a bot (more for the tic tac toe game in reality) to allow even a single user to play.
The pong game can allow you to do a more advanced 2d game with real-time updates (animations).
c) Social & Websites
8. Log-in, Sign-up...
Now we start with some more social / website-focused content. First I suggest you be able to quickly write a nice looking and well-performing Log-in / Sign-up system for websites, I'm sure you will need it someday, and then you will remember this training, and you will manage the situation like a pro!
A video by FrontendTips - Login / Signup panel in css and javascript (With source code)
9. Filter
That's easy as important to know how to do a basic filter. in pure javascript, you can need it to filter elements in an array. In real-life examples, you need to filter comments, posts, articles, videos... For example you can build, using the dev.to API, a webpage that allow the user to filter the articles. You have infinite way to filter articles!
HOW TO Filter/Search List- W3school
11. To-do list
The to-do list. How famous... Do you know notion? I love this app a lot, but I'm sure that you can improve the user experience. Try building something that makes planning a fun thing!
HOW TO create a to-do list - W3School
10. Social
Now let's get to the really serious stuff, with javascript and web development you can build really complex things, so why not build a social with front-end and back-end coded in javascript?
Build a simple social network with javascript - pusher.com
12. Portfolio
Hey, I actually wrote a full article about that, whyyyy not checking it out right now? After leaving a like to this article for sure!
Article No Longer Available
Other useful sources for you
20+ Projects You Can Do With JavaScript
100+ JavaScript Projects for Beginners!
40+ JavaScript Projects For Your Portfolio
17 JAVASCRIPT PROJECTS YOU CAN BUILD TO PERFECT YOUR CODING SKILLS
App ideas - At GitHub
5 Vanilla JavaScript Projects for Beginners
40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS
Build 15 JavaScript Projects - Vanilla JavaScript Course
10 JavaScript Projects in 10 Hours - Coding Challenge 🔥
Learn programming
with curated JavaScript projects - codementor.io
Thanks for reading and Happy coding ❤
Recommended readings:
Article No Longer Available
⚡Giveaway ⚡
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning
The winner will be announced on May 1, Via Twitter
Subscribe to my Newsletter!
A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Top comments (18)
this website is useful for this topic: masterjs.vercel.app/
is great resource collection for javascript
Thanks for the roadmap, it is a little overwhelming as a newbie. This is helpful.
I can understand, but as "A journey of a thousand miles begins with a single step.", I'm sure you can do that! Anything complex, when studied well, can be made much simpler.
And I am there to help you if you need, so don't hesitate to ask here or to contact me, via dev.to or email!
love love and I will take you up on that
Niceee Projects. Maybe I should get started on one of these.
Stop commenting and go coding then 🙃
But you have to promise me that you will send me the links here when you have your projects finished...
Sure 👍
Also, if you're interested, we just launched our newsletter 👍
worldindev.ck.page
Yes I joined!
Nice Projects Ideas.
Amazing :) projects
Thank you ❤, really appreciate that.
niceee
Thank you Niceee Projects.
Thanks for sharing. The projects are really interesting.
Thanks very much @devlorenzo
Thank a lot for your comment, as some are powered by coffee, I am powered by this kind of comments!
If interested, I also just launched my newsletter! --> worldindev.ck.page
This article is very useful. Thanks for your effort