Guide: How to Build a Web Dev Portfolio

How to Build a (Web Dev) Portfolio

About this Guide

I’m a developer and I’ve been tutoring new coders for years, I made this guide to help make sense of what pretty much everyone says you need to build when learning to code – a portfolio. Wanna know more about these guides (there are others), me, and why I made them? See here.

Context

For a 101 overview on how to build a portfolio, watch this:

The Main Page

A lot of portfolios have a single portfolio hosting “about me” site at their heart, something to showcase you and link out to your work, your LinkedIn, your contact details, and so on. If that interests you, read this and this for some tips.

Inspiration / From Design to Site

First, know that in software development, designers do more than graphic design or making things look pretty, they can define a lot of the interactive functionality and user experience. For more info on who does what on developer teams, I have a guide on that here.

If you’re looking for inspiration or to make portfolio pieces that are similar to what you’ll get on the job, try starting with taking designs and wireframes and making them into a websites. Watch this for info about how to turn designs into sites and this for more info on wireframes. Codecademy projects have lots of designs to follow, they include things like design specs which are industry standard (see here for one of my favorites). Find some more, free designs to bring to life here. You can also clone a website and modify it to practice your skills, or recreate something with the same functionality as a web app you use. Common examples of the latter include recreating Twitter (good full-stack JS video walkthrough of that here) or making a blog. Just because they’re common examples doesn’t make them bad.

Quick note on cloning… with anything in your portfolio, make sure to not infringe on intellectual property, plagiarize, or otherwise pass off someone else’s work as your own. You do not want to ruin your reputation (or worse!).

Still looking for more specific ideas? Try these:

  • Community Web Dev Challenges are made to be as close as possible to the assignments you’d get in the real world as a developer, including the use of “user stories.” They list prerequisite skills so you don’t need to worry about taking on more than you can handle. First one linked here.
  • Codecademy projects in Paths are another great option, though they are part of Codecademy Pro. The Paths chain together courses in the right order and have real-world projects (that is, mimicking real-world tasks you can expect in the future and doing them on your own PC) peppered throughout. There are smaller Skill Paths and the bigger Career Paths, specifically the Web Dev one. This will serve you better than taking individual courses à la carte as with web dev all these subjects aren’t discrete, they combine. Most of the content in the skill paths are also in the Career Paths, but if you’re looking for maximum practice, keep an eye on both and on the tougher “challenge projects” over in the practice tab on your dashboard.
  • Make the projects your own. A lot of people following a guide to make a project or fulfilling an assignment feel like it might not really “count” as their own work for an employer if it’s just the 10000th copy of a standard project. If you find yourself in that boat, I’ve got a solution for you – riff on it. Copy the Codecademy project or whatever other project to your own computer and start modifying the design or functionality to transform and upgrade it. You don’t always have to make things “from scratch.”

Hosting Your Portfolio

You’re going to need a place to host your work.

If you’re in a hurry, the short answer about where to put your work is GitHub! I wrote a guide on how to do all this here. GitHub Pages in particular is a great free option for hosting websites. Heroku is a wonderful free option for web applications, take their tutorial here.

If you’d like, you can read more about web hosting options here and here.

If you’re really early on in your coding journey, you may find GitHub a bit complex, or maybe it’s overkill for a mini project. You can use sites like Repl or Codepen to share some simpler “doodles.” Just know that it’s not a true replacement for GitHub.

From Portfolio to Job

If you’re like 90% of the people making a portfolio, you’re doing it to get a job. Read this for guidance on what portfolio work can get you a job. Reading the following resources may also help with specifically how to use GitHub / your portfolio to get a job:

Not The End

Please reply to this thread with your own resources, advice, and feedback! I made this post a wiki so it can be updated and maintained by the community, I’m just starting them off. See my other guides here.

4 Likes

Hi, my name is Sulton.

To create a good portfolio website, is it a must to have a good foundation of graphic design skill ? Like creating design first in photoshop or somekind of graphic software like that to upload to our website ? How about we lets say “not so good” about this particular skill ? Cant I make a good portfolio website ?