There are plenty of ways to create your personal resume website.
You can use one of many website builders or you can opt for a CMS such as WordPress, Drupal, or similar. You can also hire a professional developer to make one for you.
With so many choices, it can be hard knowing where to start. To make things even more complicated, each of these options comes with a different set of pros and cons, not to mention the level of difficulty or price tag involved.
But there's another great way to create your personal site in a reasonable amount of time. And that’s by using an HTML resume template. They’re easy to use and to upload to your hosting server.
Here are a few of the best (to quickly browse through before reading on):
On top of that, the code behind a professional resume website template is far less complicated for a novice to pick up than the more complex programming languages used in content management systems.
In this part of the Making a Great Personal Resume Website series, we walk you through the simple process of how to modify and upload an HTML resume template.
Follow this workflow to make your resume website and customize it to your personal brand—so you can launch your site in no time flat.
What Do You Need to Get Your Resume Website Live?
Before we get started with site template modification, let’s cover the tools you’ll need to get your HTML resume website up and running:
1. The Right Hosting Company
Purchasing the domain name for your site is only the first step on your journey. You will also need a hosting server where you will upload the files for your website. Finding the right hosting company is not easy, especially since there are so many of them. Most hosting providers offer basic hosting packages between $5 and $10 a month. Some companies offer unlimited bandwidth and space, while others offer more restricted plans.
The important thing to keep in mind is that almost all hosting providers support HTML templates. When shopping around for a hosting company, read through their FAQs and ensure the company provides customer support, should you need any help with your website. You should also do a little research and read through the reviews of a particular host on independent websites to see how satisfied their customers are.
2. An FTP Client
Once you find a hosting company, you will need to download an FTP client. An FTP client will allow you to upload your template to the hosting servers. The choice of the FTP program will depend on the operating system that your computer uses.
One of the most popular programs is FileZilla. It’s a free FTP program that’s very easy to use, and it’s available on Windows, Mac, and Linux.
3. A Code Editor
You will also need a text editor to make changes to your template’s files. While you could use Notepad or TextEdit to make changes, using a code editor will make it a lot easier. Unlike regular text editors, a code editor includes tools that facilitate the editing, such as using different colors for different parts of the code, which makes it easier to see what you are editing.
For the purposes of this tutorial, I’ll be using Sublime Text, which can be used on Mac, Windows, and Linux, and the trial version is free to download. Learn more about how to work with this popular code editor:
4. The HTML Template and the Images for Your Resume Website
The last two things you need are your HTML resume template and the images you plan on using on your site.
For the purposes of this tutorial, I’ll be using the Flatrica HTML resume website template, shown here:
You can find your website template in the Downloads area of your Envato account after you've made your purchase. Once you've downloaded the HTML site template, unzip the folder and save it to your desktop for easy access.
When it comes to images, you will need your headshot and any other personal photos you plan on using. You can also use a background image or pattern, so make sure you have all the images stored on your computer so you can add them to your template.
How to Edit Your Resume Website Template's Content
Now that you have everything in place, it’s time to personalize the template with your information. Let's walk through how to customize the Flatrica HTML template:
1. The Structure of This HTML Resume Template
Before we begin modifying the files, let’s take a look at the structure of this HTML template. When you unzip the folder, you’ll notice that it contains two folders: one with documentation and one with the actual template files.
The folder with the actual site template files has several subfolders inside:
- Colors, which has all the color codes and variables used in the site template.
- Fonts, which contains all the icon fonts.
- Images with all the placeholder images.
- A folder has all the JavaScript code needed for the template to function properly. In most cases, you will never need to edit this folder or the files in it as JavaScript provides extra functionality such as toggling the menu to open, controlling the slide animations, and validating forms.
- A PHP folder that contains the PHP code needed for the contact form to function. You will only need to edit a single line of code here to add your email address.
- The Sass folder contains all the variables for the stylesheets.
- Stylesheets contains the CSS files, which you will need to edit to add your styling to the template and match it with your brand.
Aside from these folders, there are also several HTML files: index-normal.html, index-video.html, single-blog.html, and single-portfolio.html.
Keep in mind that your template might not have all these files and folders; however, in most cases, you will come across the stylesheets, images, JavaScript, and PHP folders. Your template might also have fewer or more HTML files.
2. Replacing the Default HTML Template Information
Double-click index-normal.html (or index.html in case you're using a different template). This will open the file in your browser, which will make it easier to understand which parts of the code you'll need to edit and how to find them in your HTML template file.
If you look at the template in your browser, you'll see that you need to edit:
- Your name and contact information.
- The blurb of the text above the buttons for downloading your CV.
- Different sections that have information about your education, skills, experience, portfolio, past clients, and more.
Once you know what to change, you can begin to look for the corresponding code.
Right-click on the name which reads John Doe and select Inspect. You'll notice a panel pop up at the bottom that shows the HTML code that makes up our template.
The line of code containing the name is selected in the left side of the Inspector panel, with the corresponding style on the right side.
As you can see from the screenshot above, the name is between the <h4> tags, which are the HTML tags used to represent headings.
In most cases, tag pairs like this have an opening and a closing tag, and the content has to be placed between those tags to show up on a web page, like this:
<h4>John Doe</h4>
To edit the template, all you need to know is which tags contain the part of the page you want to edit, find them in the code, and replace them with your information.
Open the HTML File in Your Editor
Now, go back to the template folder, right-click on index-normal.html, and select Open with Sublime Text. You should now see the complete HTML code that makes up your template.
To begin editing the template, you want to find the same code you saw in the Inspector panel of your browser.
Scroll down until you find it around lines 150-151. Then, click between the <h4> tags and replace the name with your own.
After that, click between the <h6> tags, delete the text, and enter your profession.
Repeating these steps over and over will allow you to replace all of the dummy information with your own.
If there is a section in the template that you don’t need, simply delete it. In the screenshot below, I have selected everything in the Pricing table section and deleted all the code in it.
How to Replace Images With Your Own
To replace the images with your own, simply select all of the images in the corresponding folder, delete them, and place your images in the same folder. If you followed the advice earlier, you named your images with the same names as the placeholders, which makes it quicker to edit the template.
If you want to add more information, select the existing code in the desired section, copy it by clicking Control/Command-C, and then paste it below with Control/Command-V. In the screenshot below, I wanted to add another skill bar, so I selected the code for the fourth skill bar and copied it immediately below:
And the end result looks like this:
How to Change the Appearance of Your HTML Resume Site
Once you have replaced all the information, it’s time to style the resume website template to your liking. By default, the Flatrica HTML template comes with several different stylesheets. If you look at the stylesheets folder, you’ll notice they’re named after the colors used:
You can quickly adjust the color by replacing the stylesheet in the head of the document with the name of your preferred stylesheet. Look for the line of code that says:
<!-- CUSTOM STYLE -->
<link href="stylesheets/style.css" id="switch_style" rel="stylesheet">
Changing the name to style_blue.css will give our template a whole new color and look:
If you’re feeling adventurous, you can edit the main stylesheet called style.css with fonts and colors of your own choosing. For example, you can edit the background color in the style.css by entering a HEX code of your desired color like so:
background-color: #65b5c1;
Editing CSS can be done the same way we edited the HTML. Right-click the element you want to style and click Inspect. This time, you will want to look for the code on the right side of the Inspector tab and then find the same code in the code editor.
How to Upload Your Website Files to the Server
After you have modified the site template files to your liking, you’ll need to upload them to your hosting server. You should have received an email from your host containing the necessary information for transferring files via FTP.
To begin the upload process, launch your FTP program. In this case, I’m using FileZilla. Enter the information provided by your host in the top bar, and then click on QuickConnect:
Locate the folder with your template on your computer on the left side of the screen, and click on it to expand it. In the lower left side, select all the files and folders and drag them over to the right side of the screen.
Make sure to upload them to the root folder of your hosting server in the public_html folder.
Once all the files have been uploaded, open up your browser and enter your domain name. Congratulations, your new resume website is now live!
4 Quick Tips to Make Your Resume Site Awesome
Now that you know how to use an HTML resume template, here are four quick tips that will help you make your personal site even more awesome:
- Compress Your Images: Before uploading files to your hosting server, make sure to reduce the file size of your images by optimizing them. This will help you speed up your website. You can use a tool like TinyJPG to compress the images without affecting their quality.
- Consider Minifying Your Stylesheets and JavaScript Files: As with images, reducing the filesize will help your site load faster. Tools like CSS Minifier and JSCompress will do the job for you.
- Add Your Site to Your Social Media Profiles: You worked hard to create your site, and now it’s time to let the world know about it. Increase your visibility by adding your site to your social media profiles.
- Use It as a Part of Your Email Signature: One of the best ways to promote your site is to add it to your email signature. It’s simple, free, and takes seconds to set up, yet the benefits are numerous.
Set Up Your HTML Resume Template
Editing an HTML template may seem intimidating at first, but it’s not as difficult once you understand how the template is structured and what needs to be edited. If you also take the time to read a few tutorials, you’ll master HTML and CSS in no time. Use our guide above to modify your resume site template and increase your chances of getting hired.
