Build a personal homepage

Why this matters

A personal homepage is the first project in almost every front-end portfolio, and for good reason: it uses everything you have learned so far, it is small enough to finish, and you will keep improving it for the rest of the course. In Module 3 you will style it, in Module 4 you will make it responsive, and in the final lesson you will publish it.

This lesson is HTML only. Resist the urge to style anything yet. A page with clean structure is easy to style; a page built to look right is hard to fix.

Step 1: plan the content first

Before writing any tags, write the content in plain text. A good first homepage has:

• your name and a one-line description of what you do or are learning;
• an About section: two or three sentences about you;
• a Projects section: two or three things you have built or are building (course exercises count);
• a Contact section: how to reach you.

Be careful with personal information on a public page. An email address created for your portfolio and a link to a professional profile are fine; your home address and phone number are not needed.

Step 2: sketch the structure

Map the content onto landmarks and headings:

header
  site name
  nav: About | Projects | Contact
main
  h1: Hi, I'm Sam Rivera
  section#about     h2 About me
  section#projects  h2 Projects
    article  h3 Recipe card
    article  h3 Library home page
  section#contact   h2 Contact
footer
  copyright line

Each <section> gets an id and a heading. Each project is an <article>, because it would make sense on its own.

Step 3: in-page navigation with fragments

A link whose href starts with # jumps to the element with that id on the same page:

<nav aria-label="Main">
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<section id="about">
  <h2>About me</h2>
  <p>...</p>
</section>

• An id must be unique on the page, and the match is case-sensitive: #About will not find id="about".
• The nav is a list of links because it is a list of choices.
• Clicking the link also moves keyboard focus position to that section, which helps keyboard users.

Step 4: write the page

Here is the skeleton of the main content:

<main>
  <h1>Hi, I'm Sam Rivera</h1>
  <p>I am learning front-end development and building small, accessible websites.</p>

  <section id="projects">
    <h2>Projects</h2>
    <article>
      <h3>Recipe card</h3>
      <p>A single recipe page with an ordered list of steps.</p>
    </article>
  </section>
</main>

Notice the heading levels: one <h1> for the page, <h2> for each section, <h3> for each project inside the projects section.

For the contact section, a mailto: link opens the visitor's email app:

<p>Email me at <a href="mailto:sam@example.com">sam@example.com</a>.</p>

The footer is a good place for a copyright line. © is an HTML entity that displays the copyright symbol; other useful entities are & (&), < (<) and > (>), which you need when you want to show those characters as text.

Step 5: check your work

1. Read it with no CSS. Does the page still make sense from top to bottom? It should.
2. Click every nav link. Each should jump to its section.
3. Tab through the page. You should reach every link in a sensible order.
4. Validate at validator.w3.org (paste your code with "Validate by Direct Input").
5. Check the outline. In the validator, the "Outline" option lists your headings; they should read like a table of contents.

Common mistakes

• Mismatched ids and hrefs, such as href="#project" with id="projects".
• Duplicate ids, which make links and CSS unpredictable.
• Sections without headings. If a group of content has no natural heading, it probably should be a <div>, not a <section>.
• Using <br> for spacing. Spacing is CSS's job, which comes next module.
• Putting the <nav> outside the <header> without reason. Both are valid, but keep the main navigation in one obvious place.

Quick recap

• Plan the content, sketch the structure, then write the tags.
• Landmarks (header, nav, main, footer) plus sections with ids and headings.
• In-page links use href="#id" and need an exact id match.
• Check with no CSS, the keyboard and the validator.

Try it

Open the Do tab and build your homepage. Use your own name and projects if you like; the checks only look at the structure.