Computer web development on table

A Guide to Building a DIY Professional Web Developer Portfolio

When you’re setting out on your own, it’s hard to know exactly what types of projects to include in a professional developer portfolio. What skills should you feature? How much design chops are you required to showcase? What framework absolutely has to be included, and should I include Bootstrap or run from it like the plague?

As you might imagine, the simple answer to pretty much every question like this is, “Well, it depends.”

I’ll give you suggestions regarding what I’ve seen to be some common threads when it comes to the projects that go over well with hiring managers and recruiters. Remember, though, that you should always tailor your portfolio to both your personal strengths and interests as well as the companies that you’ll be targeting when you start the job hunt. Use the right bait to hook the fish you want to land.

I’ll break this into sections based on the types of jobs that most folks go after.

HTML / Bootstrap Template Designers

One way to get your foot in the door quickly is to learn HTML, CSS and a bit of JavaScript really well and then start doing some freelancing on sites like Upwork or through your own marketing. This type of work is out there, I’ve done it myself, and it’s a pretty quick and easy way to make some money while you’re finishing your studying and working on your full portfolio.

Also, some people might be very content to make this their full time thing. If you can land a few regular clients, and you really do love working with template designs, this could be a great gig for you.

To get here you’ll need:

  • A very solid command of HTML. You’ll need to have good knowledge of the most used elements and what they do, and you’ll also need to know how to research less common ones quickly and easily. Building the structure of a webpage should feel natural to you.
  • An expert level command of CSS. As a template developer, this will be one of your most used tools. You should know the ins and outs of layout, the most common styling features, and as much of the more complex features (and “pseudo” features) as possible. You should also have a good handle on Sass or Less and know what pre-processors do and be able to switch between them if necessary.
  • A very good, basic level of knowledge in JavaScript. While you don’t have to be a JS Guru, you will have to know how to target elements from the DOM and make changes to them using JavaScript. This is the most common way we introduce functionality into a website. Bootstrap uses JavaScript, in particular jQuery until very recently. I would still recommend learning the basics of jQuery because it’s still all over the place in the wild. Nearly everyone agrees these days that we can move on from jQuery when we’re building new projects, though.

In your portfolio, you should have a good mix of projects built from scratch using HTML, CSS, and JavaScript with no frameworks at all, as well as projects built with the frameworks you plan on supporting. If you want to do work with Bootstrap, learn it really well and feature a project that you’ve customized heavily to show that you know how to start with the base Bootstrap framework and modify it based on the needs of the project.

I would also suggest showcasing some smaller things that focus more on design choices. Prove that you can create reusable HTML components, for instance.

Don’t forget to show that you are aware of important topics like accessibility and the a11y project. Getting good at accessibility can make you a much better designer / developer overall.

With one full site built from scratch, one site built on top of Bootstrap, and three or four small components to feature, you should have a portfolio that will land you work at the entry level of template development. Where, or when, you move on from there is up to you.

Front-end Developers

Each one of these categories builds on the last, so as a good front-end developer, you need to first master the skills listed above, and more.

Front-end developers are expected to be able to listen to a client’s needs and then translate them into a beautiful, functional web application. Whether they’re freelancing or working at a development shop, they need to know how to translate functionality into code. This can also include enabling the use of dynamic data from locations such as a database or an API.

To get here you’ll need:

  • A strong mastery of JavaScript. You’ll be using it…a lot. You’ll need to understand the different versions of JavaScript, such as ES6, and what they’re capable of. You should be able to use JavaScript as a programming language to solve fairly complex problems, rather than merely as a scripting language for targeting web elements.
  • Good knowledge of APIs and how to use them. It’s very common to tap into an existing API, or several, while building an application. APIs are often built in completely different, non-standard ways, so knowing how to deal with data that you encounter is really important. It’s a skill that takes some experience to master, but it pays off tremendously.
  • Some front-end framework under your belt. The idea here is not to master the most current, sexiest, in-demand framework possible, because in five minutes that will change. The goal is to understand how frameworks…work. Once you understand how they function and you’ve learned one well, it’s easier to learn the next. So, don’t stress over it too much. Pick Vue or React, and off you go.
  • A stretch goal here if you’re really looking to stand out in the front-end developer pool would be to learn and utilize Firebase as a “back end” in one of your applications. It’s not what I would call necessary at this level, but it would definitely look good.

When it comes to building out your portfolio, I would still recommend a solid example of a “from scratch” template of some kind. You should show something that is very focused on design choices.

Moving on from there, I’d suggest something as data-driven as possible. When you’re building out your API based project, try to use two different types of APIs to solve an interesting problem. For instance, one of my earlier projects utilized a map API and an API based on music information to show geographic locations of the activity of bands over time in the US. Integrating very different types of APIs can really show creativity in how you’re able to deal with data and information in a web application.

Whether or not you need more than two examples in your portfolio at this level depends mostly on the size and complexity of the projects. If you complete large applications that solve complicated problems utilizing various technologies, like several different APIs and a clever, beautiful front-end built with Vue or React, you probably don’t need more than two major projects in your portfolio. If they’re smaller and less complex, you might want to include three.

You still also might want to include a couple of smaller examples, like a custom built UI kit or something similar.

Full-stack Developers

Just so you’re aware, this is a slightly controversial term these days. When you go out into the world to sell yourself as the newest full-stack developer, just understand how some people view this term.

It’s quite difficult to be really good at both the front end and the back end as a developer. Usually, developers tend toward one side or the other. That isn’t to say that there aren’t plenty of jobs looking for full-stack developers, or that you can’t be quite proficient when building out an entire application by yourself.

However, people who are experts at both are what folks lovingly call “unicorns.” Why do they call them that? Because, like unicorns, they most likely don’t exist.

As you learn and build more projects, you’ll probably start to notice what you’d really rather be working on. Don’t get me wrong, building out an application entirely by yourself is actually a lot of fun. Also, more importantly, it can teach you a lot about how to be a good team member. Knowing what each side does will inevitably make you more sympathetic to what your co-workers have to do with the work you pass off to them. It, hopefully, will make you write better code to make everyone’s life easier in the long run.

So, as before, you’ll need to learn all of the stuff from above…and more.

To get here you’ll need:

  • Better programming chops. You’ll have to master some deep JavaScript, and possibly something else like Python as well. You can definitely get by with JavaScript alone these days. However, demonstrating another language can be a big deal at some companies. Python is an excellent language for a back-end developer to learn. You should be able to solve some common algorithms and demonstrate knowledge of data structures as well.
  • A back-end framework under your belt. If you’re a JavaScript only person, you can go with Node. Node is a fantastic way to go as it’s become very popular and is relatively easy to learn how the ecosystem works. If you’re including Python, you can also focus on Flask or Django. The technology stack you pick at this point starts to become more and more about where you want to end up working too. Do your research and know what stack will make the biggest impact on the companies that you want to work for.
  • Knowledge of one or two databases. Again, this decision is largely based on where you want to end up. However, if you’re leaning towards the back end, I’d recommend learning to work with both MongoDB and PostgreSQL. Even if you realize that you much prefer one over the other (which is a very good thing by the way and can be a fantastic talking point in an interview), you can still learn the basics of the one you like less.

Your portfolio should show a good working knowledge of everything on this page. Clearly, you don’t need to be a master of every tech in existence. If someone requires that of you for a position, run away.

Two or three projects should show your skills well. The important thing here is to make good choices. Make smart selections in your codebase and understand every line of code you write.

A smaller project that shows some design chops is still a good idea here. Show that you understand how UI / UX functions. Make it clear that you know that people will be using the interfaces that you design, and that you care about that.

The other projects should show that you understand well how to connect the front end with the back end, and that you can deploy your apps expertly. You should demonstrate some basic DevOps knowledge as well. Some basic testing and utilizing continuous integration can be important.

In all of your projects, no matter what level you’re going after, show enthusiasm for the technology you’re using as well as the topic you’re building your applications around. Focus on things you truly care about. It’ll make your time and effort a lot more fun.

If you have any questions about portfolios and projects, reach out and let me know.

And if you’d like some eyes on your code, we can help with that too. Take a look at our services page for more info.