DEV Community 👩‍💻👨‍💻

Cover image for 15 Beginner JavaScript Projects to Improve Your Front-End Skills!
Miguel Nunez
Miguel Nunez

Posted on • Updated on

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.

These 15 projects are part of a list of 25 beginner projects. If you want to see the rest checkout my jsprospect website.

Top comments (39)

Collapse
 
akaricypher profile image
akaricypher

With this I can be the next Mark Zuckerberg if i to work hard and improve everyday.... Many thanks Miguel Niguez.. Am following you this instant

Collapse
 
mignunez profile image
Miguel Nunez

Thank you brother

Collapse
 
akaricypher profile image
akaricypher

Can i apply for frontend jobs after completing these projects??... Kus i believe if i can do all these projects, then there's no frontend job out there that i can't handle

Thread Thread
 
mignunez profile image
Miguel Nunez

You can certainly try. It also depends on the particular position and company you are applying with. A lot of companies require a bachelors degree in Computer Science. Most companies, if not all, also require a skills test that tests you on data structures/ algorithms, so you will need to brush up on that as well. One thing is for sure, completing these projects is an excellent start for anybody looking to become a developer. I also can confidently say that if you can build these projects you will know more about web development than most software engineering students. I know that for a fact because I graduated with a whole bunch of them.

Thread Thread
 
akaricypher profile image
akaricypher

Ok that's good to know sir...
I myself graduated from electrical/electronics engineering department, and while in college i learnt data structures and algorithms... I think I will be a good fit

Collapse
 
princemuel profile image
Prince Muel

Hello, using the eval() function in JS is forbidden because it can allows the opportunity for dangerous code to be passed into an application

Collapse
 
lakshyachopra profile image
Lakshya Chopra

It's not forbidden, eval() is just not recommended.

Collapse
 
princemuel profile image
Prince Muel

half empty, half full. still means the same thing

Collapse
 
ronaldochelone profile image
Ronaldo

Show , muito bom , parabéns e obrigado por compartilhar seu conhecimento.

Collapse
 
plake492 profile image
Patrick Lake

Added a bit to the color generator
plake492.github.io/color_picker/

Collapse
 
sourabhd profile image
Sourabh Das

Hey patrick,loved your work.can i get your twitter link??
twitter.com/SourabhWebDev here is mine,please ping me once i have something in my mind and wanted to discuss.

Collapse
 
plake492 profile image
Patrick Lake

Thanks! And sure thing: twitter.com/PatrickLake492

Collapse
 
stanflows profile image
Stanley Ataki • Edited on

Of all, I have seen this is one of the best and easy-going for learners. I'm creating a GitHub repo for all 15 including the remain 10 from your website. Thanks

Collapse
 
rubao76 profile image
rubao76

Realmente muito bom, sem duvida o melhor jeito de aprender, porem fiquei com muitas duvidas no projeto Image carousel, nao entendi completamente as funcoes, o if, se alguem puder me explicar melhor, agradeco...

Collapse
 
ptejada profile image
Pablo Tejada

This is a great list. Given the length of it i suggest adding a table of context at the top with anchors to each project idea.

Collapse
 
manuelsayago15 profile image
Manuel Sayago

I just saw this and as a coincidence, I'm studying more Javascript to learn its theory because they're asking me that at work. I always coded like with the best effort and try to apply solutions to the problems, but, this theory is about knowing all Javascript and how it works and in that way, code better, so, I was looking for projects to do and practice more, as I'm reviewing those subjects again, your projects list looks awesome!

I'll do it and I'll be back ;)

Thanks for sharing!

Collapse
 
j33mk profile image
Jamal Hussain

Best 👍 Good work

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Good material, I believe in learning by doing:
I myself created a playlist of several real projects, where you can learn DOOM, Arrays, Data structures, Data structures while producing a project.
It's magical to see each line of code and its result in real time.

🖥️ JavaScript Projects for beginners (explained, step-by-step):
bit.ly/3sxW24M

Collapse
 
faisalamin001 profile image
Faisal Amin

Thanks! all are interesting projects🤍

Collapse
 
amesavee23 profile image
amesavee23

Hii, thank you so much for an educative video.
I just started building projects in JavaScript, I started with the calculator, but I don't think my JS is working, cos the calculator isn't clicking.
What can I do?

Collapse
 
mignunez profile image
Miguel Nunez

Is your JavaScript file linked in the HTML file?

Collapse
 
bigol profile image
José Santos Silva

Muy útil. ¡Gracias!

Collapse
 
meo3w profile image
Phil Hasenkamp

Well done, Miguel! I plan to try each of these this coming week. Thank you for sharing your knowledge with us!

Collapse
 
prashant1304 profile image
Prashant1304

already did first 8 gonna start doing other

Top Heroku Alternatives (For Free!)

Recently Heroku shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis on November 28th, 2022. So Meshv Patel put together some free alternatives in this classic DEV post.