How to Build a Web Developer Portfolio

So you’ve taken a web development bootcamp, developed your Web Developer skills, and developed websites you’re proud of. What comes next? It’s time to showcase all of it in a Web Developer portfolio that will help boost your brand and attract new eyeballs to your work.

And when you’re trying to stand out from other Web 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 Web Developer portfolio.

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 Web Developer 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.”

The best Web Developer portfolios are those that don’t go overboard. 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.”

It’s one thing to post a link or screengrab of a development project you’re particularly proud of, but you can take your Web Developer portfolio to the next level by drawing people in with explanations of how those projects and websites 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 website, 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.”

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.”

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.

If you’re just starting out as a Web Developer, it’s likely that you’re competing against people who can do many of the same things you can. Building a strong, unique personal brand is the first step to standing out from the crowd. If you can’t distinguish yourself as the only person who can do something, you’ll have to rely on your strengths and specialties.

Unfortunately, we can’t tell you that — you’ll have to figure that out for yourself. But your strengths are a good place to start building that brand.

Envision where you’d like to be in five years — what type of professional position you’d like to be in, and what kind of company you want to be working for.

With those goals in mind, you can start to focus on the skills that will get you there. Think of all your skills, not only your technical skills. Are you technically proficient but not much of a self-starter — better suited to a large, structured corporate environment? Or are you better suited to a startup (entrepreneurial, flexible, and proactive)? Are you more likely to rise above your peers based on your skills as a coder, or your leadership as a project manager? Your answers will shape your career ambitions — which in turn will help determine the way you position your personal brand. Developing your brand is a marketing exercise, but it also helps you know what your strengths and goals are, and that’s going to affect the choices you make to build your career as a Web Developer.

Once you’ve figured out where you want to be, you’re ready to begin letting others know.

Think about the most successful brands. They’re identifiable because they feel the same every time you encounter them. You want your personal brand to achieve this as well.

First, develop a professional username and keep it the same across all the platforms you use: GitHub, Stack Exchange, Medium, Reddit, Twitter — the list goes on. Second, find an image to use as your avatar. Depending on how you’re positioning yourself, you may want to use a headshot or a logo; the risk with using a logo is corporatizing yourself — do you want people to know you’re a human being, looking for work? If yes, get a professional-looking headshot. Some platforms let you take it a step further. For your personal website (more on this later), resume, LinkedIn page, or social media profile, you can also choose a personalized color and even a typeface that expresses your personality, and use in your banner images.

You may be thinking: this all sounds a bit superficial—shouldn’t my work stand out on its own merits? You’re not wrong. But if people are going to encounter you and your work across multiple platforms, a consistent handle and image are necessary to help people piece those disparate appearances into a cohesive impression of you—your brand.

About that personal website: get your own URL. You’re going to need a portfolio that highlights what you’ve done and what you can do. This is your best chance to communicate your strengths in your own words, so take your time!

Don’t be afraid to develop a narrative here. Your career is growing — nobody is expecting you to show off dozens of finished projects. What they do want to see is progress in the right direction. So show your early work — but make sure you’re identifying it not just as examples of what you can do now, but as points along the way of your steady growth. In some cases, you won’t be able to show your finished work due to ownership issues. Here, describe your accomplishments resume-style, emphasizing outcomes. Use numbers wherever possible to quantify your successes.

This portfolio is also where you can show off your passion projects. What do you care about? What are your special interests? Imagine making small talk with someone who has a professional curiosity in you. The goal is to keep your presence professional while helping people imagine what it would be like to work with you every day.

GitHub and Stack Overflow are both excellent ways to put your expertise on display.

GitHub is a code repository where anyone can share their solutions to problems — source code for bug fixes, new features, and even tutorials. While many people use it as a project management platform, you can also think of GitHub as a place to show off your work — things you’ve created, even works in progress — to the kinds of people who can benefit from it. You can also contribute to large open-source projects, which is both a resume-builder and a networking opportunity.

Stack Overflow is an online forum where Web Developers can ask and answer questions. For example: “Can I store a function and its parameter values in a variable and call it later?” Answering questions is a great way to position yourself as an expert on a given topic (and a great way to develop new skills, too). Lean into your specialties. If you’re claiming that you’re the best at Swift or Python, this is the chance to prove your bona fides.

While GitHub and Stack Overflow are great places to show off the things you’ve figured out, they’re not necessarily set up to position you as you’d like to be seen.

Your personal website is a great place to publish a blog sharing your big-picture takes. What experiences have you learned from — not just coding skills, but all the skills it takes to get a job done? What are some efficiency-boosting tricks you’ve discovered? What tips have you picked up for motivating team members? What frameworks have you developed for conceptualizing your creative process? What observations have you made about where your industry is headed? This is what people mean when they talk about “thought leadership” — demonstrating that you have your own valuable ideas and insights — and your blog is a great place to stand out not just for the code you can write, but for all the ways that you can be an asset to an organization.

Anything you post to your blog you can also publish to the online platform Medium — and share via Twitter. All these platforms cross-pollinate to drive traffic and boost your profile.

Social media is a useful stepping stone, but face-to-face interactions can yield surprising connections and make stronger impressions.

Virtually every area of development has its own events — chances to learn, to meet new people, and to let others know what you have to offer. Attend a conference (for that matter, why not speak at one?). Take part in a hackathon, or become a mentor at a coding camp for kids.

Websites like Meetup make it easier to find or organize networking events, but there’s no substitute for good, old-fashioned word of mouth.