How to craft the perfect web developer portfolio

Earlier this week, we were asked what we look for in a web developer portfolio.

And as luck would have it, we have quite a few thoughts on the matter. We’ve worked with a lot of front-end developers over the years. In that time we’ve come to know what good development portfolios look like.

So this week we took some time to jot down our ideas and thought we’d present them here as part of our Ask45 series. By the way, if you’re new to the series and want to catch up, check out Part 1 and Part 2.

For this article, we’ve broken things down into three sections: The design, the information, and what we find lacking in most portfolios. We’ll start with the hardest part of the portfolio for many front-end web developers.

Designing a web developer portfolio

We understand, most web developers aren’t designers. But that doesn’t mean you get a pass—your site still needs to look good.

Luckily, there are things you can do to ensure your site looks well-designed and considered. Basic design principles can go a long way. Pay attention to details like white spacing, typography, information hierarchy, and calls to action. These simple tactics will organize and elevate your site while drawing people in.

Pay attention to details like white spacing, typography, information hierarchy, and calls to action.

Also, make sure there is a sense of personality and creativity to your portfolio. Don’t be afraid to let people see who you really are. Use a friendly and down-to-earth tone throughout to give people the sense that they’re having a conversation with you.

Finally, we’ve noticed that many web developers go overboard with animations and the latest design gimmicks. We get it, you’re good at CSS. But don’t fall into this trap. As with most things in life, especially animations, less is more. Show good taste and restraint; the animations should enhance the design, not be the main event.

What we’d like to see in your developer portfolio

Knowing what to feature in their portfolio is another roadblock for web developers. What you include could vary depending on your experience and level of project documentation, but here a few things we look for:

Show big brands first

Big brands spend millions per year developing recognition. If you have worked with a big brand, leverage their familiarity and put them front and center. Even if it’s subconscious, showing a bigger brand can help raise the perceived quality of your work.

Case studies

These can be difficult to put together, but a detailed case study is a great indicator of project outcomes. Referencing the client and showing screenshots are not enough. You’ll want to write about your process, your contributions, technologies used, obstacles overcome, and specific deliverables.

You’ll also want to share real data and results when possible. If we see, “I helped Microsoft increase their page load speed by 10x and reduced errors by 25%”, we’re instantly intrigued. Metrics hold weight, make sure you’re keeping track of them along the way.

Show that you take code seriously

It’s important for someone reviewing your portfolio to know that you take pride in your craft. Code examples are sometimes hard to actualize, but links to your Codepen or Github can be beneficial. Not only is your code on display, but it also shows that you’re part of a larger community and you contribute to the cause.

You may also want to consider blogging about your craft. Writing articles about web development and offering solutions to problems on a daily basis can be powerful. It doesn’t hurt to flex your development muscles and remind potential clients that you’re a subject matter expert.

A word of caution about blogging though: If you can’t commit to it, it might be better to put your time elsewhere. An inactive or outdated blog can be worse than having no blog at all.

Common shortcomings in many web developer portfolios

We’ve seen a lot of development portfolios and have some suggestions to help fill the gaps. First and foremost, focus on your communication, speed, and reliability.

Communication is key

When it comes to working with developers, it’s not always about who’s got the cleanest code. You’re still hired to be part of a team working towards a common goal. Showing that you can communicate and deliver assets on time is more than half the battle. Building trust with potential clients or project partners will help you immensely.

Having thoughtful testimonials will put potential clients at ease and help reiterate your value.

Build trust with social proof

Trust can be hard to convey online, so why not let others do it for you? Include testimonials from former clients to help tell your story. Having thoughtful social proof of your skillset will put your potential client at ease and help reiterate your value.

Paint a picture of what it’s like to work with you

You might also consider showing your potential client what it’s like to work with you. Share details of your up-front requirements. Let them know that you have a dedicated Slack channel for weekly check-ins and a GitHub page to track development progress. Reassure that when the project nears the end you’ll help them with the launch and code/asset transfer.

Even though every project is different, this will give the client peace of mind knowing that there is a process in place.

Bringing it all together

We hope we shed some light on a few points of emphasis we look for when hiring web developers. Take some or all of these suggestions and apply them to your site—we think you’ll see great results.

If you have any questions, please feel free to leave us a comment below. Even better, if you put this article to good use, leave a link to your site below so we can check it out.