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:
Try it live:
Colors
2. CSS Gradient Generator
GitHub:
Try it live:
Gradient generator
3. Random quote generator
GitHub:
Try it live:
Random quote generator
4. The message
GitHub:
Try it live:
The message
5. Counter
GitHub:
Try it live:
Counter
6. Image carousel
GitHub:
Try it live:
Image carousel
7. Digital clock
GitHub:
Try it live:
Digital clock
8. Calculator
GitHub:
Try it live:
Calculator
9. Grocery list
GitHub:
Try it live:
Grocery list
10. Tip calculator
GitHub:
Try it live:
Tip calculator
11. Flashcards
GitHub:
Try it live:
Flashcards
12. To-do list
GitHub:
Try it live:
To-do list
13. Sticky notes
GitHub:
Try it live:
Sticky notes
14. Timer
GitHub:
Try it live:
Timer
15. Math
GitHub:
Try it live:
Math
16. Unsplash API
GitHub:
Try it live:
Unsplash API
17. Typewriter
GitHub:
Try it live:
Typewriter
18. Square cards
GitHub:
Try it live:
Square cards
19. Weather application
GitHub:
Try it live:
Weather application
20. Wikipedia API
GitHub:
Try it live:
Wikipedia API
21. Marvel API
GitHub:
Try it live:
Marvel API
22. Quiz app
GitHub:
Try it live:
Quiz app
23. Recipe API
GitHub:
Try it live:
Recipe API
24. Music player
GitHub:
Try it live:
Music player
25. CSS Gradient generator tool
GitHub:
Try it live:
CSS Gradient generator