25 Beginner JavaScript Project Ideas
Tags: javascript, beginners, projects, webdev
Published: 2021-08-25 03:57:23

I previously wrote a blog about 15 JavaScript beginner projects and it was quite popular [check it out here](https://dev.to/miguelznunez/15-beginner-javascript-projects-to-improve-your-front-end-skills-5bcj). 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/menlex7dbzlv49iqz6d7.png)

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](https://www.youtube.com/playlist?list=PLtMugc7g4GaqAVDZwQ_t1H6500ZGJzOgW).

Visit me sometime at [miguelznunez.com](https://miguelznunez.com/) and the official 25 JavaScript projects website at [jsprospect.com](https://jsprospect.com/).

**1. Colors**

GitHub:
{% github miguelznunez/Colors %}

Try it live:
[Colors](https://miguelznunez.github.io/Colors/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwbh850zyjzi7dech9pp.JPG)

**2. CSS Gradient Generator**

GitHub:
{% github miguelznunez/Gradient-generator %}

Try it live:
[Gradient generator](https://miguelznunez.github.io/Gradient-generator/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/624078g2w0hlvids16hb.JPG)

**3. Random quote generator**

GitHub:
{% github miguelznunez/Random-Quote-Generator %}

Try it live:
[Random quote generator](https://miguelznunez.github.io/Random-Quote-Generator/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kwm4zwqh3hhq38lasuu.JPG)

**4. The message**

GitHub:
{% github miguelznunez/The-message %}

Try it live:
[The message](https://miguelznunez.github.io/The-message)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b71a7puenp8bf4mfrdof.JPG)

**5. Counter**

GitHub:
{% github miguelznunez/Counter %}

Try it live:
[Counter](https://miguelznunez.github.io/Counter)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc0qeydxkbkf4w2nkbh3.JPG)

**6. Image carousel**

GitHub:
{% github miguelznunez/ImageCarousel %}

Try it live:
[Image carousel](https://miguelznunez.github.io/ImageCarousel)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jrvqw4fg2aqqy11dnmc.JPG)

**7. Digital clock**

GitHub:
{% github miguelznunez/DigitalClock %}

Try it live:
[Digital clock](https://miguelznunez.github.io/DigitalClock)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v9wwt0tots35ijhwmg3.JPG)

**8. Calculator**

GitHub:
{% github miguelznunez/Calculator %}

Try it live:
[Calculator](https://miguelznunez.github.io/Calculator)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn20r3qbwdfycd370rrj.JPG)

**9. Grocery list**

GitHub:
{% github miguelznunez/Grocery-List %}

Try it live:
[Grocery list](https://miguelznunez.github.io/Grocery-List)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p88v5g1crknmujfqxdo3.JPG)

**10. Tip calculator**

GitHub:
{% github miguelznunez/TipCalculator %}

Try it live:
[Tip calculator](https://miguelznunez.github.io/TipCalculator)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b8cu62xl265z917x75b.JPG)

**11. Flashcards**

GitHub:
{% github miguelznunez/Flashcards %}

Try it live:
[Flashcards](https://miguelznunez.github.io/Flashcards)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9xttevba9dqysqihsk6.JPG)

**12. To-do list**

GitHub:
{% github miguelznunez/To-do-list %}

Try it live:
[To-do list](https://miguelznunez.github.io/To-do-list)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgx6vr1h8daneqo21rgf.JPG)

**13. Sticky notes**

GitHub:
{% github miguelznunez/Sticky-Notes %}

Try it live:
[Sticky notes](https://miguelznunez.github.io/Sticky-Notes)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw6pjajt9agschl352k6.JPG)

**14. Timer**

GitHub:
{% github miguelznunez/Timer %}

Try it live:
[Timer](https://miguelznunez.github.io/Timer)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gdeg1zutn98l5ewvi88.JPG)

**15. Math**

GitHub:
{% github miguelznunez/Math4Kids %}

Try it live:
[Math](https://miguelznunez.github.io/Math4Kids)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zimgr16qwq4wb5udoa4f.JPG)

**16. Unsplash API**

GitHub:
{% github miguelznunez/UnsplashAPI %}

Try it live:
[Unsplash API](https://miguelznunez.github.io/UnsplashAPI)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tlutp8wp6ymtoh1kw1b.JPG)

**17. Typewriter**

GitHub:
{% github miguelznunez/Typewriter %}

Try it live:
[Typewriter](https://miguelznunez.github.io/Typewriter)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubofal9zpouvfp3x6ulu.JPG)

**18. Square cards**

GitHub:
{% github miguelznunez/SquareCards %}

Try it live:
[Square cards](https://miguelznunez.github.io/SquareCards)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz2et56steam7ya4l0on.JPG)

**19. Weather application**

GitHub:
{% github miguelznunez/Weather-App %}

Try it live:
[Weather application](https://miguelznunez.github.io/Weather-App)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz6drh7k14ep2e23ydox.JPG)

**20. Wikipedia API**

GitHub:
{% github miguelznunez/WikipediaAPI %}

Try it live:
[Wikipedia API](https://miguelznunez.github.io/WikipediaAPI)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g708t5xy5xv7gq8j483o.JPG)

**21. Marvel API**

GitHub:
{% github miguelznunez/Marvel-API %}

Try it live:
[Marvel API](https://miguelznunez.github.io/Marvel-API)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtir4dav9rzcwaybj3mv.JPG)

**22. Quiz app**

GitHub:
{% github miguelznunez/Quiz-App %}

Try it live:
[Quiz app](https://miguelznunez.github.io/Quiz-App)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhalzoe8expwwpn0io8j.JPG)

**23. Recipe API**

GitHub:
{% github miguelznunez/RecipeAPI %}

Try it live:
[Recipe API](https://miguelznunez.github.io/RecipeAPI)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im6mz5fb7kg7o1kdli4w.JPG)

**24. Music player**

GitHub:
{% github miguelznunez/Music-Player %}

Try it live:
[Music player](https://miguelznunez.github.io/Music-Player/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q899woc5v0i2s4k8yltl.JPG)

**25. CSS Gradient generator tool**

GitHub:
{% github miguelznunez/CSS-Gradient-Generator-2.0 %}

Try it live:
[CSS Gradient generator](https://miguelznunez.github.io/CSS-Gradient-Generator-2.0/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1q33f3s9j5uahyzgi1b9.JPG)