Creating a portfolio can be intimidating. You want it to be perfect, of course, knowing that it’ll serve as your first impression to prospective employers. But how do you know what to include?
Think of your web developer portfolio as a lasting resource that a potential employer can refer to when they need someone right away. They can also share it with other decision-makers or keep it on hand for when they need someone in the future.
Getting your web developer portfolio just right can ensure you make a good — and lasting — first impression. So, it’s important to know what to include, what not to include, and how your portfolio may differ based on the kind of web developer you are.
In the video below, we’ll show you how to create a portfolio from scratch with HTML and CSS. (And don’t forget to check out Part 2 to learn how to make it interactive.) Then we’ll walk you through everything you need to include to build a Web Developer portfolio that’ll help you stand apart from the competition.
What should you include in your web developer portfolio?
While your portfolio should exemplify your capabilities, it’s also important that you don’t forget the details. Here are some things every web developer’s portfolio should have. Keep in mind that the following holds true whether web development is your primary skill or just one element of your full stack skillset.
Bio
Your bio is your chance to flesh yourself out as a person with information that, while valuable, might not fit in your resume. Highlight the elements of your professional story that make you unique. Include your hobbies, both related and unrelated to web development, to convey something about who you are.
Contact information
Add your contact information at the top of your portfolio so potential employers don’t have any trouble finding it when they want to schedule an interview. Along with your name, you’ll want to include:
- Your phone number
- Email address
- Professional social media accounts
As this information is likely already in your resume or on LinkedIn, providing it in your portfolio won’t increase your risk of identity fraud or sacrifice your privacy. Some people also choose to share their mailing addresses, though that’s not required.
Projects and experience
When sharing your experience, include projects relevant not only to web development but to the job itself. For example, if the position involves creating e-commerce sites, you may not want to include a blog you made for your friend.
If you need help finding projects to include in your portfolio, check out our Career Paths. Each Career Path offers Portfolio Projects designed to illustrate your skills and knowledge related to:
While describing your projects, make sure you provide details. Every project has a story behind it, and you want to help the employer understand some of the nuances that made it — and the work you did — special. For example, you could discuss the company you did it for, the specifics of the project, and any challenges or problems you were charged with solving.
Adding images of your work, like screenshots of a website before and after your contribution, can also help illustrate your capabilities.
Your skills
While adding your skills to your portfolio, prioritize those that pertain directly to the job you’re applying for. You can also include skills that are generally useful, like proficiency with Excel or PowerPoint.
Keep in mind that the skills section can end up looking like a mundane list, so it’s best to lead with the skills you’ll need most to succeed in the role.
As a web developer, you’ll want to display your familiarity with programming languages like HTML, CSS, and JavaScript, along with any libraries or frameworks you’ve added to your tech stack.
Added context for source code
While the code you’ve written may be flawless, it may look confusing even to a trained eye unless you explain what it’s for. This doesn’t have to be too complicated. If you choose to include links to your work in GitHub, for example, you can use the readme.md to input details about the code, the problem it solves, and the project as a whole.
Awards and recognition
Mentioning the acknowledgments you received for your work isn’t bragging — you’re simply stating facts. But, unless they’re included in the name of the award itself, leave out any superlatives. Saying things like, “I was awarded the prestigious title of Fastest Coder at Code Camp” may sound like you’re trying to inflate the accolade. “‘ Fastest Coder’ at Code Camp” in a bullet point would be sufficient.
What should you not include in your web developer portfolio?
Your portfolio should speak to your professional capacity, so it’s crucial that you avoid adding anything that could cause employers to question your professionalism. Some things that may detract from your web developer portfolio include:
- Images that aren’t work-appropriate or of sufficient quality. If you do choose to include a picture, make sure you look professional and reliable. Your photos also shouldn’t be grainy or hard to make out.
- Links to personal social media accounts with embarrassing content that would detract from the professional persona you’re trying to portray.
- Recent work that doesn’t reflect your skills. If you’re fresh out of a coding class, an old high school example may show your professional growth. But something you threw together in a pinch may make you look like someone who prioritizes speed over quality.
How should your portfolio be different if you’re a front-end or back-end developer?
It goes without saying that you want your portfolio to illustrate your capacity in your desired field. While similar, there are several differences between a front-end developer and a back-end developer’s portfolio.
Front-end developer portfolio
As a front-end developer, you’ll need to showcase attractive pages that show you know how to make web pages that aren’t just functional but also aesthetically appealing. But, this doesn’t mean you should fill your portfolio with great-looking landing pages. You still have to show the work that went into each page or site.
Back-end developer portfolio
As a back-end developer, you’ll need to showcase the logic behind your creations. This is a crucial element of what a back-end developer does.
Annotating your code is a great way to help someone without a coding background understand how everything works. Your interviewer will probably understand the various dependencies of web applications. But, when they share your portfolio with the head of IT or CIO, you’ll want to make sure everything is explained clearly.
By following these tips, you can put your best foot forward, presenting a professional, polished product to interviewers. In this way, you can give yourself many chances to make a great first impression. To learn more about what it takes to be a web developer, check out our web development curriculum.
