How to make a web developer portfolio
How to make a web developer portfolio

How to make a web developer portfolio

Sharing is caring!

Earlier than you begin, it’s vital to contemplate two issues: first, how your portfolio is completely different from your resume after which how the 2 of them work together.

In essence, your portfolio needs to be a lot greater than your resume. Its scope is far wider, stretching to your total online presence—your LinkedIn, Github, StackOverflow, social networks, private website. Every of those particular person components needs to be according to one another, even right down to the username you utilize.

It won’t sound like a lot, however, holding the identical username throughout all platforms makes it simpler for recruiters and employers to seek out out the whole lot you need them to. Do not forget that you wish to be straightforward to seek out.

Whereas we’re speaking about your online presence, a key aspect of that is GitHub. Whereas we’ve already gone into the varied causes this website is important for web developers, it’s very helpful as a part of your portfolio, too. Having a historical past of constantly making contributions on GitHub sends all the fitting indicators to potential employers. This can present how a lot you might be actively concerned with the coding neighborhood, which bodes effectively for a way useful a colleague you’ll be.

Constructing a portfolio website

Basically, you should use any completely different sort of platform to host your web developer portfolio. Should you don’t know the methods to host a website online without cost, we’ve created step-by-step information that can assist you. Should you’ve discovered the HTML, CSS, and JavaScript ropes of frontend design, you’ll almost certainly be eager to begin creating your individual portfolio website from scratch. Actually, when you’re brief on skilled initiatives to showcase, the method of constructing and styling your portfolio website itself could make a helpful venture to incorporate.

However, in case you are starting to really feel like creating it from scratch is turning into a time-sink, that’s completely alright too. Don’t be afraid of utilizing templates to construct your portfolio website. Not solely does it save time so that you can consider which initiatives ought to truly go into your portfolio itself, but it surely additionally could be a straightforward means in your portfolio website to not seem junior.

Now that we’ve regarded the general idea of how your portfolio needs to be made—in addition to recommendations on methods to construct the positioning itself—let’s transfer on to what content material so as to add to the web page.

What to incorporate in your portfolio website

On this part, we’ll cowl the three central pillars of any web developer portfolio website, in addition to some bonus components you possibly can embrace for additional kudos. These pillars are the important issues employers are on the lookout for as quickly as they arrive in your website: who you might be, what you are able to do, and proof of this (your coding initiatives).

Who you might be

Clearly, this aspect is the one that may differ essentially the most from portfolio to portfolio. Some individuals discover it helpful to present a professional abstract—your expertise, the time you’ve spent in every place/business, and the applied sciences you might have labored with. You may additionally embrace some phrases about what you might be keen about, each inside and out of doors of web development. This could possibly be something: from Node.js to baking, Responsive Web Design to creating kimchi dumplings.

Shakespeare could have written “brevity is the soul of wit” for Hamlet, however, what he was actually speaking about was web development portfolio biography sections. Conserving this part brief is vital—intention for roughly not than 50-75 phrases, if attainable. There’s no want to present your complete life story—loads of time for that after you get the job!—however give sufficient color in order that recruiters get a way of who you might be as a candidate. Take each alternative to face out of your opponents.

What you are able to do

Now that you have just proven who you might be as an individual, it’s time to indicate to the world who you might be as a developer. The following part is the place the intention is to indicate off as visually and clearly as attainable your tech stack, and which instruments you’ve added to your instrument belt.

There are a lot of alternative ways to do that, as you’ll see from the portfolio website examples additional on this article. One strategy you may strive is to group initiatives by-products/instruments after which by programming languages you’ve discovered. That means potential employers can see at a look what you might have in your skillset—in addition to what you don’t have. As web developers are continually studying, make sure to hold your portfolio website up to date with every new talent or expertise.

Showcasing your work

Because you’ve spent the final part itemizing the coding expertise you might have, it’s solely pure for tech recruiters and potential employers to wish to see some proof of that expertise. Above all of the neat design thrives and private historical past, it’s vital to recollect a portfolio is a showcase. Right here is a few recommendations for presenting your coding initiatives.

When attainable for every venture, make sure to embrace three issues:

  1. A hyperlink to/description of the venture
  2. A hyperlink to the supply code itself on GitHub: Should you didn’t write the entire code on the venture yourself, then a useful trace is as an alternative of linking to an outline, hyperlink on to the commit that you just coded yourself. This protects the hiring supervisor’s time negotiating the GitHub repo and might ship them immediately in.
  3. A video overview: When displaying off your work, context is vital. Recording a video permits you to undergo the technical challenges you overcame while engaged in the venture. Use an instrument like Loom and even Zoom to create a video walkthrough of your venture, whereas speaking hiring managers by it. That is virtually like skipping straight to the interview itself and offers potential employers an important thought of your strategy, in addition to the problem-solving skills that each good developer ought to possess.

Deciding on initiatives for current

What if I’ve too many initiatives to select from?

You probably have a lot of gadgets in your portfolio, good work!

Our recommendation is to solely promote a handful of those you wish to spotlight (with photographs/thumbnails and descriptions) after which hyperlink to the remainder of your initiatives in textual content solely.

You probably have them, see when you can embrace a pleasant mixture of among the extra “on the market” initiatives you’ve labored on, in addition to just a few of the extra sensible ones. This reveals hiring managers that you’ve got vary and breadth in your development work to date.

However what when you don’t have any business expertise?

Don’t fear—this isn’t as large an issue as you suppose!

Profession-changers and people beginning out in the world of web development usually tend to run into the issue of solely having three or 4 initiatives so as to add to their portfolio website. So is it even value it makes a portfolio within the first place, even when it appears sparse? Sure, undoubtedly. Listed here are just a few suggestions that can assist you to get around this.

To begin with, it’s vital to notice that when selecting a venture to incorporate in your web development portfolio, these don’t must be a full product. It may well solely be a function of a bigger pre-existing product—that’s simply fantastic. Should you’ve put within the time to work on this venture, share it. Potential employers will wish to be your code, your strategy, and the way you negotiated obstacles within the venture, which are simply as evident when reviewing a function as a lot as a full product.

Further options to impress recruiters

Now that you have just selected the entire data and initiatives to incorporate in your portfolio website, let’s have a look at just a few suggestions that employers want to see extra of.


These are statements as to your skills by people or corporations who’ve labored with you professionally—very similar to suggestions you see on LinkedIn. However what when you don’t have anybody you’ve labored on web development initiatives with?

No drawback. Don’t fear a lot when you don’t have many testimonials about your technical or coding expertise, as you don’t essentially want it. Anybody talking to your ability as a group member is useful—actual individuals vouching for you IRL can’t be overwhelmed by way of impressing hiring managers.

When including these to your portfolio website, the presentation of testimonials is vital to constructing belief. Make sure you use the referee’s picture if you may get their permission, in addition to (or failing that) their firm brand.

Hyperlinks to platforms

We already mentioned how your varied social media networks and tech platforms contribute to your portfolio general, so prominently together with hyperlinks to them is a should. The recruiter or hiring supervisor could merely wish to observe you rather than reach out to a couple of specific open places—make it as straightforward as attainable for them.

Your portfolio is filling up properly, the entire content material has been inserted and styled, and also you’ve even added the ending touches and thrives to make it eye-catching. Your portfolio website is prepared.

…or is it?

Earlier than your finger smashes the keyboard and sends your portfolio out into the cybersphere, let’s overview it another time.

Issues to recollect when reviewing your portfolio

Cease. Take off your regular glasses. Take out your contact lenses. Now, put in your recruiter glasses, and have a look at your web developer portfolio once more.

Should you want extra assistance to get into the tech recruiter’s mindset, then our information that can assist you to put together for the recruiter display screen offers you a very good sense of it.

Now, from the angle of a potential employer, ask yourself these questions:

Have I written an excessive amount, or not sufficient?

In terms of your portfolio, much less is extra. The copy must be simply digestible for hiring managers to scan by, additionally giving a way of who you might be. This additionally extends to your initiatives themselves—be sure to add some context and introduction to them, however, don’t drown the customer in data upfront.

Is the portfolio website cell responsive?

You’ll suppose this can be a given, however within the rush to assemble the entire completely different elements of your portfolio collectively, guaranteeing that it shows correctly on cell units is a should. If you wish to be a web developer at the moment, then Responsive Web Design needs to be a part of not simply the completely different web apps that make up your portfolio but in addition to the portfolio website itself.

Is the person being directed in the direction of a name to motion?

We’ve already mentioned how when a recruiter or hiring supervisor goes by your portfolio website, they’re being led on a journey—the place this journey ought to finish is in contacting you. This name to motion generally is a hyperlink for the hiring supervisor to obtain a duplicate of your resume, a contact type, or for them to put in writing you an e-mail.

It’s vital to have a constant and clearly seen CTA all through your web developer portfolio. Should you’re utilizing a single-page website, attempt to have the CTA following the person as they scroll, or displayed within the high nook menu bar.

CTAs like this may also be one other neat alternative to indicate off with a design flourish, in addition to indicating a bit extra of your persona or angle.

Sharing is caring!