Resume Website: HTML Foundation — Programming Examples

Project purpose

Students will build one resume website throughout the semester. Lesson 2 creates the HTML foundation. Later lessons will improve the same files with CSS, images, links, accessibility, responsive layout, and JavaScript.

Important: Use sample contact information while learning. Do not publish a home address, personal phone number, or other sensitive information.

Lesson 2 goals

By the end of this build, students should be able to:

create a clearly named project folder and an index.html file
identify elements, start tags, end tags, attributes, values, and content
use a valid HTML document skeleton
organize resume content with headings, paragraphs, and lists
use strong and em for meaning
nest and indent elements correctly
add a purposeful HTML comment
validate the markup and test it in more than one browser

Project setup

Create this folder and file:

resume-website/
└── index.html

Why index.html? It is a common default filename for the starting page of a website. Keep the name lowercase and make sure the file does not end in .txt.

Instructor follow-along

1. Build the document skeleton

Talking points:

<!doctype html> comes first and tells the browser to use modern HTML rules.
<html lang="en"> contains the document. The quoted lang value identifies the page’s primary language for browsers and assistive technology.
<head> stores information about the document rather than visible resume content.
<meta charset="utf-8"> lets the browser interpret common characters correctly.
The viewport metadata prepares the document for responsive work later in the semester. It does not style the page.
<title> names the browser tab and should identify the student and the document.
<body> contains everything students will see on the page.

Pause and ask: Which lines produce visible content? Which lines help browsers and other tools interpret the document?

2. Add the resume heading

Talking points:

Use one h1 for the student’s name because it is the main topic of the page.
Use strong for the desired job title because it carries importance, not merely a bold appearance.
Use paragraphs for separate contact details.
Keep the practice data fictional until students decide what is safe to publish.

Pause and ask: Why is the student’s name a heading rather than a paragraph?

3. Create a heading hierarchy

Talking points:

Each major resume area uses h2: Summary, Education, Skills, Experience, Projects, and References.
A school, job title, or project name uses h3 because it belongs inside one of those major sections.
Heading levels communicate structure. Students should not choose a level because of its default font size.
Later CSS will control how headings look.

Pause and ask: If a second job is added, should it be another h2 or another h3?

4. Write paragraphs and use a line break carefully

Talking points:

Each paragraph represents one complete thought or related block of information.
The education entry uses br to break one short address-style block into two lines without creating a new paragraph.
A void element such as br does not have an end tag in modern HTML.
Repeated br elements should not be used for visual spacing. CSS will handle spacing later.

Pause and ask: When does the meaning call for a new paragraph instead of a line break?

5. Add lists

Talking points:

Use ul when order does not matter, such as skills or job accomplishments.
Every item belongs inside an li element.
Close each li and indent it inside its list container so the nesting is easy to see.
An ol would be appropriate only when the sequence matters. A ranked list or step-by-step process could use one, but resume skills are not steps.

Pause and ask: Would numbering the skills change their meaning?

6. Add semantic emphasis

Talking points:

strong communicates importance.
em adds stress or emphasis within the meaning of a sentence.
Use these elements for meaning. CSS will control visual weight and style later.
Open and close nested elements in the correct order. The inner element closes first.

Pause and ask: What does the markup communicate if all visual styling is removed?

7. Document and verify the work

Talking points:

The comments identify what students need to replace and document authorship. Comments do not appear on the rendered page.
Comments are still delivered with the page source, so they must never contain passwords, private data, or secrets.
Readable indentation makes the document tree visible and helps students find missing end tags.
Validation is a loop: validate, locate the first useful error, repair its cause, and retest.
A validator checks conformance. Students still need to read the page and test it in at least two browsers.

Starter HTML

Copy this into resume-website/index.html, then replace the placeholder information.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Student resume for Your Name">
  <meta name="author" content="Your Name">
  <title>Your Name | Resume</title>
</head>

<body>
  <!-- Replace the sample information with your own safe, professional content. -->

  <h1>Your Name</h1>
  <p><strong>Web Development Student</strong></p>
  <p>Booneville, Mississippi</p>
  <p>Email: student@example.com</p>
  <p>Phone: 555-0100</p>

  <h2>Professional Summary</h2>
  <p>
    Motivated web development student learning to create clear,
    accessible, and standards-based websites. Interested in an
    entry-level opportunity to apply technical and problem-solving skills.
  </p>

  <h2>Education</h2>
  <h3>Northeast Mississippi Community College</h3>
  <p>
    Web Development Program<br>
    Expected graduation: Month Year
  </p>

  <h2>Skills</h2>
  <ul>
    <li>HTML document structure</li>
    <li>Readable and valid markup</li>
    <li>Problem solving</li>
    <li>Written and verbal communication</li>
  </ul>

  <h2>Experience</h2>
  <h3>Job Title or Volunteer Role</h3>
  <p><em>Organization Name, City, State | Month Year to Present</em></p>
  <ul>
    <li>Describe one responsibility using a strong action verb.</li>
    <li>Explain a contribution or result when possible.</li>
    <li>Show a technical, teamwork, or customer service skill.</li>
  </ul>

  <h2>Projects</h2>
  <h3>Resume Website</h3>
  <p>
    Building a standards-based resume website throughout IST 1433.
    The project will grow as new HTML, CSS, and JavaScript concepts are learned.
  </p>

  <h2>References</h2>
  <p>Available upon request.</p>

  <!-- Your Name, today's date. Lesson 2 HTML foundation. -->
</body>
</html>

Student customization checklist

Validation and testing

Open index.html in a browser and read every section.
Confirm that the browser tab displays “Your Name | Resume” after personalization.
Validate the file with the W3C Nu HTML Checker.
Correct the first meaningful error, then validate again.
Open the page in a second browser.
Resize the browser window and confirm that the content remains readable.
Review indentation and make sure the source is easy for a classmate to follow.

Lesson 2 design decisions

The page uses one current HTML standard consistently.
The visible resume is organized with headings, paragraphs, semantic emphasis, and unordered lists.
CSS is intentionally absent. Lesson 3 can add presentation without rewriting the content.
Hyperlinks and images are intentionally absent until the class reaches those elements.
The source uses purposeful comments and does not place private information in them.
The file is ready for repeated validation and browser testing.

Next lesson checkpoint

Keep index.html as the source of truth. In the next lesson, add a stylesheet and improve presentation while preserving the content hierarchy and valid HTML.