We only partner with brands that we know and trust. If you use our links to buy a product we may make a small commission at no extra cost to you. Thank you for supporting HHT!
Building portfolio projects is something all web developers have to do.
This article takes you through creating, updating, and hosting a portfolio project from start to finish – you'll see how to link up your codebase to GitHub and host it online for free (this is key, we'll talk about that later, though).
Let's start with creating a repo on GitHub.
1. Create A GitHub Repo
GitHub is an online service that hosts your code in the cloud and allows you to monitor and track changes to your codebase over time.
It's easy to confuse GitHub with Git, a popular version-control tool, but GitHub is different because it stores your code (and all of the changes it's undergone) in the cloud.
For this reason, we're going to publish the code for our project to GitHub (for free), which will then allow us to use GitHub's web-based architecture to host it online.
Let's start with creating a repo (short for repository – i.e. where your code lives).
If you haven't already, create a GitHub account, and navigate to your dashboard:
You'll see a green button that says New – this will allow us to create a repository.
Give your repo a descriptive name, and accept all the default options (no need to get fancy yet).
Scroll done to the bottom and click Create Repository.
2. Clone It Locally
Great, now we have a GitHub repo for our project!
In a nutshell, this means we have created an online home for our codebase, but we've yet to actually create anything or link up our local development environment.
Let's get that sorted out.
When you've created your repo, you'll see a couple of prompts indicating how you can – the easiest way is copying the repo URL, and cloning it in VS Code with the version control extension.
Each GitHub repo gets a unique URL which you can use to link your local dev environment to GitHub – this will help synchronize your repo and any local environment where you edit your code
Click the copy button to grab your repo URL and let's head over to VS Code and open a new project.
By the way, if you don't already have your VS Code set up, not to worry. I've already taken the liberty of writing up a quick-start guide, check it out here:
For now, I'll assume you have VS Code all set up and ready to go.
When you open a new Workspace in VS Code, one of the first options you'll see is to clone a Git repository:
Once you click Clone Git Repository, you'll see a prompt open up asking if you'd like to clone a GitHub repo (you do want to do this):
Paste in the URL that you copied from GitHub, and then specify the file location for your local Workspace folder:
This folder is where you local code will live (every VS Code project needs a folder like this)
Now, you'll be able to open your local VS Code workspace and start building.
3. Build Your Project
Next, you have to actually build up your project before publishing it (duh).
Once you've added a solid chunk of code and want to publish it up to GitHub, navigate to your source control tab in VS Code (shortcut: Ctrl+Shift+G) to see your recent changes:
I created a simple
index.html file as well as a
styles.css and those changes appear under the Changes tab.
To commit and push these files back to GitHub, you can use the visual interface VS Code provides, or the command line – it's good to learn the command line (just in case you don't have access to a fully-functional IDE later).
Open a new terminal with Ctrl+Shift+` and then type the following commands in sequence:
git add .(this stages all the files you've worked on, which means they're ready to be committed)
git commit -m "your message here"
Your terminal should look something like this:
At this point, your local Git repository is up to date with your most recent changes, but your GitHub project is not. This is why VS Code indicates that you need to sync your project:
It recognizes that you cloned your project from GitHub, and that after you published local changes, there's no way your original GitHub project is synced up (very clever, VS Code, very clever indeed).
Click Sync Changes and then Ok in the popup:
Let's check our GitHub repo to make sure everything worked.
Both files from our local dev environment are now visible on GitHub, with the commit message from when we published changes locally.
Now, we can move on to the fun part: publishing your project online.
4. Publish To GitHub Pages
GitHub pages is a free hosting service specifically for getting your web-based projects online.
Straight from GitHub:
In short, if you have a standard web-app project (HTML, CSS, and JS files), GitHub Pages will take the source code and generate static HTML pages from it, and then host it on a domain (you can provide your own custom domain if you so choose).
Without further ado, let's get our project online.
Navigate to the Settings tab, and you'll see a tab labelled Pages – click there:
Now, we have to tell GitHub pages where to find the code so that it can build our webpage for us.
Under the Source tab, select the main branch of your repo:
P.S. – don't forget to click Save after.
GitHub will then build your web page for you, using the source code from your project. When it's done, it'll publish the result on a domain for you, usually along the lines of
<yourusername>.github.io/<your-repo-name>, like so:
You can monkey around with the different options GitHub offers like custom themes and domains, but functionally, your project should already be online.
Cue victory dance.
Extra Tips And Tricks
If you're new to this whole building-code-projects-thing, you may be a bit overwhelmed by now.
It's ok! We all start somewhere.
To help you along your coding journey, here are a few tips I wish I knew when I was first starting to build with code.
Learn Git Basics
Git is everywhere.
It's basically an unwritten requirement no matter where you end up, and even if you freelance or build your own projects, you're going to need a version control software to keep things organized.
Here are a few articles/videos I recommend looking into if you're not 100% comfortable with Git:
- Learn Git In 15 Minutes – YouTube (Colt Steele)
- Git For Beginners – Youtube (Edureka)
- Learn Git Branching – learngitbranching.js.org
The most important step: practice.
Integrate Git with your projects, use the command line if you can (instead of your IDE's visual interface), and you'll be a version control pro before you can say git commit.
Use Live Server To Preview Your Code When Building
Live Server is a VS Code extension that allows you to preview your web apps on a local development server.
Especially if you're using GitHub Pages or otherwise hosting your project, it's important to make sure everything looks (and works) right before the website gets built.
Here's how to get started.
First, install the extension from the VS Code marketplace.
Once you have it, open your project workspace, and you should see a little icon in the bottom toolbar saying Go Live (if it's not there, try restarting your VS Code):
Live Servers hosts the code locally and serves it to your default browser – with one click of a button.
Plus, as the name suggests, it listens to live changes to your code. Any changes to HTML, CSS, or JS will elicit a refresh and you'll see the changes reflected instantly.
Once you get used to it, you'll wonder how you even managed to code projects before.
At Some Point, You Have To Just Start
A less functional tip, but still important to mention: starting a coding project is no simple task.
How do I know if I'm ready to build anything?
Where do I even start? Do I just wait until inspiration hits?
Everyone else's projects are so good, why even try to compete?
You've probably though a few of these things in your journey of learning to code (I know I definitely did).
Here's the good news – you probably are ready to start building, and it's ok to be nervous or unsure how to start.
The paradox is that you won't be comfortable building projects until you start building projects.
If you think of projects as a part of your learning process, rather than the culmination of it, it may take some of the pressure off. Your early efforts don't have to be perfect because they're part of your journey.
Make mistakes, build ugly websites that wouldn't even look good in 2002, and slowly but surely you'll find your confidence.
The Bottom Line
To create a coding project for your portfolio, you only need to follow 4 basic steps:
- Create a GitHub repo – this is your code's online home, and what GitHub Pages (a free hosting service) will eventually use as a source to build your project and host it online
- Clone your repo – this is what allows you to work on your project locally. Pull down your GitHub repo data and create a link between your local development environment and your GitHub repo
- Build your project – building with code is an integral part of the learning process. You'll learn how to use Git and other development tools, translate theoretical concepts into practical applications, and build irreplaceable confidence in your coding abilities
- Host your project with GitHub Pages – once your project is ready, you can use GitHub pages to host your project online. Pages will take your source code and generate static HTML, so it's perfect for basics web projects
And that's all there is to it.
Once you go through the complete flow once or twice, you'll be able to start projects without even thinking. At that point, you're only ever a few clicks away from translating your ideas into code.
Then, the real fun begins.