Here at Skillcrush, we’ve written a lot about exactly what to cover in your design portfolio (read here and here!). And it’s a fun topic! Design portfolios are like eye candy. Toss in a business card design, some custom logos, a website mockup, and add some finesse…and boom! You’ve got a design portfolio we can all drool over.
But developer portfolios can be a little more mysterious. Are potential clients or employers really going to be impressed by a bunch of code? And how do you even show them the code you’ve made? A bunch of ugly websites that work really well? That’s not likely to leave many people impressed.
If you want to make it as a web developer, you’ll need some kind of portfolio. And luckily I’m here to give you some insight into exactly how to create your portfolio and what to put in it, even if you’re brand new to tech.
Want even more in depth information about creating a tech portfolio? Check out the FREE Beginner’s Guide to What to Put in Your Tech Portfolio.
1. Start with the basics
The first thing every portfolio needs, whether it’s for a designer, developer, or any other profession, is a few basic things: who you are, what you do, and how to get in touch with you. Think of it as a condensed resume.
Make sure that your contact info is easy to find, and make it clear right from the start what you do, exactly. That could mean a list of project types, a list of languages, or similar. And personalize your site by adding an “about” section or page (a photo goes a long way in this area!).
Here are a few other posts to check out if you’re looking for more portfolio basics:
How to Build an Impressive Portfolio When You’re New to Tech
24 Essential Portfolio Tips for New Techies
What to Put in Your Portfolio When You’re Brand New to Tech
Create the Perfect Portfolio with These 17 Tips
2. Your specialized skills
In some cases, clients or employers will come across your portfolio, and all they know is that they need a “web developer.” They don’t know what they need specifically, other than someone to build their website.
Other times, though, you’ll find that someone comes across your portfolio because they’re specifically looking for a JavaScript developer who’s an expert in AngularJS. Or a Ruby on Rails developer. Or a full stack developer who’s used to building apps in Python.
If your portfolio just says “I write code,” you’re going to miss out on all of those other employers who are looking for the specific things you do. Don’t be afraid to get a bit technical here. People who don’t know what you’re talking about will probably just be impressed, and people who do will appreciate knowing upfront what you can and can’t do.
3. Show personal projects
Every developer should have at least one or two personal projects in their portfolio. This could be something like Jessica Hische’s Mom This is How Twitter Works, or something like a framework or starter theme. It all depends on what kind of skills you want to show off.
One key thing here is to make sure your source code (or at least a sample of it) is available for public view. You want it to be possible for potential employers to dive in and see just how elegant and clean your code really is.
4. Link to your GitHub projects
One of the best ways to grow your body of work when you’re starting out is to get involved with projects on GitHub, or start your own. GitHub is the go-to open source code repository for the vast majority of developers out there.
Employers hiring developers know and respect GitHub, and many will be suspicious of developers who have no presence on the site. One thing to make sure of is that any code you have on the site is well-documented.
Want to learn GitHub? The Front End Developer and Web Developer Career Blueprints BOTH include lessons on Git.
5. Link to your CodePen projects
This one is mostly applicable to front end developers, but if you want a place to show off your CSS, HTML, and JavaScript skills, CodePen is a great place to do that.
It’s also a great environment for creating fun experiments or resources for other developers.
You might be wondering why you might want to use CodePen if you’re already using GitHub. You can certainly use just one or the other, but they’re also good for slightly different things. If you want to put a quick experiment out into the world, without big plans for expanding or updating it (or asking others to collaborate on it), then CodePen is a simple solution (especially for beginners).
6. Link to your applicable social media profiles
I already mentioned GitHub, but you should also make sure you link to your LinkedIn profile (make sure it’s up to date!), and if you have a good reputation on the site as an active user, linking Stack Overflow is also a good idea.
7. Remember your portfolio itself showcases your skills
Coding some extras into your portfolio, or customizing the functionality of an existing theme, is another great way to show off your developer chops. Be sure that somewhere on the site you point out that you coded your portfolio from scratch, or that you customized an existing theme.
8. Provide context
One of the most important things you can do to help your portfolio stand out and resonate with clients and employers is to provide context around every single project you include. When you link to a project, make sure that you’re explaining what you did on the project as well as how you did it—.
Explaining why you custom coded something instead of using an out-of-the-box solution is also useful, as it shows employers and clients that you can create solutions on an as-needed basis instead of relying on patching together other people’s resources.
Things to make sure you include are:
Who the project was for (it’s totally fine to note that it was a personal project or experiment)
When you did the project (this helps provide context in case any of the code is antiquated)
A description of the project and its requirements
9. Awards and recognition
If a site you were involved in creating has received any kind of award or recognition, no matter how small, highlight it on your site. The same goes for any professional awards or recognition you might get.
If you’ve written for any prominent blogs or other publications, then it’s worth noting those. And if you’ve ever won a hackathon or other competition, make sure you mention it!
10. Keep screenshots and copies of everything
Sites get updated. It’s the nature of the web.
Make sure you create and save things like screenshots and copies of your code. You want to be able to use examples of your work that you’re proud of long after the sites or apps have been taken down. No sense in losing all of your hard work just because it was time for a redesign.
If you want even more in depth information about creating a tech portfolio, check out the FREE Beginner’s Guide to What to Put in Your Tech Portfolio. Or if you’re ready to dive into learning development skills, check out our Front End Developer Career Blueprint.