Receive New Tutorials

12 Things Web Developers Must Include in Their Portfolios

– {{showDate(postTime)}}

Not every job hunter needs a portfolio. But there are certain careers where portfolios prove more helpful than just a resume in showcasing your skills and experience.

This is especially true for careers like art, design, and web development.

Individuals in these jobs often have their own unique style, and a collection of past work will help employers to assess whether that style fits their needs.

Don’t worry: your web developer portfolio doesn’t have to be a full-blown website. A single page site can effectively get your message across.

Here are 12 things to include on your portfolio or online resume if you are a web developer. For best results, make sure to keep each of them relevant to the specific job you’re looking for.

1. Easy-to-find contact information

This goes first, because if you can’t be reached…what’s the point?

In 2015, an email address will suffice. It’s not necessary to give out a phone number; if you’re like many people, you’ll prefer to keep your personal cell number off the web where anyone can find it.

2. Bio/about section

Don’t go overboard with every little detail. Include relevant highlights. And don’t forget to include your personality.

Others may have your skills, experience and even education—but your hobbies and personality quirks are what make you, you!

This can help you stand out from the rest, and it makes you more personable. Likeable people have an easier time getting hired.

3. Relevant experience

Showcase some projects you’ve worked on, but keep it to the type of project you would like to work on again.

For instance, maybe you used to be a marketing strategist. However, now you want to land a job as a Ruby on Rails developer.

Make sure to emphasize projects/work experience related to Ruby on Rails. Otherwise, employers might assume that you’re still interested in working with marketing.

The same can be said for LinkedIn: only feature previous work and skills you want to be hired for.

(Bonus: include testimonials from previous employers/clients to take your experience section to the next level.)

4. Provide context

Don’t just give a job title; provide context, too.

A potential employer looking at your site will not be able to take away much with just a job title.

Consider including:

Who it was for
Project/job description
When (dates)
Any relevant screenshots/URLs/code samples to the work

Context is especially important for those who want to do more freelance/consulting kinds of work. If that is the case for you, even consider doing “before and after” screengrabs to demonstrate how you improved the project.

5. Relevant skills

Don’t go crazy. Include only your strongest skills, and ones that will prove useful in the type of job you’re looking for.

Example: if you’re looking for back-end development work, you can probably leave out your Photoshop expertise. Instead, emphasize the skillsets these positions are looking for. (Unsure? Check out job postings online to see the listed skills; have your portfolio/online resume match as much as possible. Of course, don’t ever list a skill you don’t really have! That will come back to bite you.)

6. Personal projects

If you’re just starting out and don’t have much “real” experience to add, this is a great way to focus your energy.

Here’s a few ideas of things you can build:

A blog
An HTML5 game
An online quiz
A website for a friend or family member
Informative site — make it educational, like Maxwell Ogden’s JavaScript for Cats, or make it funny like Jessica Hishe’s momthisishowtwitterworks.com

7. Documented source code

Again, it’s all about context on your portfolio site…and off it.

If you’re including links to your repositories on Github, make sure you provide context/documentation so people don’t have to struggle to understand what is going on with the project.

You can do this in the readme.md. Explain what the project is as well as how to use it.

This isn’t only helpful to employers, but also for anyone wanting to use whatever it is you created!

8. Education

Only include your education or certificates if they are relevant to web development and the jobs you desire.

For instance, if you have a degree in Computer Science or related, that’s definitely something you should include. But if you’re like me and studied something completely irrelevant in college (I was a History major), you can leave that out. It really doesn’t make a strong case! Technology skills don’t tend to have too much overlap with the liberal arts.

College aside, if you completed an intensive coding bootcamp, earned a web development related certificate, or have taken individual courses (including online courses), those are fine to list.

9. Relevant social media profiles

For developers, there are two social media networks that are basically non-negotiable:

Github
Linkedin

Of course, feel free to list a Twitter handle if you have one. It’s also not a bad idea to link to your Stack Overflow profile—but only if you are an active user and have a high reputation score.

Adding relevant social media accounts is a way for potential employers to get a better idea about your personality and what you’re like beyond your “About me” section.

10. Awards/special recognition

Have you written for any well-known tech blogs? Won any hackathons or related competitions? Presented any talks at big conferences?

These, and any other special accolades, can certainly be added to your online website. They can help set you apart from the competition enough to give you an extra edge when it comes to hiring time. Plus, everyone likes to be #1…so this is the perfect way to inform people about your big wins without sounding braggy!

However, it’s probably best to avoid any “small fish” awards like your A+ in high school computer class. Don’t look desperate.

11. Your photo

Adding a small photo is important because people will trust you more when they know what you look like. A photo transforms you from some nebulous, faceless entity to a real, relatable person.

Don’t worry: it doesn’t have to be a boring headshot, or even professional. Just make sure it’s safe for work…and you don’t have a Myspace-style selfie-arm.

12. Downloadable resume

A lot of people in HR still rely on hard-copy resumes. Make yours easy to find (put a download button in the footer or sidebar) and print-friendly.

Conclusion

At the end of the day, your portfolio or online resume is just one of the several ways employers can learn about you.

It’s important because it provides a place to not only list your experience, but to show your experience and contextualize it in greater detail than a resume with bullet points would allow.

If you don’t have time to build out a custom portfolio site, use one of the many themes online. Or even look into specific portfolio-oriented websites that can provide templates and make the process easy. Having some kind of online resume/portfolio is better than none.

Lastly, remember that your portfolio should not be permanent! As you gain experience, learn new skills, and create new projects, your portfolio should be growing with you. Set aside time once every one to two months to revisit your website for an update.

Then, next time you’re looking to make a job switch, you’ll be ready to hit the ground running.

About Laurence Bradford

Laurence Bradford is the creator of learntocodewith.me, a blog for self-taught coders. When she’s not building websites, she’s writing about building websites. You can find Laurence on Twitter, too.