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.
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
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
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)
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)
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.
I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.
Top comments (14)
Nice! Adding my two cents here, I found that github.com/florinpop17/app-ideas 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.
These are some awesome gems!! Thanks for sharing this resource!
Cool some nice projects here.
So helpful
Thanks for sharing
This is super helpful! Thank you for sharing!
Great insight! Definitely I’ll jump and run with one. Thanks
Thank you so much. I'll definitely try one of these!
Thats good info.. Thanks for sharing...
Awesome. I have been developing multiple pages website but never developed a game. Think its about time. Thanks for sharing
Very Noice 😄
Thank you for guidance