Front-end development is often called “client-side development” because it refers to everything that the user (the client) can see.
So you’ve taken web development courses at BrainStation, landed some clients, developed websites you’re proud of, and now have a body of work under your belt.
What comes next? Well, it’s time to showcase all of it in an online portfolio to help boost your brand and attract new eyeballs to your work. And when you’re trying to stand out from other developers in this competitive industry, there are a few tried-and-true strategies to ensure your dream employers and clients want to stick around long enough to get a sense of your development savvy.
Here are some tips on how to build a standout developer portfolio.
Showcase Work for a Broad Variety of Clients
Whether you’re passionate about fashion or food or finance, it’s tempting to specialize in developing websites in the niche you love.
But when it comes to your portfolio, you really need to showcase work you’ve done for a broad variety of clients to highlight your versatility — and to ensure future clients from various industries get a sense of your range, particularly if you’re hoping to branch out in different areas.
“If you’re aiming for a tech company, they want to see other tech websites. If you’re looking at health care, they want to see other healthcare-related websites,” says Jay Eckert, the Founder and Creative Director of Parachute Design. “The broader you can keep it, the more people you can appeal to.”
Don’t Include too Many Samples
Eckert says it’s crucial to only showcase projects that reflect the type of work you want to attract down the line. “It’s kind of a fine balance you want to manage between showing diversity, but not too much,” he says.
He recommends having eight to 10 websites you’ve developed on display and says that’s the magic number based on the analytics from his company’s own website.
After around 10 samples, people stop scrolling, he explains — which is particularly crucial intel when you’re trying to hook a future client or employer and keep their interest.
“But if you have too few,” Eckert warns, “you don’t look experienced enough.”
Share Your Motivations
It’s one thing to post a link or screengrab of a development project you’re particularly proud of, but you can take your portfolio to the next level by drawing people in with explanations of how those projects came to life.
That means sharing how things were created or envisioned, and not just in a way that would make sense to another developer. In other words, sure, you can talk about the nuts-and-bolts of your coding process — but also keep things casual and conversational so potential employers from all backgrounds, be it human resources or product management, get a sense of your thought process and motivations.
A few questions to consider answering for each sample you share: What inspired you? What hurdles did you overcome? And how did you use programming languages to bring your vision to life?
“You want to draw attention to certain features that make the project unique,” Eckert adds. “Instead of showing a static image of a webpage, let’s say, maybe you want to have an animated browser so it looks like somebody’s actually interacting with a certain part of the page you want to draw attention to.”
Don’t be Cookie-Cutter
Most websites employers encounter nowadays are template-driven, Eckert says. “So a firm will create a homepage, a landing page, a content page — and that’s it. And they’ll try to jam everything in.”
If you want your portfolio to shine, consider breaking the boundaries of commonplace grid design by creating custom pages — like you would for a client — so it’s a well-knit story from start to finish, he says.
“If you can break the grid tastefully and responsibly, I think that really captures a lot of attention and shows you’re thinking beyond cookie-cutter,” Eckert adds. “The more personality you can show, the better.”
That applies to your photo choices as well. Using stock images might be tempting, but Eckert says custom-designed artwork and unique photography is far more eye-catching. “People tend to glaze over stock images because we see them repeatedly,” he says. “Making it more personable will go above and beyond everyone else.”
Make Sure Your Code … Actually Works
Want to get hired? First and foremost, your portfolio website needs to function properly.
“We get a lot of submissions where the website is broken, or not working at all,” Eckert says.
He also confessed that, when it comes to shortlists of potential hires, his team will usually take a peek behind the curtain to see how their portfolio websites are built and how clean their code is.
So if you want your portfolio to shine, make sure your code is tidy and error-free, check for any broken links or images, and test it out on a variety of browsers and devices so you know anyone clicking through will get the best experience.