How To Create A GitHub Portfolio

Developers have long preferred GitHub for storing, sharing, and contributing to code repositories. But they can also use the platform to create a digital resume to provide proof of their capabilities—also known as s portfolio.

Having a GitHub portfolio allows developers to demonstrate their previous experience and achievements. They can present their body of work in a well-curated manner to stand out from other job applicants and get potential new employers excited about their skill sets.

But the main question is how—how can you create a GitHub portfolio? Let’s find out.

Why Use GitHub?

Anyone who writes code will benefit from a portfolio, but why should you create one on GitHub?

A popular and reliable hosting service, GitHub houses remote Git repositories and lets users take HTML and CSS (and Javascript) files directly from a GitHub repo. You can use the platform to show off your work and demonstrate your coding abilities to recruiters. More importantly, you can host and manage your repositories, share written code, and contribute to its open-source code community. 

With GitHub, you can get free, useful contributions to your project leading to quick improvements that would otherwise take a lot of time to solve. Even recruiters are likely to be more convinced by your capabilities after viewing your work on a public community or form like GitHub.

The fact that GitHub lets you host your portfolio for free while giving access to a large audience is another significant benefit. 

4 Steps to Create a GitHub Portfolio

Let’s get down to business!

Below is the step-by-step breakdown to help you build your GitHub portfolio from scratch.

1. Install Git on Your Device

GitHub needs Git, but how you install Git will depend on the type of operating system you use (Windows, Mac, Linux). Therefore, the first step is to download Git and familiarize yourself with how it works.

While Git is strictly a command-line tool by default, you can adopt an integrated development environment (IDC) to manage your Git repositories and facilitate easy coding if you want.

2. Prepare Projects You Want to Feature in Your GitHub Portfolio

You obviously need to show something as a part of your portfolio, which includes coursework, freelancing assignments, and blogs. 

Here are a few ideas about the kind of work you can add to your portfolio:

Course work, personal projects, and college assignments 

This is obviously for developers fresh out of college and newbies. Add programming assignments, including written binary search algorithms to even basic versions of websites you designed, to your portfolio.

Nothing is out of consideration. Even if you participated in a programming competition back in college, mention it in your portfolio. If it was a team effort, use it to showcase your ability to work in a team, and if you won the competition, make sure you add that too.

If you’re a self-taught programmer, consider adding a few mini-projects you’ve done by yourself. Sure, not all of these projects will be of the best quality, but it still shows you have the capacity and dedication to learn and become a better developer. Tons of recruiters look for the basics of source control, so showing your competency in the basics is never a bad idea.

Freelancing assignments and personal work

If you’ve been coding for a while, you probably have projects executed for a client on a freelance basis, joint work, or even something personal as a drive for applying your skills. In fact, personal projects are a sign of your passion for programming, so make sure you have a few in your arsenal aside from projects for your corporate job or freelance gig. 

Blogs or vlogs

Although not as popular, having blogs or vlogs showcasing your knowledge of coding and programming can also work in your favor.

Many non-tech and tech folks blog as a hobby—sometimes even as a side hustle to make extra bucks. If you also have a blog where you talk about the latest trends in the tech world or anything IT-related, consider adding it to your portfolio to show off your hobby and proactive nature.

In case you don’t have any of the above three projects we mentioned above, don’t worry. Know that it’s okay. Start experimenting, where you work on small projects and eventually build something substantial to add to your GitHub portfolio.

3. Create Your GitHub Portfolio

To create a GitHub portfolio, you need to complete a series of smaller steps. Let’s take a look at these in more detail below.

Select a portfolio template

If you don’t know your way around developing a website, it’s better to use CSS and HTML and simply choose a portfolio template. 

Using a portfolio template is a much easier way to create your GitHub portfolio, especially if you aren’t a web development expert. Choose a portfolio boilerplate with an HTML template. If you don’t know where to get one, do a quick Google search for “free HTML boilerplate templates“ or “HTML free portfolio templates.“

While you’ll find tons of options, we recommend HTML5up. Keep in mind that the HTML5up template doesn’t come with images, But this isn’t much of an issue as you can use other sites like Unsplash to source high-quality, free, and usable images.

Set up a code editor or IDE

As Git is a command-line tool by default, you’ll need a code editor after downloading your desired template. 

Visual studio code or VS code is one of the most popular free code editors that are not only optimized for writing codes but can also be used to create and debug cloud and web apps. It’s a shortcut that programmers use to write codes. Another option is Atom or PyCharm. 

Regardless of your IDE/code editor of choice, you can use the tool to create your required CSS and HTML files.

Modify the template code

This step needs a little bit of HTML. 

After setting up the code editor or IDE, you’ll find the modifications you want in index.html. Open the folder in the IDE, and extract all the files. You can go to the index.html module from your IDE. Right-click anywhere and select Open in the browser. 

This will enable you to see any code you modify, along with the changes you make on the browser page.

Push your code to GitHub

At this stage, you should have something significant to add to your portfolio. Next, it’s time to push your code.

If you haven’t already created a GitHub account, make one and log in to your accounts.

Once that is done, on the top right-hand corner, click on the + icon and select New repository from the dropdown menu. In the box with the attached repository name, type the name you want to label your new repository. This is also where you’ll need Git knowledge and input command knowledge to push your code.

After pushing your code, refresh your repository.

4. Go Live on GitHub Pages

There is no point in having a Jupiter portfolio if you cannot show it to potential employers.

On the far right-hand corner of the repository, select Settings. Under the GitHub Pages option, you’ll see a link that reads Your site is ready to be published. Click on that link to host your website live on GitHub.

Congratulations! You now have a bright-new GitHub portfolio ready. 

You can do anything you want with your portfolio. Add new projects and accomplishments, jump on new research and ideas—the next steps are completely up to you. In addition to this, you can also decide to modify the CSS and HTML files if you want to customize your portfolio.

Common Problems When Building a GitHub Portfolio

In this section, we’ll discuss some of the most common errors that developers make when building their portfolios on GitHub.

Focusing on Quantity Over Quality

While there is no problem in experimenting, adding too many projects to your repository will make nothing stand out. Moreover, when a recruiter asks you questions regarding a project, you won’t be able to provide insightful answers.

Don’t get us wrong—we aren’t asking you to stop experimenting or adding projects to your GitHub profile. Just make sure you only pin relevant projects that you think are your best work. In other words, instead of having 6-7 small projects, pick one and polish it to stand out from other developers.

Forgetting to Add a README.md

The readme is the entry point of your project and the very first thing that visitors will see. That’s exactly why we think every code depository should have a README.md.

The following are a few questions you want your readme to answer:

1. What is your project about?
2. How to install and use it?
3. What does it look like?

Being Afraid of Learning in Public

Many developers are afraid to make mistakes, which ultimately leads them to do nothing. Don’t be like them. In fact, if you look at some of the most popular repositories on GitHub, you’ll find most of them are far from perfect, and that’s totally fine!

Don’t be afraid to learn in public thinking that a potential recruiter might not hire you if they find out that you forgot a bracket or a semicolon while checking your project’s Git log.