Dev Portfolios: How to Stand Out From the Crowd

A lot of new developers create identical landing pages from the same template (I wasn’t any different). As a result, job applicants are drowning in a pile of CVs and other portfolios.

Create Interesting Projects for Your Portfolio

I am a front end developer who owns a small software house. As an entrepreneur, I’ve seen many candidate’s portfolios. Many landing pages created by those developers were pixel-perfectly identical!

In Poland, we have an incredible challenge for front-end developers called “The Weekly Web Dev Challenge.” I love this challenge and I participated in it when I was a junior. Each week participants create landing pages and are then given feedback.

So, after a few challenges, multiple developers had similar projects in their portfolios/CVs, which they then used to apply to the same employers.

Put yourself in the employer’s shoes. You’re looking for a new developer, so you posted a job offer. After a few hours, you get ten CVs, all with the same project! Not one stands out from the crowd.

Those challenges are useful for practice, but they’re not suitable when you’re trying to distinguish yourself. No one tells you that when you’re looking for your first job. That’s why I’m telling you now!

You Can Do a Lot with HTML and CSS

If you don’t know JavaScript yet, you can still create projects and add scripts later. Start with building simple websites similar to those you like or use often. Then gradually start building more complex websites.

Where Can You Find Design Inspiration?

As an aspiring front-end developer, you probably don’t know much about design. That’s totally fine! You’ll never be responsible for creating a site or product’s design. Knowing the basics of design is helpful and in my opinion, required, but you can leave that for later when you are familiar with the front end stack.

Most of the portfolios that I’ve seen are not very attractive, because developers without much design training tried to design them on their own.

After a few years of work as a front-end developer, I still don’t know how to create all those beautiful designs. I’m 100% a tech person. I have no imagination (except spatial imagination!). Let designers do their job.

But to help ourselves, we can use what they’ve created! The most famous websites for design inspirations are:

• Dribbble
• Behance

You can search for images there and use them to make coded versions. Just remember to give credit to the design owner!

What Should You Create?

You can create all sorts of different projects. Most of the Dribbble/Behance landing pages will be a challenge to work with because of all the images and icons. But you can develop applications! Applications are not as fancy as landing pages, but that’s ok. Fewer custom images mean fewer problems.

As you can see, there aren’t many custom icons. You can replace them all with free ones, or, if you already know some design, you can create your own.

But you aren’t forced to do that. You can create multiple other things, such as:

• One-div images
• CSS images
• CSS animations

I love spending time on searching CodePen for new inspirations. You should try it too!

Beginner With JavaScript

At the beginning of your adventure with JavaScript (which never ends, even for the JavaScript guru), you can add simple scripts. You can upgrade all static websites by adding some JavaScript.

Here are a few simple ideas:

• Animated hamburger menu.
• Header with position fixed after scrolling.
• Buttons which scroll down to the section on click.
• Animation on scrolling.
• Buttons that open modal/pop-up on click.
• Basic website state — adding and removing elements on click.

There are plenty of things that you can do!

Already Know JavaScript?

If you’re familiar with JavaScript, you can go further creating projects. A lot of my projects started with the front end. The back end was either not developed, was in progress, or our company was responsible for creating only the front end. You can do the same. Create apps that are ready to integrate with the back end!

Half Apps

As I wrote before, everybody creates landing pages. So, to stand out, why not make a more complex app? Applications on the front end side are much more straightforward and its easier to achieve pixel-perfection. There might be a lot of different screens, but they’re all much smaller than a landing page.

If you already have the static-dashboard app, you can bring it back to life! You don’t have to know back end to create full apps (for the learning process, of course). My favourite tool is a JSON server. Using this tool, you can create your own database with all necessary requests.

I would love to see an app like this in someone’s portfolio. Basic authorisation, user profile, a dashboard with some charts, and that’s it. It doesn’t have to be a big app, but it shows that someone understands requests, which is a big plus.

Tools

After creating various landing pages and dashboards you might feel bored. That’s totally fine! There are many other projects that you can create.

Creating different tools might be helpful to fight boredom. Those tools can be made in layout frameworks such as Bootstrap or Tailwind. It won’t look fantastic, but it will allow almost to skip the HTML and CSS part. With this help, you might focus on the JavaScript part.

What to Create?

Everything which will speed up your work! If you hate to UI (user interfaces), you can create your own UI generator!
Generators

• Box-shadow generator
• Custom CSS checkbox/radio inputs generator
• New trendy UI generators such as neumorphism or glassmorphism

Other

• Drawing tool ( like MS Paint)
• Data visualisation
• Your own NPM modules

Games

I have hardly ever seen a game in junior front-end developer’s CV. There are a lot of simple games you can create with JavaScript, gradually increasing in complexity. You can start with Tic Tac Toe and finish with 3D games!
Some examples of games written in JavaScript:

• Brakeout 2D with tutorial
• Super Mario like game
• Moving cube

Creating games might be hard. It would be best if you broke down the logic of the game inro prime factors. It will help a lot to understand what you need to do. I will describe the logic of Tic Tac Toe for you.

• The game should have two game modes: player vs player and player vs computer.
• One of the players choose 0 and the other one x to mark their choices.
• The game is played turn by turn.
• The game ends when one of the players has the whole column/row /diagonal filled with his/her symbol.
• If no one wins, then there is a draw.

Additional features:

• Randomize which player starts.
• Add restart button.
• Add user name.

Help Yourself

I hope that I have given you the employer’s perspective. If you don’t help yourself to stand out, no one else will.
Thanks for reading and see you soon!

You can follow me on social media or sign up for my newsletter!
🐦 Twitter
👨🏻‍💻 Blog
📰 Medium
💌 Newsletter
🦄 Frontend Unicorn book