DEV Community

Sławek Kołodziej
Sławek Kołodziej

Posted on • Updated on • Originally published at

5 Javascript Projects You Should Build as Junior Frontend Developer

When looking for a first job as a Junior Front-end developer it's very hard to show your experience as a programmer. Your projects used as a playground for learning new skills will rarely also offer good code quality. It's impossible to write perfect code if you write something for the first time! In the end, our public code repository will consists of a bunch of unfinished projects. You wouldn't want your future employer to see all of it.

This is why I encourage you to reuse your skills in practice once again. This time also taking into consideration code quality. Here is a list of project examples you could build to show off your skills.

1. Build a Blog Template with HTML and CSS

When you just start learning front-end development it's important to consolidate your knowledge about HTML and CSS. Building a Blog Template is a good idea for your first bigger project. Do not worry about design, there are many resources available online.


  • build a homepage, single post page, and contact page
  • try using CSS Grid
  • your page should be responsive (RWD)

Nice to haves:

  • add a slider
  • use real content instead of Lorem Ipsum

2. Build a Tic-tac-toe game with Pure JavaScript

Building a game in a browser can be a great exercise to test your JavaScript skills. You will have to react to user events, interact with DOM, and store game data. It's also a great project to show to your colleagues and family!


  • welcome screen with name and symbol input for each player
  • rendering a symbol when a user clicks on the empty cell
  • win verification

Nice to haves:

  • creating a scoreboard and saving it to local storage
  • playing with the computer, using ex. minmax algorithm or your own solution

3. Location sharing with Pure JavaScript and Maps Service

A simple app where you can share location with your friend can be both a demanding project and a very useful tool you can use. In this project, you will use JavaScript to interact with external services for maps (ex. Google Maps or OpenStreetMap).


  • displaying your current location on a map
  • "Share" button which creates a link with your current location
  • a page which displays a location embedded in URL

Nice to haves:

  • sharing your realtime location, you will have to save it and read it every few seconds from an external database (ex. Firebase)
  • displaying the realtime location of your friend when he accesses the page

4. Build TV Series Tracker with JS Framework (React, Vue, Angular or other)

This project will help every TV Series fan, track premieres of new episodes. It will be a great opportunity to use a JavaScript framework you are comfortable with.


  • searching for TV Series using external API (ex. TVMaze API)
  • adding TV Series to the tracking list
  • displaying tracked TV Series list along with newest episode premiere date
  • single page view with more details about TV Series
  • saving tracking list to local storage

Nice to haves:

  • sending emails or push notifications when a premiere is coming

5. Home Budget App with JS Framework (React, Vue, Angular or other)

Creating a home budget App will be an ultimate check for your skills as a Junior Front-end Developer. It will check your ability to create forms and store information, but it can also help you save money!


  • adding a category
  • adding expense with name, amount and category
  • sum up of monthly spendings split into categories
  • saving data to an external database (ex. Firebase)

Nice to haves:

  • sign up, log in, and handling multiple users


Side projects are a great way to show your skills to land first job as Junior Front-end Developer. Let your potential employer know what did you build so far. They will not only look at the webpage but also analyze your code, so make sure it's clean.

Before you start building something new create a list of requirements for MVP (Minimum Valuable Product). During development, you will discover more interesting functionalities your application can have, just add it as a nice to have to the list. It will help you finish the project on schedule.

Remember, you don't have to mimic those examples 1-to-1. Feel free to change, add or remove any detail you like. If you have older projects you used for learning new skills you can always refactor it and put it in a portfolio.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at to find out more interesting content.
Follow me on Twitter.

Top comments (14)

nopito profile image
Elizabeth Manrique

Nice! Adding my two cents here, I found that is also a good source of ideas for projects in case someone is looking for it. It has different levels of ideas based on the complexity, along as clear expectations about the features to build.

blaquebeardcoder profile image

These are some awesome gems!! Thanks for sharing this resource!

andrewbaisden profile image
Andrew Baisden

Cool some nice projects here.

devhalimah profile image

So helpful

Thanks for sharing

blaquebeardcoder profile image

This is super helpful! Thank you for sharing!

bobiology profile image
Sakawa Elijah Bob

Great insight! Definitely I’ll jump and run with one. Thanks

eman_sasu7 profile image
Emmanuel Sasu

Thank you so much. I'll definitely try one of these!

nelsonb1130 profile image
Nelson Prabu J

Thats good info.. Thanks for sharing...

nyirendasosten profile image
sosten nyirenda

Awesome. I have been developing multiple pages website but never developed a game. Think its about time. Thanks for sharing

theketan2 profile image
Ketan Ramteke

Very Noice 😄

firelight1729 profile image
Midhun Kasibhatla

Thank you for guidance

sarangpratham profile image
Sarang Pratham


usamaidrsk profile image
Usama Idriss Kakumba

Thanks these are quite interesting projects to try out

shruti270199 profile image

This is exactly what I was searching for <3