How to Make a Junior Web Dev Portfolio That Will Get You a Job

Stand out from the crowd

by Nik MalevOctober 23 2022

pc-paintin    g

When you’re trying to land your first role as a software developer, the most important piece of your job application is your portfolio.

Why is it so important?

  • The business you’re applying for needs something. As a junior dev you don’t have any relevant experience yet. Your portfolio shows that you know how to create what they need.
  • Browsing your portfolio is an experience that creates an emotional impact in your prospective employer’s mind. It’s a positive association and a reason to remember you.

How many projects should you include in your portfolio?

Short answer - two to four.

There is no perfect amount, but keep in mind that quality trumps quantity and first impressions are everything.

Most people are pretty busy. We have short attention spans, and everything is competing for our attention. The hiring manager may be sorting through hundreds of applications. There is a chance that they may look at the first project in your portfolio. You need to make sure it’s a hard hitter.

Imagine that your app is auditioning for a talent show. It needs to be immediately impressive and hit the ground running because it has very limited time to prove how good it is.

It should look clean. It should be obvious what it does. Most importantly, it shouldn’t crash within a minute of use.

CsvWD Simon Cowell when your web app doesn't finish loading.

Oh, and it needs to be live. Your portfolio should link to GitHub repositories with publicly viewable source code. It must also link to live, hosted instances of your apps that your employer can actually use and interact with.

If it’s not live, it’s hard to get an idea of what you can do. You can’t even be certain that the app even works.

What if you can't host a live version? Maybe for certain technical reasons it's very expensive for you to host, or it's only half finished.

While not ideal, in that case, the next best thing is to create a video demo. Create a short (1–5 minute) video demonstrating the functionality of your app, upload it to YouTube and link the video demo instead of the link to the live app.

Why not have one project if my portfolio should only do one thing well?

Having only one app doesn’t let you cover a wide range of disciplines, because each app should be laser focused on doing one thing well. Additionally, if you only have one app, your portfolio looks empty. Even if they don’t click on all of them, you still need to give an impression that you have a wide range of experience.

I recommend having two to four solid projects in your portfolio. Each project focuses on a different core functionality and set of technologies. It’s okay to have some overlap in the tech stack, just don’t make them all completely identical.

Each portfolio app should do one thing really well, and it needs to be immediately obvious what that thing is. Don’t gate your amazing paint brush tool behind a half-baked registration and login flow.

What if theres an error in the registration process? What if the user leaves before signing up because they were distracted, or even worse, because they were frustrated?

Businesses put a lot of time and effort into designing UX flows and user retention patterns to prevent people bouncing from their apps because people are so distractable. The slightest amount of friction can cause someone to leave before they get a chance to see why your app is so incredible.

If the user authentication is the core functionality and skill you are demonstrating with your app, you should really lean in to it. Integrate welcome emails, activation emails, and forgotten password reset emails. Validate and enforce a strong password. Integrate third party sign in (sign in with Google, Facebook, etc)

As Stephen Covey, the author of Seven Habits of Highly Effective People said, keep the main thing the main thing.

CsvWD Make the first impression count.

What should you include in your portfolio?

It depends on the type of role you are going for. Here is an example of a well-rounded Full Stack developer portfolio. This is the standard portfolio that any decent bootcamp is going to help you create.

1. The Portfolio Site
  • HTML
  • CSS

Probably the most important piece in your entire portfolio is the portfolio site itself.

This is where you introduce yourself, your career goals, and link to all the apps you’ve built with a description of them.

Your portfolio site is a part of your portfolio. Your CV / resume should link to your portfolio site under your "Projects" category.

2. UX Oriented Front End App
  • Node.js
  • Front-end framework like React, Vue, or Angular

Build a web app focused on an interactive experience. It doesn’t need to connect to a backend ( although it could). Primarily, it should be a smooth, enjoyable and obvious experience for the user

For example:

  • A todo list / calendar app
  • A trivia or quiz game
  • A drawing app (like MSpaint)
  • Tic-tac-toe with a computer opponent (Hard mode: Chess)
  • A piano keyboard with some different preset sounds
  • Data visualization using something like D3.js (e.g weather, traffic, finance)
3. Back End App
  • User Authentication
  • CRUD Database (SQL, PSQL or MongoDB),
  • API (Express (Node.js) OR Flask (Python)
  • Swagger documentation (optional but highly valuable)

Build an app with an emphasis on back end infrastructure. It’s a good idea to expose your API and give it a clean documentation via Swagger.

The most classic example is a social media clone or a jobs board.

For e.g the Instagram / Twitter clone

  • Users can register and sign in to an account
  • Users can post images / statuses.
  • Users can delete their images / statuses
  • Users have a profile with all their posts
  • Users can view other people’s profiles
  • Users can follow other users to see their posts on their feed
4. Design oriented website
  • HTML
  • Advanced CSS (animations, hover and active states)

Find a well known website and rebuild it using purely html and css - without any functionality for e.g the buttons don't need to work. Bonus points if you do animations and hover effects.

For example, if you rebuild the YouTube or Amazon home page. Your goal should be given a side by side comparison, you could not tell which one is real without clicking anything on the screen.

With these four apps, you should be in a good position to apply for any junior web development role.

What about projects outside of Web Development?

Even if you are going for a role in web development, there is no harm in including an project that isn't web development adjacent.

For a long time my portfolio had a simple mobile game I made with Unity that was downloadable via the iOS and Google Play Store.

One day I got a call from a company I applied for, they told me they played my game, loved it and wanted to invite me in for a formal interview. Even though the game had nothing to do with web development, it created a positive association in that hiring managers mind.

Some ideas for projects outside of Web Development

Data Science

  • Data Visualization
  • Data Cleansing
  • Data Collection / Scraping
  • For example, compare all stock returns over the last ten years.
  • For example, compare football teams' win rates when they sign a new player.

Gaming

  • VR (Unity)
  • Mobile game (Unity). Bonus points if you publish it on the App / Google Play Store
  • A web game (using Vanilla Javascript, Phaser.js, React, or Canvas).

Blockchain

  • Deploy a smart contract on Ethereum
  • Release an NFT on a chain like Ethereum/Solana/Avalanche.
  • Launch a meme-coin

Machine learning / AI

  • Computer vision (image interpretation)
  • Natural Language Processing (for example, chatbots or sentiment analysis)

Any one of these ideas can work. It doesn't really matter what it is as long as it looks clean, it's obvious what it does, and most importantly, doesn't crash within a minute of use.

If you want to get feedback on your portfolio, feel free to reach out or join our Discord community .

Thank you for reading 😄

BLOG

Our Thoughts, Written Down

LET'S TALK

Interested In Working Together? Let Us Know!

I'm interested in...
How Would You Like To Get In Touch?