Digital Resume Tutorial

Let’s build your online resume!

Learning Objectives:

HTML Tags
Metadata
How to link stylesheets

Step 0: Set Up

Starter Code [download]

Create a folder called day_2 and create 2 files inside of it like so:

day_2
index.html
styles.css

Now, copy and paste this code into them:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Day 2</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        
        
    </body>
</html>

styles.css

/* Your code here */

Ask your Digital Resume Questions on Parthean Community.

Step 1: Adding the Content

All resumes have a header, where it tells us whose accomplishments we are looking at!

To add a header, we are going to use the <div>, <h1>, and <p> tag. What do these tags mean?

HTML organizes and marks text using tags so that special attributes are assigned to specific text when the browser reads the file.

The <p> tag defines a paragraph of text. The <h1> tag is the first header tag visible on a page, here used for the title of our resume -- the name! The <div> tag defines a division or a section of an HTML document, and is often used as a container for HTML elements to go in. We can give our <div> a name here using the class attribute, which will help us reference it in our stylesheet styles.css later.

So within the body tag, insert the following code:

<div class="header">
    <h1>Andrew Carnegie</h1>
    <p>5000 Forbes Avenue</p>
    <p>Pittsburgh, Pennsylvania 15213</p>
    <p><b>andrew@andrew.cmu.edu</b></p>
</div>

Next, we need to add the rest of the resume content. Let’s introduce 2 more tags that go hand-in-hand: the <ul> and <li> tag!

When making bulleted or numbered lists in HTML, we use these 2 tags. <ul> stands for unordered list tag, and <li> stands for list item tag. The <ul> tag defines the unordered, bulleted list, and the <li> tag defines a list item.

So within the body tag, right under the code you just added, add the following code:

<div class="container">
    <h1>
        Summary
    </h1>
    <p>I'm a Scottish-American industrialist, business magnate, and philanthropist. I led the expansion of the American steel industry in the late 19th century and became one of the richest Americans in history. I also became a leading philanthropist in the United States and in the British Empire. During the last 18 years of his life, I gave away about $350 million to charities, foundations, and universities – almost 90 percent of his fortune. My 1889 article proclaiming "The Gospel of Wealth" called on the rich to use their wealth to improve society, and stimulated a wave of philanthropy.</p>

    <h1>
        Accomplishments
    </h1>
    <ul>
        <li>Founding and leading the Carnegie Steel Company</li>
        <li>Founding the Carnegie Corporation of New York</li>
        <li>Carnegie Endowment for International Peace</li>
        <li>Carnegie Institution for Science</li>
        <li>Carnegie Mellon University</li>
        <li>Carnegie Trust for the Universities of Scotland</li>
        <li>Carnegie Library</li>
        <li>Carnegie Hero Fund</li>
    </ul>

    <h1>
        Legacy and Honors
    </h1>
    <ul>
        <li>The dinosaur Diplodocus carnegiei (Hatcher) was named for Carnegie after he sponsored the expedition that discovered its remains in the Morrison Formation (Jurassic) of Utah. Carnegie was so proud of "Dippi" that he had casts made of the bones and plaster replicas of the whole skeleton donated to several museums in Europe and South America. The original fossil skeleton is assembled and stands in the Hall of Dinosaurs at the Carnegie Museum of Natural History in Pittsburgh, Pennsylvania.</li>
        <li>Carnegie, Pennsylvania, and Carnegie, Oklahoma, were named in his honor.</li>
        <li>The Saguaro cactus's scientific name, Carnegiea gigantea, is named after him.</li>
        <li>The concert halls in Dunfermline and New York are named after him.</li>
        <li>At the height of his career, Carnegie was the second-richest person in the world, behind only John D. Rockefeller of Standard Oil.</li>
    </ul>
</div>

As you're working on this, I'd recommend using your own information -- that'll make it more fun! 😁

Go ahead and refresh your page -- what do you see? What other type of lists do you think you can make with HTML?

Ask your Digital Resume Questions on Parthean Community.

Step 2: Adding Style

Now, we have to style our resume. This is where CSS comes in.

Remember the class names we gave our <div> tags? Those will be useful here! We can use those class names to tell our stylesheet how to style each part of the page, that we sectioned by <div>.

Add the following css code to day_2.css:

body {
    margin: 0;
    font-family: Helvetica Neue,Helvetica, Arial,sans-serif;
}

.header {
    text-align: center;
    background-color: lightgrey;
    height:170px;
}

.container {
    padding-left: 15%;
    padding-right: 15%;
}

h1{
    margin-top: 0px;
    padding-top: 10px;
}

You should play around with the CSS and see what happens when you change certain numbers. Don't forget to refresh the page after saving 😁

Ask your Digital Resume Questions on Parthean Community.

Step 3: Linking HTML to CSS

We are so close to being done, but not quite! We still need to link index.html and styles.css, so that they can communicate with each other. Also, we want to give our HTML page a title, so we can see the name of our website in the browser tab. All of this will be done in the <head> tag.

The <head> tag contains information about the resources the website needs, and also contains the metadata of the website, like the author of the website and the description of the website. It includes the <title> tag, which is required in all HTML documents as it defines the title of the document.

We also need to be able to tell our HTML code where to get the CSS code from, so we link our stylesheet here. That is why it is important all our files are in the same folder!

In the <head> tag, add the following code:

<title>Resume</title>
<link href="styles.css" rel="stylesheet" type="text/css">

Ask your Digital Resume Questions on Parthean Community.

That's it!

You did it! You made a Digital Resume. Congrats!

Want to show off your work? Post your results on Parthean Community.

PreviousDay 2 Next(Optional) Putting Your Website Online

Last updated 4 years ago