5 Javascript Projects You Should Build as Junior Frontend Developer

thumbnail for 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

https://symu.co/freebies/templates-4/blog-psd-template/

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.

Requirements:

  • 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

https://www.google.com/search?q=tic+tac+toe

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!

Requirements:

  • 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

3

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).

Requirements:

  • 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)

https://www.trackseries.tv/

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.

Requirements:

  • 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)

https://www.spendee.com//

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!

Requirements:

  • 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

Summary

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.

You might also like

thumbnail for What Do You Need to Know as a Junior Frontend Developer + Bonus Interview Questions
November 2, 2020
What Do You Need to Know as a Junior Frontend Developer + Bonus Interview Questions
I will explain what you really need to know to get hired as Junior Front=end Developer."
thumbnail for Tailwind CSS: The future of styling or just another CSS framework?
January 15, 2021
Tailwind CSS: The future of styling or just another CSS framework?
Tailwind CSS looked like the first framework I would enjoy using. I already saw how easily you can create beautiful UIs with it (thanks to Tailwind UI project).
thumbnail for My 2020 In Review: What I Learned and Accomplished as Senior Front-end Developer
December 28, 2020
My 2020 In Review: What I Learned and Accomplished as Senior Front-end Developer
With 2020 coming to an end (finally!) I decided to do a little summary of things I learned during this year.

Hi friend,

Over the years working as a Front-end Developer in numerous projects I have gained a lot of experience. I've seen how choice of the right technology and architecture can affect the application and team behind it in a long run.

On this blog I want to share my experiance. I will show you solutions I discovered over the years. I want to teach you how to create better code and be successful developer.

Join the list of developers interested in web development

After signing up you will receive for free: Interview questions I ask as technical recruiter

newsletter