25 Beginner JavaScript Project Ideas

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.

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:

miguelznunez / Colors

Try it live:
Colors

2. CSS Gradient Generator

GitHub:

miguelznunez / Gradient-generator

Try it live:
Gradient generator

3. Random quote generator

GitHub:

miguelznunez / Random-Quote-Generator

Try it live:
Random quote generator

4. The message

GitHub:

miguelznunez / The-message

Try it live:
The message

5. Counter

GitHub:

miguelznunez / Counter

Try it live:
Counter

6. Image carousel

GitHub:

miguelznunez / ImageCarousel

Try it live:
Image carousel

7. Digital clock

GitHub:

miguelznunez / DigitalClock

Try it live:
Digital clock

8. Calculator

GitHub:

miguelznunez / Calculator

Try it live:
Calculator

9. Grocery list

GitHub:

miguelznunez / Grocery-List

Try it live:
Grocery list

10. Tip calculator

GitHub:

miguelznunez / TipCalculator

Try it live:
Tip calculator

11. Flashcards

GitHub:

miguelznunez / Flashcards

Try it live:
Flashcards

12. To-do list

GitHub:

miguelznunez / To-do-list

Try it live:
To-do list

13. Sticky notes

GitHub:

miguelznunez / Sticky-Notes

Try it live:
Sticky notes

14. Timer

GitHub:

miguelznunez / Timer

Try it live:
Timer

15. Math

GitHub:

miguelznunez / Math4Kids

Try it live:
Math

16. Unsplash API

GitHub:

miguelznunez / UnsplashAPI

Try it live:
Unsplash API

17. Typewriter

GitHub:

miguelznunez / Typewriter

Try it live:
Typewriter

18. Square cards

GitHub:

miguelznunez / SquareCards

Try it live:
Square cards

19. Weather application

GitHub:

miguelznunez / Weather-App

Try it live:
Weather application

20. Wikipedia API

GitHub:

miguelznunez / WikipediaAPI

Try it live:
Wikipedia API

21. Marvel API

GitHub:

miguelznunez / Marvel-API

1.) Go to https://developer.marvel.com/ and get your free API KEY

2.) Hash the api key by following these directions https://developer.marvel.com/documentation/authorization

3.) Initialize the apikey and hash variables in the script.js file from this project with your own

4.) Enjoy

View on GitHub

Try it live:
Marvel API

22. Quiz app

GitHub:

miguelznunez / Quiz-App

Try it live:
Quiz app

23. Recipe API

GitHub:

miguelznunez / RecipeAPI

Try it live:
Recipe API

24. Music player

GitHub:

miguelznunez / Music-Player

Try it live:
Music player

25. CSS Gradient generator tool

GitHub:

miguelznunez / CSS-Gradient-Generator-2.0

Try it live:
CSS Gradient generator

Comments

[Miguel Z. Nunez]

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.

[Koko Hranghlu]

I see some people complaining about Readme files and not having instructions. Come on, this are beginner level projects, the idea is to think like a developer, how the app behaves, what are the functionality, what the user can do and what the user will do first, second and so on and not to forget how the app will process the input due to user's interactions. We should we put ourself in user's shoe and just go through the app first and write the code according to that. These apps are ideas and challenges at the same time, it's quite beginner friendly and once you get past these without copying code you will truly be able to think like a developer

[Miguel Z. Nunez]

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.

[NJOKU DANIEL]

Thanks for sharing

[André Pinto]

Thank you for this. I was looking for some ideas to practice my skills.

[UzairAnsari37]

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

[NADER-001cv]

good

[Phil Hasenkamp]

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

[Ahmed Adel]

Good one 👌

[Prabhu]

Not doubt .. great work

[Tạ Trần An]

Great

[fasasisherif]

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

[Miguel Z. Nunez]

Bleh.