10 Web Developer Portfolio Tips

Brad Traversy
Mar 9, 2019 · 7 min read

Over the course of my career, I’ve seen a lot of developer portfolio sites. I’ve had my own, and I’ve reviewed at least 50 sites on behalf of others. I’ve seen some truly great portfolios… and I’ve seen some horrible ones. Getting a job can be difficult at the entry level and having a nice portfolio could make all the difference. With that in mind, here are 10 tips that will improve your web developer portfolio.

1. Clean & Modern Design/UI

The design, user interface, and all around look of your site is the first thing that anyone sees. It’s the all-important first impression. This might seem obvious, but I’ve seen some portfolio sites recently that looked like they were built in the early 2000s. One could argue that as a web developer, your portfolio itself is the most important display of your skill since it’s the only work that a recruiter is guaranteed to see and navigate. It’s imperative to make sure your portfolio site is presentable and functional.

2. Good Hosting & Custom Domain

The second point is twofold: you should have a sufficient hosting plan as well as a custom domain name. Too frequently, I am asked to review a portfolio that is hosted on ‘something.heroku-app.com’ or some other free subdomain. Domains like this, in my opinion, don’t really show professionalism if they’re hosting your main portfolio. They can be fine for one-off projects and displays of skill, but not your portfolio. It’s easy enough to purchase a $12 domain name and host it cheaply on any one of the multitude of shared hosting options. Otherwise, as a candidate for web work, a low effort domain gives the impression that you don’t care too much.

You should also use a SSL certificate and put some thought into the infrastructure of your site. Find something that’s effective, loads your pages quickly, and looks professional. If you’re insistent on keeping costs down, there are services like Github Pages that allow you to bring your own domain and SSL certificate and host a webpage for free. If your site is static with some links and images, this could be a good option.

3. Keep it Simple

When it comes to writing for the web, the best practice is to take the most important thing that you want to convey and put it into the shortest amount of text possible. Most people (not just recruiters and employers) are impatient. We all want instant gratification and employers want to know exactly what they’re looking at as soon as they visit your site. Make sure the most important stuff is front and center, it’s not too long, and it gets to the point. If you have an “about” section with 10 paragraphs, employers will likely not even start reading.

It’s much better to have an elegant landing page with a few key sections (ex. Showcase section, a Project section, an About page, and a Contact page) than a 10–15 page site with various articles and other tangential content. Employers aren’t going to read your entire blog history. Studies show that most employers barely even skim resumes, and the same thought process can easily be applied to portfolio pages… Make sure you stand out and that your best work is easy to find..

4. Don’t Exaggerate Skills

Be honest about what you know. If you took a Ruby on Rails tutorial, you’re probably not qualified to call yourself a Rails Developer. I’ve seen Portfolios that list literally every language and framework. Before you do this (or if you already have), remember that employers aren’t stupid. They catch on and they can recognize when a candidate is simply listing out any technology stack they’ve ever heard about.

Consider how this practice might play out in the worst case scenario. Imagine that you take a beginner-level Java course and on your portfolio you list Java as a skill set. You get hired at some company and they put you in charge of adding a couple new features to their extensive Java code base. Unless you actually know how to handle Java code, you probably wouldn’t know where to start. That’s an embarrassing situation that you want to try to avoid, so just be upfront.. It’s better to specialize in a few things than to know a little about everything.

5. Live Examples/Demos

If you’ve worked on cool projects, show them (or link to them) on your portfolio (duh). In your projects section, you generally want to have one button that goes to the live project and one button that goes to the code (i.e. Github). There are some exceptions, however, like if you’re developing command line automation tools (or similar apps that have no verifiable front-end). In such cases, you can simply link the Github repository.

To add to this, images are also good… but definitely not on their own. If you have images of your project, make sure to also include a live demo and code link. I’ve seen portfolios with a single image of the project and no way to test or see it in the real world. Anyone can put an image on a page, but a web developer should be able to provide a real-time example of their work on the web. In terms of types of projects, production-level applications that serve a purpose and exist on their own (i.e. a site with its own domain that people use without necessarily knowing who they are) are definitely the best to show off. However, not everyone has a big web app under their belt. If you’re in that majority, feel free to provide links to projects that present your skills in the best light. In such instances, it’s fine to host the project using free services like Heroku or Netlify.

6. Be Selective of Projects

If you’re a self-taught developer like me, you’ve probably done a ton of smaller projects to learn new skills and concepts. You can’t put every little To Do List app you’ve created on your Portfolio. Well, you can, but you shouldn’t. My recommendation is to pick between 3 and 6 of your best projects. It’s even better to have 2 large, high-quality projects over 10 tiny, one-off (i.e. To Do List) apps. Pick the best and use those. When it comes to a web developer’s portfolio, the game is quality, not quantity.

7. Customize Course Projects

These days, there are many course offerings that will teach you a web technology by walking you through a mid-sized project. I have a few of these myself. If you take a tutorial or a Udemy course and you plan on using the project on your portfolio, do yourself a favor and customize it. Don’t just finish the course, copy the code into a Github repo, and provide the exact course version as if it was your own work. I’ve seen that countless times, even with my own tutorials and courses showing up in others’ portfolios. Employers know these projects and become unimpressed because they see them on the portfolios of so many different applicants.

Customizing a project doesn’t have to be incredibly tedious. Change the look, add some features and functionality. Change the resource — if it’s a To-Do List, change it into an Address Book or Contact List. Spend the time to make it your own instead of just copying it and passing it off.

8. Easy Contact

An employer should know exactly how to contact you when they look at your site. There are many ways to accomplish this. I would suggest putting your preferred method of contact above everything else, literally, in a top bar above the navigation menu. In addition, you can add a contact form at the bottom of the page or on it’s own page of your site. It all depends on how you want to structure your site, but make absolutely sure that your contact details are prominent and easy to find.

9. Web Presence & Brand

This is more important for people like me who don’t have a college degree, because it shows the employer that you’re passionate about what you’re doing, you’re driven, and you’re knowledgeable. Start with some basic branding. Keep the same colors and try to use the same image, whether it be a headshot, logo, or something similar, across different platforms to make yourself more recognizable.

The next step is unique content. If you can create interesting pieces like helpful Medium articles on development topics, or a Youtube channel with tutorials, you’ll appear more confident in your work and accessible. Another good option is a professional Twitter account, where you can tweet stuff about development and the latest standards in the industry. Your Github repository is also very important, of course. These platforms can all help you build a strong personal brand across the internet. Not every employer is going to look that deep into your online history, but they might — and if they do, you’re going to stand out above the rest.

10. Be Yourself

Don’t try to be someone you’re not. Don’t try to be the smartest person in the room. Just be honest (going back to point 4). Show potential employers that you’re passionate, you’re driven, you want to work hard, and you want to better their company. Feel free to include a few of your hobbies or a blurb about your family life; these additions can help to make you more personable. However, remember to keep it simple and not let your personal info take away from the presentation of your key projects and skills.

As a recap, the biggest things to keep in mind are: Keep it simple, keep everything direct, and don’t include content that doesn’t really matter. Remember: people are really impatient these days.

Check out this article for some examples of great portfolios

By keeping these tips in mind, you can craft a stronger portfolio that excites employers and lands you that next big job. Happy coding!

Brad Traversy

Written by

Web developer and instructor for Traversy Media

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade