Goal

Build the three core pages of your portfolio - Home, About, and Contact - using clean HTML structure, consistent head elements, semantic sections, and site-wide navigation. By the end, you'll have a linked, three-page site in your /project folder, ready for styling in Unit 3.


What You'll Build

  • project/index.html (Home)
  • project/about.html (About)
  • project/contact.html (Contact)
  • Shared nav on every page
  • Linked stylesheet at project/assets/css/style.css
  • One profile image in project/assets/img/ (optional but recommended)


Before You Start

  • You've completed Unit 2.1 (structure) and 2.2 (head + body).
  • Your repo is open in github.dev.
  • Folder structure should look like:
project/
  index.html
  about.html
  contact.html
  assets/
    css/style.css
    img/   (add an image like profile.jpg)

If any files/folders are missing, create them now (right-click → New File / New Folder).

Step 1 - Make a Reusable HTML Base

Create a simple base you can copy for each page.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><!-- Page Title Goes Here --></title>
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <header>
      <nav aria-label="Primary">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
      </nav>
      <h1><!-- Site Title (Your Name) --></h1>
    </header>
    <main>
      <!-- Page-specific content goes here -->
    </main>
    <footer>
      <p>© <span id="year"></span> <!-- Your Name --></p>
    </footer>
  </body>
</html>

Copy this into all three files (index.html, about.html, contact.html) and then customize the <title>, <h1>, and <main> per page.

What is an aria-label: An aria-label is an HTML attribute used to provide an invisible, text-based label for interactive elements that don't have visible text on the screen.

A NOTE BEFORE YOU PROCEED: You already created a home page with some content in Unit 1, but since it was Unit 1, things were kept pretty basic. The above template is set up to be a better foundation for everything else we will do in this course. Before you delete the code from your Unit 1 homepage, copy the content you created within the <main></main> of the old index.html into the above code, replacing "<!-- Page-specific content goes here -->", and save that as your new index.html.

Step 2 - Add Navigation to Your Homepage (index.html)

Inside of <header> let's add some navigation:

<header>
  <nav aria-label="Primary">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
  </nav>
  <h1>Your Name</h1>
  <p>Short tagline about who you are</p>
</header>
<main>
  <section>
    <h2>About me</h2>
    <p>2–3 sentences about you</p>
    <ul>
      <li>One interest or skill</li>
      <li>Another interest or skill</li>
      <li>One goal for this course</li>
    </ul>
  </section>
  <section>
    <h2>Explore</h2>
    <p>Visit my favorite resource on the web</p>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN: HTML</a>
  </section>
</main>
<footer>
  <p>© <span id="year"></span> Your Name</p>
</footer>

Step 3 - Build the About Page (about.html)

Set the <title> to About - Your Name. Keep the same header/nav/footer.

Inside <main>:

<section>
  <h2>About Me</h2>
  <p>2–4 sentences introducing your background and interests.</p>
</section>
<section>
  <h2>Skills & Interests</h2>
  <ul>
    <li>Skill or tool</li>
    <li>Interest or domain</li>
    <li>Another relevant item</li>
  </ul>
</section>

Step 4 - Build the Contact Page (contact.html)

Open your file named contact.html.

Set the <title> to Contact - Your Name, and reuse the same header, navigation, and footer structure from your Home and About pages to keep the site consistent.

Inside the <main> element, build a contact section that includes both simple contact methods and a structured contact form. This reinforces that forms are a natural part of the body of a webpage.

<section>
  <h2>Contact</h2>
  <p>The best ways to reach me:</p>
  <ul>
    <li>Email: <a href="mailto:you@example.com">you@example.com</a></li>
    <li>LinkedIn: <a href="https://www.linkedin.com/in/your-profile">Your Profile</a></li>
    <li>GitHub: <a href="https://github.com/your-username">@your-username</a></li>
  </ul>
  <h3>Send Me a Message</h3>
  <p>You can also use the form below:</p>
  <form action="#" method="post">
    <div>
      <label for="name">Name</label><br>
      <input id="name" name="name" type="text">
    </div>
    <div>
      <label for="email">Email</label><br>
      <input id="email" name="email" type="email">
    </div>
    <div>
      <label for="message">Message</label><br>
      <textarea id="message" name="message" rows="5"></textarea>
    </div>
    <button type="submit">Send</button>
  </form>
</section>

Important Notes

  • This form does not submit data anywhere yet.
  • There is no backend or JavaScript handling at this stage.
  • The goal is to practice clean structure and correct element relationships.
  • Focus on proper nesting and meaningful markup.

Later in the course:

  • You will style this form with CSS.
  • You will improve its accessibility.
  • You will refine its structure using best practices.

For now, you are building the structural foundation.

Step 5 - Keep the nav Identical on Every Page

The <nav> block (links to Home, About, Contact) should be exactly the same across all pages. Test each link:

  • From Home → About → Contact → back to Home
  • All links use relative paths (index.html, not /index.html).

Step 6 - Make Sure Your Stylesheet is Linked

In every page's <head>:

<link rel="stylesheet" href="assets/css/style.css">

If you don't have a stylesheet yet, create project/assets/css/style.css with a few starter rules:

html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 2rem; line-height: 1.6; }
header { margin-bottom: 1.5rem; }
nav a { margin-right: 1rem; }
img { max-width: 240px; height: auto; display: block; margin: 1rem 0; }
main > section { margin: 1.25rem 0; }
a { text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }

Step 7 - Test Locally (in the browser) and Fix Paths

  • Open index.html in the preview (github.dev) or your browser.
  • Click all nav links.
  • Confirm images load from assets/img/....
  • Confirm CSS loads from assets/css/style.css.

Step 8 - Commit and Publish (GitHub Pages)

  1. Commit with a clear message, e.g., Add Home, About, Contact pages with shared nav and base styles
  2. Publish: Settings → Pages
    • Branch: main
    • Folder: /project
    • Save
  3. Wait up to ~2 minutes and open your site URL.


Mini-Rubric (Self-Check)

  • Each page has a valid head: <!doctype>, <html lang>, charset, viewport, <title>, linked CSS.
  • Each page has semantic structure: one <h1>, logical <h2>s, paragraphs/lists where appropriate.
  • Navigation links work in both directions between all three pages.
  • Image (if used) has descriptive alt text.
  • All file paths are relative and case-correct.
    • A relative path is a file address that describes the location of a resource (like an image or a CSS file - for example project/assets/img/profile-pic.jpg) in relation to the current HTML document's position within the folder structure.It is critical for web development because it ensures your project remains functional when moved; as long as the internal folder structure stays the same, the links will work perfectly on your local computer, a classmate's machine, or a live web server.
  • CSS loads on all pages.


Common Fixes

  • Broken link? Check spelling/case: about.html ≠ About.html.
  • CSS not loading? Confirm <link> path is assets/css/style.css and the file exists there.
  • Image not showing? Ensure the image is in project/assets/img/ and the src matches exactly.
  • GitHub Pages 404? Re-commit, verify Pages is set to /project, wait a minute, refresh.

Source: Khalil Abdullah and Saylor University
Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 License.