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.
Your portfolio's content
The basics
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.
Should you link to your GitHub account?
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.
What are some common mistakes?
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)
How to avoid these mistakes:
- 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.
Your portfolio's design
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).
Key takeaways
- 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.
Oldest comments (8)
Great to hear it was helpful!
Could you review this layout idea for my website? s.codepen.io/bigblind/debug/BpdoQL...
The page currently shows a blog, but if I were to make a portfolio section, it'd be a simple grid in the main content section, with images on the left, and descriptions on the right.
Yeah that would be a great layout! (For reference, this url ended up working for me: codepen.io/bigblind/pen/BpdoQL/)
The page view was clearly structured, and it responded well to different widths.
For your mobile menu, since it's fixed, I'd add an overflow: scroll; to it (or however else you want to handle it) in case the bottom of it gets cut off. That's a small thing though.
Nice work, and I hope this has been helpful!
Thank you so much for taking the time to do this. Both the article and your feedback were enormously useful.
Also, I'm sorry, I didn't know debug links could expire. I opened the link in Incognito mode to make sure it worked for other users, but didn't think to look up whether there were other restrictions.
No worries. Link shares can be tricky when urls have unpredictable restrictions like that. Happens to me all the time.
Very excited that you posted this article, I am just beginning to start building things to add to my portfolio/github. It was somewhat mentioned in the project ideas, but when do you think the appropriate time or situation is to begin adding frameworks, libraries, etc., versus sticking with the basic tools (For web, HTML, CSS, plain JS)? Is it just until you believe you have a good grasp of those and have some work to back up the confidence in those skills?
I like the idea of getting comfortable with HTML, CSS, and plain JS first, so I'd agree with your statement about having a good grasp of those along with some projects to back up your skills. It's so much easier to learn a framework when you know those languages.
Once you're comfortable with the fundamentals, the next step is to look at companies you're interested in and see what tech most of them seem to be using. If there's a framework that keeps popping up, experiment with that and build a small project with it. That way you'll have an idea of how to use it, and you have evidence you can point to that you've used it.
If you ever find yourself unsure what to spend time on, you won't go wrong sharpening your HTML, CSS, and JS since these automatically make you better at many frameworks at once.