DEV Community

loading...
Cover image for 25 Beginner JavaScript Project Ideas

25 Beginner JavaScript Project Ideas

Miguel Nunez
Software developer from the San Francisco bay area.
Updated on ・4 min read

I previously wrote a blog about 15 JavaScript beginner projects and it was quite popular ( check it out here ). What many didn't know is those projects were part of a list of 25, I included the entire list below. If your an absolute beginner, these projects should keep you busy for at least half a year. Assuming, of course, that you figure them out on your own with nothing but good old stackoverflow or similar websites for tips.

If you manage to get through all the projects this way, I can virtually guarantee that you'll be a bad ass developer. Don't believe me? When I first started learning JavaScript, about a year ago now, I could barely handle solving project number one on my own. By the time I was done, well, you'll see what I built on project 25.

Once your done with these projects, you'll be more than ready to start doing some real damage with node.js. For now, build these projects so you can master the front-end. Don't rush yourself into full stack development. I see it happen all to often, aspiring developers trying to learn everything in 1-3 months and looking like a deer that seen headlights when asked to build a decent looking website.

Alt Text

I left a link to the GitHub repo for each project but the code is only to be peeked at when you've tried everything else. If you still can't figure it out, here's a link to the tutorials for the first 18 projects.

Visit me sometime at miguelznunez.com and the official 25 JavaScript projects website at jsprospect.com.

1. Colors

GitHub:

Try it live:
Colors

Colors

2. Hex colors gradient

GitHub:

Try it live:
Hex colors gradient

Hex colors gradient

3. Random quote generator

GitHub:

Try it live:
Random quote generator

Random quote generator

4. The message

GitHub:

Try it live:
The message

The message

5. Counter

GitHub:

Try it live:
Counter

Counter

6. Image carousel

GitHub:

Try it live:
Image carousel

Image carousel

7. Digital clock

GitHub:

Try it live:
Digital clock

Digital clock

8. Calculator

GitHub:

Try it live:
Calculator

Calculator

9. Grocery list

GitHub:

Try it live:
Grocery list

Grocery list

10. Tip calculator

GitHub:

Try it live:
Tip calculator

Tip calculator

11. Flashcards

GitHub:

Try it live:
Flashcards

Flashcards

12. To-do list

GitHub:

Try it live:
To-do list

To-do list

13. Sticky notes

GitHub:

Try it live:
Sticky notes

Sticky notes

14. Timer

GitHub:

Try it live:
Timer

Timer

15. Math

GitHub:

Try it live:
Math4kids

Math4kids

16. Unsplash API

GitHub:

Try it live:
Unsplash API

Unsplash API

17. Typewriter

GitHub:

Try it live:
Typewriter

Typewriter

18. Square cards

GitHub:

Try it live:
Square cards

Square cards

19. Weather application

GitHub:

Try it live:
Weather application

Weather application

20. Wikipedia API

GitHub:

Try it live:
Wikipedia API

Wikipedia API

21. Marvel API

GitHub:

Try it live:
Marvel API

Marvel API

22. Quiz app

GitHub:

Try it live:
Quiz App

Quiz App

23. Recipe API

GitHub:

Try it live:
Recipe API

Recipe API

24. Music player

GitHub:
n/a

Try it live:
n/a

Music player

25. Image editor

GitHub:
n/a

Try it live:
n/a

Image editor

Discussion (20)

Collapse
lukeshiru profile image
LUKESHIRU

It would be good to have a README.md in each repo to know what's expected of each project... I'm hoping you aren't expecting beginners to just watch those apps running and guess what should they code to replicate them ...

Collapse
codefoxx profile image
Miguel Nunez Author • Edited

While it's true that the repos need a read me file, watching apps run and guessing what you should code to replicate them is exactly the purpose of a 25 project ideas blog. In addition, when I created the projects as a beginner, I never read or even for one second thought about instructions. I just figured them out by watching how they worked, which is precisely why I added the try it live section. So if I did it without instructions, anybody could. If you can't do the same then maybe this list isn't for you.

Collapse
lukeshiru profile image
LUKESHIRU

The title says "ideas", but then the actual article has more of a "challenge" format. Still in the real world, we devs generally take a look at the code (blessed be the devtools), so asking beginners to code stuff without instructions nor taking a look at the code is kinda fruitless, even more so if you consider that in real world professional scenarios you'll have mocks/designs, client specifications and so on...

Thread Thread
codefoxx profile image
Miguel Nunez Author • Edited

The purpose of 25 project ideas is also to challenge yourself, I would think anybody would be able to figure that out. I also completely disagree with your claims of it being fruitless to not include instructions or code. Once, again, I solved the projects without neither so your statement is completely not true and the success of this blog is proof of that.

Thread Thread
lukeshiru profile image
LUKESHIRU

You're contradicting yourself, now is a "challenge", not just "ideas" :/ ... I made a suggestion to just add README.md files with the requirements in hopes that you weren't expecting beginners to do guess work, but whatever... Just watching your first example, it looks like random colors, and then the code actually loops trough a list of predefined colors. So folks might do a random color generator, when the "requirement" is to have a list of predefined colors to loop trough in order. The README doesn't need to be much, just a small text with details about what the has to do.

Thread Thread
Sloan, the sloth mascot
Comment deleted
webtomekk profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Náhóczki Tamás D.

Why do I feel ignorance in these 1 line answers? Is it just me or.. 😂

Thread Thread
codefoxx profile image
Miguel Nunez Author • Edited

Bleh.

Collapse
njokudanielo profile image
NJOKU DANIEL

Thanks for sharing

Collapse
meo3w profile image
Phil Hasenkamp

I’m going to try these this weekend. Thank you for sharing!

Collapse
ahmedadel profile image
Ahmed Adel

Good one 👌

Collapse
prabhukadode profile image
Prabhu

Not doubt .. great work

Collapse
uzairansari37 profile image
UzairAnsari37

such an amazing information highlighted and delivered...
much appreciated!

Collapse
nader001cv profile image
NADER-001cv

good

Collapse
tatranan profile image
Tạ Trần An

Great

Collapse
fasasisherif profile image
fasasisherif

I love it. This is exactly what I was looking for.

Collapse
rkfr profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Roman • Edited

I think those projects are not good example (github code)
var declaration near the const, what about let?
div + variable + /div ... really?

what about <div>${variable}</div>?

eval() in calculator...

ES modules? No... Only one file

No words

Collapse
codefoxx profile image
Miguel Nunez Author

Cool. How bout you share some of your work?

Collapse
zahidul64072723 profile image
Zahid ullah

Very meaningful information share sir
Thank you for sharing information about web development

Collapse
rkfr profile image
Roman