In this post, I’ll talk about how to build web development portfolio that lands you a job. If you’re following along, you’ve noticed I’ve become a little obsessed with designing and building one-page portfolio templates for developers and programmers to showcase their skills and work. Check out some of my recent (free) templates for a good place to start, and read on to find out the thinking behind most of my templates.
1 Keep your portfolio simple
As developers, we love to dig into code and keep building. Resist this temptation! Although your portfolio page is extremely important, ultimately it’s your projects that will actually convince someone to hire you. Spend your precious development time and energy on the projects, and let your portfolio page simple be a place to show them off. Don’t succumb to feature-creep. Your landing page (that’s what it is – a sales landing page that’s trying to sell you!) should be laser-focused on the task at hand, getting you a job (or at least an interview).
This means it’s usually best to go minimal. Keep colours simple and subtle, and don’t add elements that can distract the reader. You can see this in the portfolio that got me my first job in web development. The only colours are those of the images showcasing my projects, and the big green call to action buttons. ps – checkout out a quick guide to colour theory here
There is a situation where this doesn’t apply, however, and it’s when your portfolio page is a personal project in itself, where you’ve added some custom UI or have a specific elements you want to show off. In general though, my opinion is keep it simple, keep it clean, and it’ll be effective.
2 Tell them about you
Start the reader out with some context. Someone in HR won’t necessarily have the technical chops to figure out if you’re a native mobile developer, or a web developer who can code responsive web pages. Let them know what you specialise in (I’ve often updated this on a daily basis on my portfolio, depending on the specific job I applied for). Some essential items are:
- Your name (duh)
- Your area of expertise eg: Android developer, mobile-first web developer, API developer etc.
- Your location. The web is global. Let them know where in the world you’re based.
- A way to contact you. This could be your twitter page, a Linkedin link, or a simple email link. Keep it simple by offering only one (Linkedin is my personal preference)
3 Showcase your projects
This is sorta obvious, but I’m adding it because it’s easy to do this badly. Your projects need to be front and centre, showcasing how awesome a developer you are. However, don’t just add a screenshot and name for the project. Give the reader context as to what they’re looking at. If possible, include the following with each project you include…
Project title and description
Let the recruiter know what the project is, and why you build it. Give them a brief overview of how it came to be, and what stage it’s at now. As developers we all know the pain that a project is never really *finished, *so use this as an opportunity to demonstrate your vision and blue-sky thinking by describing your hopes and plans for the project.
Talk about the technology
I’ve seen this time and again, where a developer won’t actually talk about the technology used for a project in their portfolio. You need to make it crystal clear to them what libraries or frameworks you used, and why. For a lot of my templates I use the fantastic Devicon project to visually illustrate the tech behind the projects.
App/website screenshot
If applicable, create amazing screenshots of your creations. Use services like Dunnnk to generate mockups for free, and don’t forget about taking screenshots straight from the chrome developer console that give you the mobile device frame too!
4 Highlight your skills – all of them
One of the biggest mistakes I made early on was not listing all the technologies I knew. I didn’t do this on purpose, I literally just *forgot *about certain technologies that I’d become so familiar with.
A recruiter would be chatting to me while perusing my resume, and would note “hmmm you don’t know jQuery, that’s a problem”. Of course I knew jQuery! I’d just used it so often that I became familiar and just associated with web development in general.
List everything! Don’t forget about the basics like HTML5, CSS3, jQuery, responsive layouts, Bootstrap etc. As developers we have our heads down, buried in these technologies every day and take them as a given. Recruiters don’t, so list your skills!
5 Talk about your toolset
You’ve listed the libraries, frameworks and languages you now. Now it’s time to list the tools you use. Employers want to know that you’ll mesh well with the team, and letting them know early on that your workflow matches theirs (or at least isn’t wildly outdated), will help your case a lot.
This can also be an opportunity to show you keep up with emerging tech, showing you’ve played around with Atom or have tried out the latest prototyping tool. Sharing your toolset and describing your workflow shows you know what you’re doing and affords you some credibility in the recruiter’s eyes.
6 Testimonials
If you have them, add them. If you’re just starting out, skip this bit. But social proof has been shown time and again to be a very positive motivating factor when it comes to decisions. We’re social creatures us humans, and a positive word from a past colleague, or even a friend, can go a long way.
7 Contact details
This is a personal choice, so I won’t be overly prescriptive here. Provide users with a way to contact you. Originally I just linked to my Linkedin profile. Then I added a twitter link. I’ve also used a straight phone number, no messing.
My go-to for now though is a mailto: link. This lets you launch the user’s email client, with your email address already inputted, as well as a subject line and body text. You can use this to be funny or add some character. Check this one out
And there you have it. 7 tips for an effective web developer portfolio. Now all you have to do is go and build one. Luckily, I’ve got your back. Check out these three *free *web developer portfolio templates to get you started. Let me know what you think.
