Layout

Goal for this step

Your goal is to create the Harbor Notes home page shell. The page should introduce the site name, offer simple navigation, reserve space for future posts, and end with a short footer.

You are not writing real blog posts yet, and you are not styling colors or fonts. Part 1 is about structure: which regions exist and what belongs in each one.

When you open the finished page, it may look plain. That is expected. A clear skeleton is easier to style and expand than a messy pile of unlabelled divs.

What you should already know

You should know how to create a text file, save it with an .html extension, and open it in a browser. If you can type a heading and a paragraph, you are ready.

You do not need CSS or JavaScript for this part. You also do not need a hosting account yet. Everything runs on your computer.

Concepts in plain language

A static site is a set of files the browser can show without a custom server program. HTML files hold the content and structure. Later, CSS files will hold the look.

Landmark regions help people and tools understand the page. A header is the top branding and navigation area. nav lists links to move around the site. main holds the unique content of this page. footer holds closing information such as a copyright line.

Using these elements is better than wrapping everything in generic div tags, because the names already explain the job of each region. Screen readers can also jump by landmarks when the markup is clear.

Build the Harbor Notes shell

Create index.html as a normal HTML5 document with a title such as Harbor Notes. Inside the body, add a header that includes the site title as a link back to the home page.

Place primary navigation beside or under the title. For now, Home can point to index.html, and About can be a placeholder link such as #about-soon until Part 2 creates the real page.

In main, add a heading like “Latest notes” and a short paragraph that explains posts will arrive next. Close the page with a footer that includes a copyright line for Harbor Notes.

<header>
  <p class="site-title"><a href="index.html">Harbor Notes</a></p>
  <nav aria-label="Primary">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="#about-soon">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Latest notes</h1>
  <p>Posts arrive in the next part.</p>
</main>

<footer>
  <p>&copy; 2026 Harbor Notes.</p>
</footer>

Run the snapshot and verify

Clone the repository, enter the Part 1 folder, and start a simple static server. Visit http://localhost:8000. Serving the folder is better than double-clicking files once you have multiple pages and assets, because links behave more like they will on the real web.

You should see the Harbor Notes title, Home and About links, a main heading about latest notes, and a footer. The About link may not go anywhere useful yet. Confirm the page order from top to bottom matches header, main, footer.

git clone https://github.com/michaeldunga1/fcc-static-blog.git
cd fcc-static-blog/01-Layout
python3 -m http.server 8000
# Then visit http://localhost:8000

Common mistakes

Putting the footer inside main confuses the meaning of both regions. Keep footer as a sibling after main.

Using many bare div elements with no landmarks makes the page harder to navigate with assistive technology and harder for you to restyle later.

Skipping the site title link seems minor now, but every inner page later will want a reliable way home. Add it while the layout is still small.

Checklist and practice tip

Practice tip: say out loud what each landmark contains. If you cannot describe a region in one sentence, the structure may still be muddy. Clarity now saves time in every later part.

• One clear site title near the top of the page
• Navigation lists Home and a placeholder About link
• Main content explains that posts come next
• Footer sits after the main content
• The page opens locally through the static server