15 Beginner JavaScript Projects to Improve Your Front-End Skills!

The fastest way for you to become a good web developer is to practice. An excellent way to practice is by building as many beginner projects as you can. That’s because each project presents a unique problem and solution, so the more projects you solve, the more knowledge you will gain. Think of each project you complete as a medal you earned. The more medals you have, the more prepared you will be to tackle your next and evermore difficult project.

To get you started, I put together a list of 15 beginner JavaScript projects. In fact, these are same 15 out of 25 projects that I built when I was first learning JavaScript (see all 25 here).

If you get stuck trying to solve one of these, don’t worry, I included a video tutorial next to each project showing you how to solve it step by step. Before watching the solutions, however, I encourage you to attempt them on your own first. This is key to becoming a good developer. In programming there isn’t any shortcuts so if you don’t put in the work, you won’t see improvement, no matter how many tutorials you watch. If your feeling overwhelmed, take a break and relax, it happens to the best of us. Remember, it takes even the best Computer Science teachers a lot of time and practice to begin to master this stuff.

I also left a “try it before you build it” section next to each project. Each project is hosted for free with GitHub Pages so after you complete your first project, learn how to host it the same way by reading this super easy to follow guide.

Finally, I’ve made improvements to each project since creating the tutorials, so the project in the thumbnail (the latest version) might be slightly different than the one in the video (most of them are the same though). If you want the latest versions of the projects check out my GitHub.

1. CSS Gradient Generator

What you will build
Make the web a little prettier with this simple CSS gradient generator application. This app changes the background color and displays that color’s hexadecimal code on the screen all on the click of a button.

Try it before you build it ( Hosted with GitHub Pages)
Gradient Generator Application

JavaScript used

• DOM manipulation
• Data structures
• Functions

Takeaway and thoughts
Building this project taught me how to use onclick, which is used to attach a function to a button. In this case that function was generating a random hex color and making it the color of the background. Learning this was very useful since nearly every modern web application uses buttons. I have a feeling this is a technique I will use over and over.

2. Random Quotes

What you will build
If your in need of a little motivation, I got you covered. In this project, we will build a random quote generator equipped with plenty of motivational quotes.

Try it before you build it ( Hosted with GitHub Pages)
Random Quotes Application

JavaScript used

• DOM manipulation
• Objects
• Functions

Takeaway and thoughts
This application can be created in various ways but it was interesting to see it being solved using a dictionary, an often under-utilized data structure. I also learned a simple algorithm that’s responsible for generating a random quote each time the user clicks on the button.

3. Image Carousel

What you will build
Need an application to display all your cool pictures in? Awesome, in project number three we’ll create an application that allows us to navigate pictures on the click of a button. In programming, we call these photo carousels or image sliders.

Try it before you build it ( Hosted with GitHub Pages)
Image Carousel Application

JavaScript used

• DOM manipulation
• Control structures
• Functions

Takeaway and thoughts
It was interesting to learn how this sort of project was implemented. At first, we used CSS to block all of the images from the screen. Then we used JavaScript to manipulate the CSS style into revealing one image at a time. Before completing this project I was unsure if it was possible to change the CSS styles directly with JavaScript, it turns out that it is.

4. Digital Clock

What you will build
Thinking of purchasing a digital clock? Not anymore, in this project you’ll learn how to build your own.

Try it before you build it ( Hosted with GitHub Pages)
Digital Clock Application

JavaScript used

• DOM manipulation
• Data structures
• Functions
• Objects

Takeaway and thoughts
In building this project, I learned that with JavaScript we can create a built in object and retrieve the time from it using built in functions. This is great because it eliminates having to include an additional library, like we do in Python or C++. I also learned about a built in function called setTimeout, which is used to call another function over and over. For this project it was necessary to use setTimeout to ensure that our time was being updated properly.

5. Calculator

What you will build
A calculator. No JavaScript beginner project list would be complete without it and we aren’t making any exceptions here.

Try it before you build it ( Hosted with GitHub Pages)
Calculator Application

JavaScript used

• DOM manipulation
• Functions

Takeaway and thoughts
It was almost unbelievable to see how simple this was to build. Before building this I thought each expression needed to be solved manually with some sort of complex function. It turns out there’s a built in JavaScript function named eval that takes care of this for us. I really enjoyed building this app and even changed the style of it to give it my own flavor.

6. Grocery List

What you will build
Hungry? Let’s go to the grocery store with this grocery list app.

Try it before you build it ( Hosted with GitHub Pages)
Grocery List Application

JavaScript used

• DOM manipulation
• Functions
• Control structures
• Event listeners

Takeaway and thoughts
This is a really cool looking app and it’s the first project on the list where we made use of event listeners. Indeed, we used an event listener to add a new item to the grocery list whenever the user clicked on the “enter” key and another to scratch an item off the list when they clicked on that particular item. It was useful to learn how the function that’s responsible for deleting all the elements within a div was written. In this case, this function deleted all of the items in our grocery list.

7. Tip Calculator

What you will build
No more looking around the table to see who’s taking care of the tip with this tip calculator.

Try it before you build it ( Hosted with GitHub Pages)
Tip Calculator Application

JavaScript used

• DOM manipulation
• Functions

Takeaway and thoughts
Developing the function that determines the amount each person will tip was rather easy. Perhaps the greatest challenge here was using CSS to mimic the design of the app. It looks like a rather simple design but it’s actually a little challenging to do without watching the tutorial first.

8. To-do List

What you will build
Let’s make the most of our day with this awesome to-do list app.

Try it before you build it ( Hosted with GitHub Pages)
To-do List Application

JavaScript used

• DOM manipulation
• Event listeners
• Control structures
• Data structures
• Functions

Takeaway and thoughts
The solution to this one was very similar to the grocery list application. I found myself looking back at the code for that one to help me solve this one. One thing that was different, however, was the function to change the background color of each item on the list. I thought that was a very nice addition to the project, as it makes it look a lot nicer. Overall, I would say this was more of a review project but it was still great practice nonetheless.

9. Flashcards (with Local Storage)

What you will build
This is an application that allows you to create flashcards so put away those paper flashcards because there’s a new boss in town.

Try it before you build it ( Hosted with GitHub Pages)
Flashcards Application

JavaScript used

• DOM manipulation
• Functions
• Control structures

Takeaway and thoughts
First off what a great looking application. It can help students study and keep them from spending money on paper flashcards. This is the first project on the list where we used flexbox so it was little challenging at first. Once I got the hang of it, however, it was actually very easy to use and it made the project a lot more dynamic. In particular, I really enjoyed the align-item, flex-wrap, and justify-content options because they made the flashcards responsive.

10. Sticky Notes

What you will build
Lets build a sticky notes application. Yes, you may throw all of those paper sticky notes away now.

Try it before you build it ( Hosted with GitHub Pages)
Sticky Notes Application

JavaScript used

• DOM manipulation
• Event listeners
• Functions
• Data structures

Takeaway and thoughts
The code for building this project was very similar to the flashcards project but that’s no problem because the practice was needed. Indeed, if I didn’t have the code for that project to fall back on, I would of had to watch the flashcards tutorial video again to check if I was doing this one correctly. Of course, this project does have some unique features so it was challenging figuring out how to code those parts. Overall, I learned a great deal from this project since its built using a combination of everything we have learned so far.

11. Timer

What you will build
Let’s build a timer. Ready, set, go!

Try it before you build it ( Hosted with GitHub Pages)
Timer Application

JavaScript used

• DOM manipulation
• Event listeners
• Functions
• Objects

Takeaway and thoughts
It turns out that building a simple timer is harder than it seems. One would think that using the same setInterval function from the digital clock project would be sufficient to display the correct time. It turns out that technique simply doesn’t work for this. For this project, we create variables to hold different information about the time, for example, when the time was started, when the time was stopped, and how long the time was stopped. Without these variables and the calculations we perform with them, our digital clock would simply be unable to correctly display the time elapsed.

12. Math 4 Kids

What you will build
A cool application that teaches kids basic arithmetic operations.

Try it before you build it ( Hosted with GitHub Pages)
Math 4 Kids Application

JavaScript used

• DOM manipulation
• Event listeners
• Control structures
• Data structures

Takeaway and thoughts
In this project, I learned how to switch from one web page to another and how to play a sound file. It turns out both of these tasks are rather simple to do. The hardest part was figuring out how to randomly place the answers in different boxes so the correct answer isn’t always in the same location. I tried my best to figure it out on my own but ended up watching the tutorial for the solution.

13. Unsplash API ( Image Generator )

What you will build
Need some images for your new website? Let’s build an image generator.

Try it before you build it ( Hosted with GitHub Pages)
Unsplash API Application

JavaScript used

• DOM manipulation
• Promises
• Fetch
• Functions
• Control structures
• Event listeners

Takeaway and thoughts
Completing this project taught me how to use JavaScript’s built in fetch to make API requests. Before building this project, I was completely unaware that the Unsplash API existed. It was interesting to learn that many established companies integrate this API into their website. It’s also cool to have an image generator for whenever I need a new wallpaper on my desktop.

14. Quotes API ( Typewriter )

What you will build
An application that fetches a random quote from an API and displays it on the screen with a typewriter effect.

Try it before you build it ( Hosted with GitHub Pages)
Typewriter Application

JavaScript used

• DOM manipulation
• Event listeners
• Control structures
• Data structures
• Promises
• Functions
• Fetch

Takeaway and thoughts
Learning how to write the typewriter script was awesome. I’ve actually seen this effect implemented in video games. Now I can use it when I build my own games. As far as the code is concerned, it was interesting to learn that we don’t always need CSS to make cool animations. In this project we used the built in JavaScript substring function to make the typewriter effect.

15. Square Cards ( Template )

What you will build
A stylish way to display data or simply a square card.

Try it before you build it ( Hosted with GitHub Pages)
Square Cards Application

JavaScript used

• Event listeners
• Functions

Takeaway and thoughts
In this project I learned how to open up YouTube videos and webpage articles directly from JavaScript. This was a great addition to the arsenal of tools I now possess ( thanks to 15 beginner projects! ) as a web developer.