Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

10 Tips for a Stand-Out Web Developer Portfolio

10 Tips for a Stand-Out Web Developer Portfolio
Get the Beginner's Guide to What to Put in Your Tech Portfolio

Get the Beginner's Guide to What to Put in Your Tech Portfolio

Get dozens of resources, plus expert tips on how to build a KILLER portfolio even if you're an absolute beginner.

You can unsubscribe from our mailing list at any time. We won't use your email address for anything else, promise!

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:

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.

Get the Beginner's Guide to What to Put in Your Tech Portfolio

Get the Beginner's Guide to What to Put in Your Tech Portfolio

Get dozens of resources, plus expert tips on how to build a KILLER portfolio even if you're an absolute beginner.

You can unsubscribe from our mailing list at any time. We won't use your email address for anything else, promise!

Cameron Chapman

Cameron is a staff writer here at Skillcrush, and spends most of her time writing and editing blog posts and Ultimate Guides. She's been a freelance writer, editor, and author for going on a decade, writing for some of the world's leading web design and tech blogs. When she's not writing about design, she spends her time writing screenplays and making films (and music videos for rock and metal bands!) in Vermont's Northeast Kingdom.

Your email address will not be published.

One сomment

  1. Anna Liza Sicat Replied

    I am so much blessed and thankful with skillcrush team. They are all so kind and accommodating. They are so polite and professional helping everyone in any way they can though I am not yet their student, they are able to provide me lot of support and encouragement since I am new in tech. Their site really help me a lot to understand better in everything that seems confusing specially in their free 10-days bootcamp. This kind of articles, blogs, sharing and their free resources that is made available for everyone is so much helpful to me. Thank you so much skillcrush team for making this kind of web site, very informative and helpful for me. Keep up the good works and God bless you all. (: from philippines

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.