This article originally appeared on Simple Steps Code.
A lot of people have asked me what makes a good web development portfolio.
I can't speak for everyone, but I'll tell you what I've looked for when evaluating candidates.
The main thing I look for is: can you do the work (or reasonably learn to)?
Let's talk about your portfolio's content and design.
The content is the most important part, so start with this.
Once you get the baseline out of the way (name, title, contact, etc.), you'll want some projects that show key skills. I personally like to include CodePen demos because they're a great way to showcase your code as well as the results.
The convenient thing about web development is that you don't need to wait for someone to give you permission to do a project; you can just create whatever showcases your skills. Just in case, here are some project ideas.
Next, you can have a quick bio and some relevant experience. If you don't have professional experience, then just show your personal projects, and as long as those show the necessary skills, you should be fine.
GitHub is a good way to show some code samples, but not a great way to show projects. If you're depending on employers to download and set up your stuff from GitHub, there's a good chance it'll get skipped. Make the reader's life easy by linking to a usable or viewable version of the project.
Short answer: Link to your GitHub account if it's interesting, but don't make it the only view of your work.
The most common problems I see are:
- Listing skills that they don't have
- Layout mistakes on their portfolio (like content going way off the side of the browser window)
- If you've been following along up to now, you should have projects covering all or most of the skills you've listed. That's a good way to show you can do what you say you can do.
- Test your portfolio at different browser widths to make sure the layout doesn't break. Lots of layout mistakes come down to misusing or misunderstanding the CSS box-model.
Also, here's a primer on responsiveness.
If your content is strong (and it should be if you've followed the previous steps here), then the design doesn't need to be overly difficult.
In terms of design, it's better to do something simple and get it right than do something complicated and have it turn out terrible.
Priority number 1: your design should make your content as simple as possible to see, understand, and navigate.
After that, here are some tips to make it look nice:
Read this article about design for developers. It helped me a lot so hopefully you'll like it.
If you're stuck figuring out layout, just use a big masthead with some text overlayed on a photo (from Pexels or some other free photo site), and then put a content section after that. (See the article in the previous point for how to do this.)
If you're stuck picking a font, just use Work Sans, which you can find on Google Fonts. I like it because it's versatile (the thin versions look sleek while the thicker versions can look more friendly depending on how they're used).
- You can win without formal experience if your personal projects show relevant skills.
- Avoid layout mistakes on your portfolio.
- Don't be afraid to use a popular design structure (masthead, main content, etc).
I hope this article has been helpful!
If there's anything you'd like to add, feel free to let me know in the comments.