DEV Community

loading...
Cover image for 15 Beginner JavaScript Projects to Improve Your Front-End Skills!

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

Miguel Nunez
Software developer from the San Francisco bay area.
Updated on ・9 min read

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. Therefore, the more projects you solve, the more knowledge you will gain. Think of each completed project as a medal you earned.

In this list of JavaScript challenges, I’ve included some of my favorite projects for beginners. In fact, these are the same projects that I built when I was first learning JavaScript. Hopefully, you can learn from them like I did. If you get stuck, don’t worry, I included a video tutorial next to each project that shows you how to solve it step by step.

Before watching the solutions, 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 your favorite YouTube developer 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. Hex Colors

What you will build
Make the web a little prettier with this simple hex colors 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)
Hex Colors 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 an object, 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
  • Functions
  • 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
  • Functions
  • Event listeners
  • 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
  • Functions
  • Event listeners
  • 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)
Image Generator Application

JavaScript used

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

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
  • 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 beginner projects are part of a list of 25. If you want to see the rest check out my jsprospect website.

Discussion (31)

Collapse
plake492 profile image
Patrick Lake

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

Collapse
codefoxx profile image
Miguel Nunez Author

That's awesome!

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
ronaldochelone profile image
Ronaldo

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

Collapse
phoenixsvg profile image
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
phoenixsvg profile image
Muel

half empty, half full. still means the same thing

Collapse
stanflows profile image
Stanley Ataki • Edited

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
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
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
j33mk profile image
Jamal Hussain

Best 👍 Good work

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
qq449245884 profile image
qq449245884

Dear Miguel Nunez,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
codefoxx profile image
Miguel Nunez Author

Sure you can, how will they understand the tutorials though? Many people add my videos in websites without asking. I appreciate you asking

Collapse
bygossipgirl profile image
Beatriz

Oh, My God, Awesome!!! 👏👏

Collapse
abendroth1 profile image
Abendroth1

Your idea is very interesting, lately, I have been using solar panel monitoring renogy.com/iot-monitoring/ in my house, with the cameras and it very work for me, I save energy, I take care of the environment and its use is quite easy and accessible since there are several monitoring designs, there you can find the one you need according to your needs

Collapse
lassonico profile image
Nicolas Lasso Rodriguez

Muchas gracias por compartir todo lo que sabes. Estoy aprendiendo y me establecí la meta de hacer estás aplicaciones amigo!
Un saludo desde Colombia!!

Collapse
miryanakv profile image
miryanaKV

Thank you for sharing!

Collapse
fridaycandour_46 profile image
FridayCandour

, great collection

Collapse
booot profile image
phpdevroot

Let's do It.. thanks for share

Collapse
zmalarcon profile image
Zully Alarcón Rodriguez

Your can participate in katas, pair programming too for improving your skills in development

Collapse
mkstancreative profile image
Chidimma Stanley

It has not been easy for me trying to get along with JavaScript. I hope this helps

Collapse
jumzeey profile image
Jumzeey

Thanks a lot for this Miguel, now I have more beginner projects to practice and to expose students to.

Collapse
nicoalani profile image
Nico Alani -✨🛸☄️

Nice for Starters! Well Done!

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
faisalamin001 profile image
Faisal Amin

Thanks! all are interesting projects🤍

Collapse
prashant1304 profile image
Prashant1304

already did first 8 gonna start doing other

Collapse
bigt1305 profile image
Anthony Hoss

Thanks for the list, nice collection for ideas!! 😁