How to create a design portfolio for free (or within $10 budget)
A portfolio is a platform to showcase your work and does not limit to just designers. This blog is for anyone who wants to create a showcasing website whether it be a design, photography portfolio, freelancing business or even your CV. However, as a UX/UI designer, I will be using UX/UI design as an example for the purpose of this blog.
In this blog, I will show you a step-by-step guide in designing how you want your portfolio to look, some website templates for inspiration and how to host and get a domain for your website for free using GitHub pages.
Things you need to download/sign-up
Here are the free tools I use to create my portfolio. Trust me, these downloads/sign-up won’t be a one-time thing. If you are a designer, like me, you’ll be using these tools a lot (or even everyday).
- Sign-up for a GitHub account here
- Download and sign-up to Figma here
- Download GoFullPages Chrome extension here
- Download Visual Code Studio here
Now let’s get started!
Step 1: Find a website template (inspiration)
Don’t go to Pinterest! We want to see how an actual working website works with cool animations and responsiveness. I use https://themeforest.net/ to search for inspiration and to potentially use it as my website template later on.
Important: Make sure to head over to HTML Templates only as we will be downloading all the code files later on to host on GitHub
If you can’t find a template that you like, there are other HTML templates you can look for as well like colorlib or just Google “HTML templates”. I personally find that free templates are too basic.
Things to look for in finding HTML template
- Make sure the website is responsive and work for mobile, iPad and other devices
- The template gives you a variety of pages
- You can right click inspect the pages to see the code structure. A good HTML template is having a comprehensive code structure with comments
- While fancy animation is a plus, you don’t want your website to be too overwhelming. We’re making a portfolio, not an animated film.
Note: If you can find a free template that you like, that’s good news, you won’t be paying for anything today. A lot of the templates are under $10 and affordable! Worth it for an impressive portfolio.
Step 2: Screenshot the main pages
Use the GoFullPage Chrome extension plug-ins to capture from top to bottom of the templates you found. The main pages are Home, About, Work, Work-single and Contact. You don’t have to screenshot every single pages in the template because yes, that would be very overwhelming. Just screenshots the one that you like → save them into a folder as jpg.
Step 3: Paste screenshots onto Figma
Create a new design file on Figma and name it “Portfolio wireframe”. After that, you want to paste your screenshots from the website template that you took onto Figma blank canvas. In this way, we can see the overall picture of what the website templates consist of.
Note: If you don’t like the template you first choose, you can always change it before you make the final decision.
Step 4: Start designing your homepage
What does your homepage to consist of? This is usually the landing page and where most users might spend time on most. You can follow the website homepage template, or maybe you want to re-design to fit your needs.
My homepage consists of
- Tagline (who I am)
- My image
- What I can do
- Recent design work
- My side hustle work
- Blog preview
- Footer (don’t forget)
- Menu navigation
- Header
- Logo
Pick and Steal
Yes, you heard it right! We are going to be stealing each sections from the templates that you screenshot and fill them with your content. Here are all my screenshots and I used a red border rectangle to highlight the sections that I want to use in my website.
Step 5: Create section UI element from screenshots
This step is called low-fidelity wireframing. I started off creating a blank frame by pressing ‘F’ and created a 12 column grid to start designing my homepage. Here’s the setting below and you can use the same too!
Why 12 column grid? (you asked)… because 12 is divisible by a lot of number so when you place content, it is responsive for any devices (like mobile) and the grid will allow your content to scale in big/small screens while still looking clean.
Here is how I wireframed my home page for the first section, stealing from one of the template section in homepage. Just a rough guide to see how I want my home page to look like. This process shouldn’t take long. You then do the same for the rest of the pages.
Here is another wireframe from another website template. As you can see, I picked a couple of templates because I was being indecisive 😅 .
Step 6: Add in assets (images & icons)
After you finished all your wireframe pages, it’s time to add in the images and spice up your wireframe to complete your design.
Tools I use to create beautiful assets
- Canva- background remover
- Free Photoshop file mock up from Mockup World for your design work
When using the mock up photoshop file, make sure to keep the style consistent and allow background to change colours too to create a good portfolio impression.
Step 7: Transfer design to code :S
The scariest part! Now it’s time to purchase that those template. Which ever template you used to screenshot, make sure they are purchasable and provide you with a full code folder. I love themeforest.net because not only it gave me the full folder, it also gave me a guide on how to use it.
You can double click into each .html file and it should open up what that page looks like. This will only be available to your computer, so technically, you don’t require an internet connection to see the drafting website.
Step 8: Open up code editor Visual Code Studio
In the “Getting started” tab, click “Open…” and select the folder in which you downloaded the template.
Note: Make sure the whole folder is selected and not just a single file.
Navigate to the home page that you based your design on. In this case, my home page is based on the page called home-1.html so I am going to duplicate the file and work on the duplicated version. I renamed my duplicated file index.html
Note: Make sure to name your homepage index.html so that GitHub pages will recognised the home page.
Always duplicate the file and work on it.
Step 9: Don’t know code? No worries.
If you’re on Mac, you’re going to be using Command + F a lot to navigate through your code. If you’re on PC, you can use Control + F.
Depending on the template you use, I won’t be much help in finding your code, but if you use themeforest.net like I did, here is a guide. Most website HTML code template will have comments (green colour text) to identify what the code is. You want to focus on a block of code between section start and end. This is because each section will represent the section of the design you did on Figma.
<!-- section start -->
A chuck of code
<!-- section end -->Remember this image from Step 4? Each section that we highlighted in thick red border can be seen in your code inside section start and section end.
When you have identified what sections in the code belong to which section in the design, you can then start to move around the sections and steal a section from another .html file and paste it according to your design. This process can take some times but feel free to comment below what you’re stuck with!
Step 10: How to change images
Usually images and all assets are in one folder called img. The template that you downloaded should have an image folder or called assets. Save all your images in there and navigate to your code.
Look for img from your short-cut. The “/” forward slash means that it’s in a folder so the image that I wanted to upload called “slider-1.jpg” is inside the folder called project1 and that is inside a folder called img.
Note: When naming your image file, make sure you name without a space and use dash (-) if it’s two words.
Step 11: Host the website on GitHub
So you’re done with the coding and it’s looking amazing! You’re ready to launch this to the whole world. Let’s get started.
First, sign-in to GitHub and create a new repository under the repositories tab. In GitHub, we call folders- repository or “repo” for short. Make your portfolio public so that your website can be seen by people.
Important! Name your repository yourportfolio.github.io
.github.io will become your domain name. In this case, my website is called pennytalalak.github.io because this is how GitHub pages work.
Step 12: Start dragging your HTML files into your ‘repo’
This step is important and you must read every single word here. This is not a drag and drop. First, click into your repo and it should be empty (at the moment). Copy the URL and open up Visual Code Studio.
In Visual Code Studio, open up Terminal and check the location by typing ls.
ls
This should show all the files within that folder.
Our goal is to navigate to My Document so find that document folder with the following code. I recommend when you downloaded your HTML template, save it in My Documents. The following below code means direct me back to the folder before.
cd ../
I found my Documents! I had to use cd ../ twice to go back 2 folders to be in Documents. Now, remember that URL I told you to copy? In here we want to copy that GitHub repo into here
git clone {paste URL}
In this process, they might ask you for your GitHub log-in details (username and password). If your Terminal doesn’t work or you don’t have Git, you might need to download additional software.
You know you did this right when you can see the repo in your Document. Navigate to your actual Document on your local computer and check if a folder called yourname.github.io is there. If it’s there, start transferring your files from HTML templates onto that folder with just drag and drop. Transfer all the files except the .html files that you did not touch. We can then make the folder is light and not full of unused files.
Step 13: Update your folder on to the GitHub website
Make sure your Visual Studio Code is now opening the new folder called yourname.github.io that you just cloned. Here is some commands that you’ll need to update your folder onto the GitHub website.
Check the status of the folder if you’ve made any changes. In this case, you made changes by drag and dropping files from HTML templates onto this new GitHub folder that you cloned. A bunch of red text should appear in your Terminal. That red text is telling you which files have changed.
git status
Add all of the changes file to GitHub. Don’t forget the “.” dot- meaning that you are adding every single files to the changes.
git add .
Nothing much will happen to terminal. Next you want to add a comment and tell Git what is being changed.
git commit -m 'adding files to git repo folder'
After pressing ‘enter’, a bunch of code will come up which to be honest, I have no idea what it’s saying. But in the third last line, it says 1 file changed. You know that git is aware of the changes and tells you what file is being changed in the line after.
Final step is to push the changes onto the GitHub repo. This may take a while but after it’s all done in the Terminal, you can check if your changes are appearing on to the GitHub website.
git push
In your repo yourname.github.io, your files should appear. You can check when it was last commit at the top. In this case, mine was 5 mins ago!
This step is probably the most confusing step. If you’re new to Git, I recommend reading some documentations about it here or get in-touch with me if you have any questions or your git didn’t work!
Step 14: Check your hosted portfolio
Once you’ve got everything in your portfolio git repo, simply just type into your browser your whole repo name yourportfolio.github.io and it should show up your portfolio!
If you made it to final step, I applaud you. Share in the comment below what your portfolio looks like! If you have any questions for any steps, please let me know too because it can be really hard to read the blog and turn it into an execution.
Here is my portfolio https://pennytalalak.github.io/
