ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Create a Web Development Portfolio That Wins Clients

Updated on May 4, 2015

If you're a web developer, having a quality portfolio can seem difficult to craft. You've probably been bombarded with non-disclosure agreements from much of the previous work you've done, or have little quality work that is still live or has otherwise maintained it's original status.

Web developers usually have another problem too: if you don't do design work, you are limited to the type of clients that can appreciate that work. Many clients, if not in the web industry themselves, only know how to judge the quality of a web project visually; this is where many web designers have the edge.

So what is a perfectly talented and unappreciated developer to do?

In this article we'll go over the steps to combat the common issues above, as well as a few other tips to create a winning online portfolio.


Where to Collect Quality Work

Too many designers and developers will spend a lot of time crafting their portfolio's display, that they pay less attention to the quality of what's actually in it. Clients or potential employers care most about the quality of the work.

Make sure you have your best work out there, and that it is what is given the most attention.

If you feel as though you've done quite a bit of work with nothing to show for it, it is likely because of one of the following:

  1. You do not have the original code, and the work is either now down or has been mismanaged since (by other developers, the client, etc.) so that it is not of quality any longer.
  2. You are unsure of what you can legally/ethically show in your portfolio for past work.

Use Code Repositories (Source Control)

Many freelancers do not use code repositories (source control) because they feel as though they don't need to while working solo. However, code repositories have a purpose greater than collaboration. They also keep a record of your code.

So, even after you launch a client's project, you have a record that this code is owned and maintained by you. It will also be a hosted original copy of your own work, regardless of what the live site transforms into.

As you may have guessed, this is also handy for rolling back to a previous version of a website if something is lost or broken.

Open a free account at Github and start learning how to use it. If you are a freelancer who has never used source control before, this can also expand your skill set and make you more marketable.

Contact Previous Clients

Very few clients come with their own contracts for new freelance projects, and any larger businesses would have their own form of a non-disclosure agreement that you've signed.

Look through any saved agreements with past clients, and see if they explicitly say that you cannot share the work publicly. If the agreements can not be found, or they otherwise to not explicitly say that they cannot be a part of a a public portfolio, then contact the previous client for permission.

Tip: Keep everything you sign uploaded into a free service like Google Drive or Dropbox.

Tips for asking for permission:

  • If possible at the beginning, get in writing (a contract) that states you are the copyrighted owner of the work.
  • Leverage use of it in your portfolio by stating you can remove any branding material associated with the project when placing it on your site.
  • Ask if you can write a case study on the project, linking back to the work on their site (this is usually seen as good PR and free advertising for the company).
  • Be choosy when picking up new projects: ask ahead of time if you'll be able to show your own work in your portfolio, and choose more clients that let you place a link back to your website in their website's footer.

What About the Client-less Beginner?

If you are new to the web development scene and do not have any, or very little, client-based work to show, then you must still create examples of your code to put out there.

While this will limit your exposure as a lot of companies want people with technical experience as well as business experience, having quality side projects in your portfolio shows passion for your craft and experience level.

There are plenty of places to find free PSD templates. Download some and then cut them up for quality example pieces. Spend some quality time doing this -- rushing will only show a rushed product for the client.

Otherwise, find the first few clients among friends and family, local communities, school opportunities, etc. Here are a few more ideas for finding the first few clients: A Step-by-Step Guide to Getting Your First Web Development Client.


The Right Number of Pieces

What is the right number of pieces to show in your portfolio? Of course, this answer changes based on experience, if applying for a specific position, and industry. The following is for a freelance web developer or web developer looking for standard employment.

Short answer: a sweet spot seems to be between 3-10. This is, of course, a rough number, and a wide range.

Long answer: Be picky about what goes into a portfolio. If a project got messy or is unfinished, don't include it, even if you feel as though your portfolio is lacking in quantity. If you have a lot of great work, include the best, even if that goes above 10 pieces.

Many clients want in and out with their answers: "Do you know what you're doing? Do you have the skills specific to my needs? Can you help me understand what I need?"

If you show all of your work, including mediocre work, then the client will only assume that mediocre work is the best work.

On the contrary, if you include too many quality pieces, it can be distracting. Feature at least a few of your best works -- ones where you were pushed to your limit, showed creativity, went the extra mile, or showed your own passion for the craft.

Where do you find most of your clients right now?

See results

Other Items to Include

As a web developer, screenshots only go so far. There are a number of ways one can increase the quality of their portfolio in spare time with additional content.

Have a Real Copy of the Site

Host a real copy of all portfolio pieces. A good habit of keeping source control up to date will help with always having the best version on hand. Link to a self hosted version of the site. In addition a live link may be appropriate.

Write About Each Project

Case studies are fantastic to show in a portfolio. Good web developers have a process, and provide insight to the client, opposed to simply taking instructions. Crafting write-ups of a project's process, along with how you tackled a client's goals can influence future clients of your real value.

Get a Professional Designer

If not a designer yourself, find someone to professionally design your portfolio. Many developers work with other designers for client projects, and those designer relationships would be a great place to start. If there are no designer relationships yet, this could be a good way to get in touch with one and to nurture ongoing collaboration.

Provide a Resume, CV, or LinkedIn URL

All employers will require a formal resume and history of work. Even many serious freelance clients will want to see this more traditional view of experience. Have an updated resume ready to go in case any client asks for one, or place a resume, CV, or LinkedIn URL out to the public on your portfolio.

An Easy Contact Method

An easy contact method is usually through a contact form on a website, or otherwise easy-to-find contact information. Placing a phone number on a website may lead to missed phone calls, but a regularly checked email address can be a great starting point for setting up times to speak. Make it as easy as possible for potential clients to reach you.

You can even use a service like SetMore, allowing potential clients to recommend times to speak, or sending out invitations through this service.


Provide Your Insight

How many new leads do you get per month?

See results


    0 of 8192 characters used
    Post Comment


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)