{"id":8427,"date":"2019-03-06T15:57:52","date_gmt":"2019-03-06T20:57:52","guid":{"rendered":"https:\/\/blog.brainstation.io\/?p=8427"},"modified":"2020-12-09T16:44:11","modified_gmt":"2020-12-09T21:44:11","slug":"5-tips-for-building-a-standout-web-developer-portfolio","status":"publish","type":"post","link":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio","title":{"rendered":"5 Tips for Building a Standout Web Developer Portfolio"},"content":{"rendered":"

So you\u2019ve taken web development bootcamp at BrainStation,<\/a> landed some clients, developed websites you\u2019re proud of, and now have a body of work under your belt. <\/span><\/p>\n

What comes next? Well, it\u2019s 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\u2019re 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.<\/span><\/p>\n

Here are some tips on how to build a standout developer portfolio. <\/span><\/p>\n

Showcase Work for a Broad Variety of Clients<\/b><\/h3>\n

Whether you\u2019re passionate about fashion or food or finance, it\u2019s tempting to specialize in developing websites in the niche you love.<\/span><\/p>\n

But when it comes to your portfolio, you really need to showcase work you\u2019ve done for a broad variety of clients to highlight your versatility \u2014 and to ensure future clients from various industries get a sense of your range, particularly if you\u2019re hoping to branch out in different areas.<\/span><\/p>\n

\u201cIf you\u2019re aiming for a tech company, they want to see other tech websites. If you\u2019re looking at health care, they want to see other healthcare-related websites,\u201d says Jay Eckert, the <\/span>Founder and Creative Director of Parachute Design<\/span>. \u201cThe broader you can keep it, the more people you can appeal to.\u201d<\/span><\/p>\n

Don\u2019t Include too Many Samples<\/b><\/h3>\n

Eckert says it\u2019s crucial to only showcase projects that reflect the type of work you want to attract down the line. \u201cIt\u2019s kind of a fine balance you want to manage between showing diversity, but not <\/span>too<\/span><\/i> much,\u201d he says. <\/span><\/p>\n

He recommends having eight to 10 websites you\u2019ve developed on display and says that\u2019s the magic number based on the analytics from his company\u2019s own website.<\/span><\/p>\n

After around 10 samples, people stop scrolling, he explains \u2014 which is particularly crucial intel when you\u2019re trying to hook a future client or employer and keep their interest.<\/span><\/p>\n

\u201cBut if you have too few,\u201d Eckert warns, \u201cyou don\u2019t look experienced enough.\u201d<\/span><\/p>\n

\n
\n
\"Icon\"<\/div>\n
\n

Become a Web Developer in just 12 weeks!<\/p>\n

BrainStation’s Web Development Diploma Program<\/a> is a full-time, 12-week program that equips professionals with the skills and experience to start a new career in development.<\/p>\n

Speak to a Learning Advisor<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n

Share Your Motivations<\/b><\/h3>\n

It\u2019s one thing to post a link or screengrab of a development project you\u2019re 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.<\/span><\/p>\n

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 \u2014 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.<\/span><\/p>\n

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?<\/span><\/p>\n

\u201cYou want to draw attention to certain features that make the project unique,\u201d Eckert adds. \u201cInstead of showing a static image of a webpage, let\u2019s say, maybe you want to have an animated browser so it looks like somebody\u2019s actually interacting with a certain part of the page you want to draw attention to.\u201d<\/span><\/p>\n

Don\u2019t be Cookie-Cutter<\/b><\/h3>\n

Most websites employers encounter nowadays are template-driven, Eckert says. \u201cSo a firm will create a homepage, a landing page, a content page \u2014 and that\u2019s it. And they\u2019ll try to jam everything in.\u201d<\/span><\/p>\n

If you want your portfolio to shine, consider breaking the boundaries of commonplace grid design by creating custom pages \u2014 like you would for a client \u2014 so it\u2019s a well-knit story from start to finish, he says. <\/span><\/p>\n

\u201cIf you can break the grid tastefully and responsibly, I think that really captures a lot of attention and shows you\u2019re thinking beyond cookie-cutter,\u201d Eckert adds. \u201cThe more personality you can show, the better.\u201d<\/span><\/p>\n

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. \u201cPeople tend to glaze over stock images because we see them repeatedly,\u201d he says. \u201cMaking it more personable will go above and beyond everyone else.\u201d<\/span><\/p>\n

Make Sure Your Code \u2026 Actually Works<\/b><\/h3>\n

Want to get hired? First and foremost, your portfolio website needs to function properly.<\/span><\/p>\n

\u201cWe get a lot of submissions where the website is broken, or not working at all,\u201d Eckert says. <\/span><\/p>\n

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.<\/span><\/p>\n

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.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

There are a few tried-and-true strategies to get the attention of your dream employers (and clients).<\/p>\n","protected":false},"author":7,"featured_media":8429,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97],"tags":[176,792,100,791],"yoast_head":"\n5 Tips for Building a Standout Web Developer Portfolio<\/title>\n<meta name=\"description\" content=\"Building a portfolio? 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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Tips for Building a Standout Web Developer Portfolio\" \/>\n<meta property=\"og:description\" content=\"Building a portfolio? 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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio\" \/>\n<meta property=\"og:site_name\" content=\"BrainStation\u00ae Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-06T20:57:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-09T21:44:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/03\/joshua-aragon-1247394-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"4080\" \/>\n\t<meta property=\"og:image:height\" content=\"2720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BrainStation\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brainstation.io\/blog\/#website\",\"url\":\"https:\/\/brainstation.io\/blog\/\",\"name\":\"BrainStation\u00ae Blog\",\"description\":\"The Digital Learning Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brainstation.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#primaryimage\",\"url\":\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/03\/joshua-aragon-1247394-unsplash.jpg\",\"contentUrl\":\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/03\/joshua-aragon-1247394-unsplash.jpg\",\"width\":4080,\"height\":2720,\"caption\":\"How to build a web developer portfolio\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#webpage\",\"url\":\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio\",\"name\":\"5 Tips for Building a Standout Web Developer Portfolio\",\"isPartOf\":{\"@id\":\"https:\/\/brainstation.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#primaryimage\"},\"datePublished\":\"2019-03-06T20:57:52+00:00\",\"dateModified\":\"2020-12-09T21:44:11+00:00\",\"author\":{\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11\"},\"description\":\"Building a portfolio? 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.\",\"breadcrumb\":{\"@id\":\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/brainstation.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Tips for Building a Standout Web Developer Portfolio\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11\",\"name\":\"BrainStation\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g\",\"caption\":\"BrainStation\"},\"description\":\"BrainStation is a global leader in digital skills training, empowering businesses and brands to succeed in the digital age. Established in 2012, BrainStation has worked with over 250 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 50,000 professionals and some of the largest corporations in the world.\",\"url\":\"https:\/\/brainstation.io\/blog\/author\/brainstation\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 Tips for Building a Standout Web Developer Portfolio","description":"Building a portfolio? 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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio","og_locale":"en_US","og_type":"article","og_title":"5 Tips for Building a Standout Web Developer Portfolio","og_description":"Building a portfolio? 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.","og_url":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio","og_site_name":"BrainStation\u00ae Blog","article_published_time":"2019-03-06T20:57:52+00:00","article_modified_time":"2020-12-09T21:44:11+00:00","og_image":[{"width":4080,"height":2720,"url":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/03\/joshua-aragon-1247394-unsplash.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"BrainStation","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/brainstation.io\/blog\/#website","url":"https:\/\/brainstation.io\/blog\/","name":"BrainStation\u00ae Blog","description":"The Digital Learning Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brainstation.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#primaryimage","url":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/03\/joshua-aragon-1247394-unsplash.jpg","contentUrl":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2019\/03\/joshua-aragon-1247394-unsplash.jpg","width":4080,"height":2720,"caption":"How to build a web developer portfolio"},{"@type":"WebPage","@id":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#webpage","url":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio","name":"5 Tips for Building a Standout Web Developer Portfolio","isPartOf":{"@id":"https:\/\/brainstation.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#primaryimage"},"datePublished":"2019-03-06T20:57:52+00:00","dateModified":"2020-12-09T21:44:11+00:00","author":{"@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11"},"description":"Building a portfolio? 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.","breadcrumb":{"@id":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/brainstation.io\/blog\/5-tips-for-building-a-standout-web-developer-portfolio#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brainstation.io\/blog"},{"@type":"ListItem","position":2,"name":"5 Tips for Building a Standout Web Developer Portfolio"}]},{"@type":"Person","@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11","name":"BrainStation","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g","caption":"BrainStation"},"description":"BrainStation is a global leader in digital skills training, empowering businesses and brands to succeed in the digital age. Established in 2012, BrainStation has worked with over 250 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 50,000 professionals and some of the largest corporations in the world.","url":"https:\/\/brainstation.io\/blog\/author\/brainstation"}]}},"_links":{"self":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/8427"}],"collection":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/comments?post=8427"}],"version-history":[{"count":5,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/8427\/revisions"}],"predecessor-version":[{"id":12309,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/8427\/revisions\/12309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/media\/8429"}],"wp:attachment":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/media?parent=8427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/categories?post=8427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/tags?post=8427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}