Make A Resume Website From Scratch

You've seen those fancy resume websites. Now make your own.

Hey.

Your artistic and web-savvy friends make them. Your instructors might have plain-white ones. If you have no idea what I am talking about, check out some example sites.

This how-to walks you through building your own resume site and getting it published online. If you want to buy a template or pay someone to make a site for you, there are places to do that. This is not that.

Building a personal website will take you some time. If you are like lightning, maybe an hour. If you spend time tinkering and perfecting, it could be a few days. We think it’s worth it.

Here is a preview of what you will build. It’s adapted from a theme by blacktie.com with some backgrounds from graphicburger.

You can go fast or slow. If you want to go fast:

1. Download this folder (or clone the git repository https://github.com/knommon/resume)
2. Unzip the file and drag the folder into the sidebar of Sublime Text(⌘+K ⌘+B to open the sidebar if it is not there)
3. Find all the places where it says EDIT in index.html (⌘+F to search)
4. Replace the content with your information
5. Skip to 7. Theming your website

Step by step, you get to control what your site looks like and learn more.

1. Start an HTML File

Open up Sublime Text. (download here). If you are a coder then your favorite text editor will work too. If you haven't coded before, welcome to Sublime! It’s wonderful. If you want some tips to use it better, try here.

Create a new file (⌘+N). We will put it in a folder later.

Copy and paste this code into your file:

Ignore all the things you don't understand. Edit the title — that’s what will show up at the top of the browser.

Change ‘Your Name’ to your own name, ‘What you do’ to the thing you are (author, librarian, social worker, party animal) and add your email both places. Save the file (⌘+S) as index.html, in a new folder called resume.

Navigate to that folder and open the index.html file in your browser.

It should open up and look like this:

It’s not very good yet, but you made a web site! COOL!

2. The About Section

A quick intro to who you are and what you are about.

Paste this code between the big chunk from part 1 and the closing </body> tag.

Now edit the paragraph so the short description is actually a short description, instead of instructions. If you had an objective statement on your paper resume, this section might draw on it.

Save again, and try it out in the browser. Still ugly, but we are laying the groundwork here. (It should look something like this).

Step 2

See that link? You can make it easy for someone to download a pdf of your resume. All you need to do is save the pdf file in the same resume folder and make sure that the name of the file is the same as the one referenced by the hyperlink. Like so:

<a href=”yourname_resume.pdf” target=”_blank”>

3. THE RESUME

The moment you've been waiting for: Adding your resume. Education, Work Experience, Awards — whatever you want to show off to a potential employer. This section has a lot of code all at once, but it’s the same story as before: copy, paste, edit.

It’s a lot more editing this time. Take breaks. This code goes below step 2's code, and above the closing </body> tag.

Edit the template text to make the resume your own. This code assumes you want three sections: Education, Work, and Awards, in that order. If you don't want one of those sections, you can modify the content to suit your needs. If you want them in a different order, switch them around. If you want a section that isn't included (like Skills, Certifications, or Activities), you can copy and adapt one of these.

Save and check how your site looks obsessively. It should look like this.

4. Contact information in the footer

Your email address has been below your name since the beginning, but you should include other contact info down below everything else (just below the closing </body> tag).

Here’s the code:

Add your email, address, and phone number. Then, replace each of the #’s with the web address of your social site. You want to make it easy for people to connect with you. Each will look something like:

<a href="https://www.facebook.com/medium" target="_blank"><i class="icon-facebook"></i></a>

The icons will not show up yet when you save and open in the browser. That’s okay, we will add them in soon. If you don't want to link to a particular social account, delete the whole line.

With the footer in, it should look like this.

5. Finishing up index.html

We want to get to the styling of the page, making it cool and responsive (adjusts to different size screens like computers, phones, etc.). Just a few things to add to the index.html page before we can do that — don't worry, these are just cut and paste!

Put this below <head> but above <title> up at the top of your file:

If you want, you can fill in the optional details description and author. Make sure to add your info inside the quotes in content=“”.

Save it and open it up — still ugly! Should be something like this.

As you can see, plain HTML is very boring; it just gets the content on the page. Next up: making the whole thing beautiful. On to the styling!

6. Adding Style

This is where we put the design in web design. If you haven't already, download the tutorial files here. Copy the css, font and images folders into your resume folder. The css folder contains stylesheets to make the site look pretty. But if you reload the page, it will still look the same! That’s because we still need to to tell the browser to use the styles that we've created. Here’s how:

Put the following code below the </title> but above the closing </head> tag:

Now if you reload your page, it should look like a real website. Like this.

Congratulations, you did it!

You built something you should be proud to showcase. Take a break, get some fresh air.

Now on to customizing your website!
(having the same site as everyone else is boring).

7. Theming your website

We'll be working to customize 3 main sections of the resume: the background behind your name, the banner and main font color, and the link color. But as you'll soon see, it’s easy enough to change the color for just about anything. Pick 3–4 colors you like from http://clrs.cc/ or from Adobe Kuler (hover over a color to show it’s code). The color codes you need look like this: #FFFFFF or this: #1CBCAD.

a. customize the header

Open up main.css and go to where it says .header { (on line 148)

If you don’t want to use a background image and prefer a plain ol’ color, delete the line like:

background: url(../images/header-bg.jpg) no-repeat center top;

Look at the line directly above and replace #1CBCAD with the color of your choosing.

Otherwise, if you'd like to change the header image, you can use a different image or download a new image to the images folder. Then change the url to ../images/your-image.jpg. Save and reload and your new image should show up. If you like the background that’s there but want a different color, there are three other images to try included in the images folder.

b. customize the banner and main text color

To change the about section’s background color, open main.css and find the following section (on line 110):

/* About Wrap */
.about {
  background: #2c3e50;

Change #2c3e50 to whatever color your heart desires.

A similar process can be done to change the main text color. Look for the following section and edit it in a similar fashion:

.desc t {
  color: #34495e;
  font-weight: 700;
}

c. change the link color

Pick an accent color for the links to make them stand out on the page. To change the link colors (and the social icon colors) find and edit the following section:

/* Links */
a {
  color: #1CBCAD;

Replace #1CBCAD with the accent color for your links.

Note: color changes the text color whereas background changes the background color / image.

Now that you've seen how to edit some colors of a few elements on the page, play around and see what else you can change.

8. Challenge: Animate your name

Difficulty: moderate. If you don't like challenges, skip to step 9.

Background

Let’s talk a little bit about what’s happening under the hood of our website. We've seen that HTML by itself is very bland and CSS allows us to theme our site by changing the colors and background. But how does the browser know what style to apply to each part of the page? Basically, we tell it to with HTML like this:

<div class="about">

We're telling the browser to apply the .about style to this container. (For no rhyme or reason “.” (dot) stands for class.)

Styles can also be applied to types of elements like we saw before with links:

a {
 color: #1CBCAD;

The a is the HTML link and this style applies to all links on the page.

The Challenge

In main.css, there are two classes called animated and fadeInUp — you'll need both of these. See if you can animate your name by including these classes in the class attribute of the right div.

Hint: you can add more than one class per element separated by a space. Example:

class="about class1 class2"

Ready, set, go!

If you're stuck, here’s the gist.

9. Optional: Change the fonts

So you've made it this far, but the default font choice is really not working with your vision. Let’s do something about that…

Head over to Google Fonts and find 2 fonts. One for your headers (i.e. your name, ABOUT, etc.) and a second for body text (the large chunks of text that you read). Make sure to choose a readable body text font; the header font can be anything under the sun.

Scroll through, and if you see any you like, click Add to Collection (it’s better to add more than 2 here). When you have a few that you like, Review them (tab at the bottom right). Narrow it down to your 2 favorites, and click Use.

For your body font(Oxygen in this example), we need fonts of weight 300, 400, and 700. If the font you pick doesn't have that, don’t worry about it. For the header, we only need the 300.

Scroll down to part 3, where it says “Add this code to your website” and copy that code.

Now to replace the old fonts. Open up index.html and find the line where the old fonts were linked. It should look like this:

<link href="http://fonts.googleapis.com/css?family=...>

It is at the top between the <head> tags. Replace this line with the code you just copied.

One last thing: we have to update our stylesheet to use the new fonts we've imported. So head over to main.css and go up to the top. Inside the body rule, change Lato to the name of the font you chose for the body (but keep the quotes!).

body { 
  background-color: #f2f2f2;
  font-family: “Lato”;

and then switch Raleway to your header font.

h1, h2, h3, h4, h5, h6 {
  font-family: “Raleway”;

Save both of these files and check out your new fonts!

Pro tip: typically web developers work with both HTML and CSS files at the same time, so it makes it easier to have them both open at the same time.

To split screen in Sublime Text, go to View > Layout > Columns: 2 (Option+⌘+2) and then drag your main.css tab to the new right column.

All finished!

You’re awesome! You've created something really cool looking, and you learned a bit in the process. Now it’s time to celebrate. Print it out and put it on your fridge, show your friends, tell your mom.

Where to go next?

Do you want other people to be able to see this resume online, or even put a link on your physical resume to this website? If so, check out How to Publish a Website.

If this tutorial was awesome, let us know! @robcobbable and @nickaversano. If you think your friends ought to see it, hit recommend. If we got something wrong or if something is confusing, let us know that too! Thanks for reading!