jsPROspect

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

this is an image of author Miguel Nunez
Miguel Nunez

Sun, January 24, 2021

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. Hence, 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 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 video tutorials, so the project in the thumbnail might not be exactly the same as the one in the video (most of them are though). If you want the latest and greatest 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 the need of a little motivation I got you covered. In this project we build a random quote generator filled with plenty of motivational quotes.

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

    Random Quotes Application

    Javascript used

  • DOM manipulation
  • Dictionary
  • Functions
  • Takeaway and thoughts

    This problem can be solved many different 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 create an application that lets you navigate through your 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 essentially used CSS to block all of the images from the screen. We then used JavaScript to manipulate the CSS style into revealing one image at a time. Before 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 will 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 this project I learned that in JavaScript we can use an object along with functions that are built into the language to retrieve the time. This is great because it eliminates having to include an additional library, like we do in Python and C++, just to retrieve the time. 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 this function to ensure that our time was being updated.


    5. Calculator

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

    Calculator Application

    What you will build

    No JavaScript beginner project list would be complete without a calculator and we aren't making any exceptions here.

    Javascript used

  • DOM manipulation
  • Functions
  • Takeaway and thoughts

    It was amazing to see how simple this was to build. Before building this I thought we somehow had to manually perform each arithmetic operation. It turns out there's a built in JavaScript function named eval that takes care of this. I really enjoyed building this app and even changed the style a little bit to make it my own.


    6. Grocery List

    What you will build

    Hungry? Let's go to the grocery store with this grocery list application.

    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 the user clicked on that particular item. It was also usefull 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 calculator.

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

    Tip Calculator Application

    Javascript used

  • DOM manipulation
  • Functions
  • Takeaway and thoughts

    Writing 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

    What you will build

    An application that let's you create flashcards on the fly, so put away those paper flashcards, theres 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 both 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 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 again to see if I was building 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 would not 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 go 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 box. 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
  • 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 this project, I was completely unaware that the Unsplash API existed. It was interesting to learn that many establised companies integrate this API into their website. It's also cool to have an image generator for whenever I need a new walpaper 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. Indeed, in this project we used the built in JavaScript substring function to make the typewriter effect.


    15. Square Cards ( Template )

    What you will build

    An application that allows developers to share content with clients.

    Try it before you build it ( Real Example - Hosted with GitHub Pages)

    Square Cards Application

    Javascript used

  • Event listeners
  • Functions
  • Takeaway and thoughts

    This project taught me 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. Indeed, now I can share content with clients in a modern looking square card.


    Other Cool Applications!

  • Weather API Application
  • Wikipedia API Application
  • Marvel Comics API Application ( Requests not activated )
  • Quiz Application
  • Recipe API Application ( Requests not activated)
  • Informational Website