Unit 5 · Stage 1

The Page Skeleton

This unit builds a single-page website about the traditional lifeways of Tribal Nations across Minnesota, North Dakota, and South Dakota. You start with the page skeleton, the three big parts every page needs. The editor already has your page started. Play with it, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. In Units 1 through 4 you learned HTML, CSS, Flexbox, and Grid. Everything you already know still works here. Any property lives in the 📖 Glossary at the top. This stage adds one new idea: semantic tags, tags that carry meaning.

1 Tags that mean something

Every tag you have used has a job. <h1> is a heading. <p> is a paragraph. Those tags describe what something is. Semantic HTML extends that idea to the whole page. Instead of wrapping everything in <div> tags, you name the structure directly.

The three parts you will build

<header>: Marks the top of the page. It usually holds the title and, later, the navigation.
<main>: Marks the primary content of the page. There should be only one <main> per page.
<footer>: Marks the bottom of the page. It usually holds credits and closing links.

🌿 Why this matters. These tags look the same as a <div> until you style them, but browsers, search engines, and screen readers can all read their meaning. Naming the parts of a page about Tribal lifeways is a way of building it with care from the very first line.

2 Your page is already set up

Look at the editor. The skeleton, the page title, and the base styles for the body are already there, the same kinds of rules you wrote in earlier units. You will add the three semantic parts below them.

What is already in your editor

body { ... }: Sets the font to Georgia, serif, a readable font that carries a sense of story and document. It removes the default margin and padding so nothing is pushed in from the edges.
background-color: #f5f0eb: A warm off-white, like parchment or birchbark. Softer than pure white, it reduces eye strain and fits the earthy tone of the content.
color: #1a1a1a: A near-black for text. Pure black on a warm background can feel harsh, so this is softer while still high contrast.

3 Add the header

Give the page a <header> that announces the site, and a CSS rule that styles it. This is the top bookend of your page.

What this code means

background-color: #2d4a3e: A deep forest green that references the woodland and prairie environments central to this unit. You will reuse it on the footer so the two frame the content.
color: white: White text on dark green gives strong contrast. The WCAG standard asks for a ratio of at least 4.5 to 1 for body text, and this pairing clears it.
padding: 40px 20px: The first value adds space above and below the text. The second adds space on the left and right so text does not press against the edges on small screens.

✍️ Add the header rule inside <style>, and add the <header> with an <h1> and a <p> inside <body>. Use the example below, then press ▶ Run.

/* add this inside <style> */
header {
  background-color: #2d4a3e;
  color: white;
  padding: 40px 20px;
  text-align: center;
}

<!-- add this inside <body> -->
<header>
  <h1>Traditional Lifeways</h1>
  <p>Food, the buffalo, and the trade routes that connected nations</p>
</header>

🤔 Quick check before you go on

Which semantic tag holds the primary content of the page, the one there should be only one of? Type it, then press Submit to unlock the last step.

4 Add the main and footer

Now add the middle and the bottom. The <main> will hold all your content in later stages, and the <footer> is the matching bottom bookend.

What this code means

max-width: 960px: Limits how wide the content stretches on large screens. Long lines are hard to read, so this keeps paragraphs at a comfortable width.
margin: 0 auto: Centers the main area. Setting the left and right margins to auto splits the leftover space equally, which centers the block.
footer { background-color: #2d4a3e }: The same forest green as the header. Repeating it creates visual bookends that frame the content between them.

✍️ Add the main and footer rules inside <style>, then add the <main> and <footer> inside <body>. Use the examples below, then press ▶ Run.

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
}

footer {
  background-color: #2d4a3e;
  color: white;
  text-align: center;
  padding: 24px 20px;
  font-size: 0.875rem;
}

<main>
  <p>Content coming soon.</p>
</main>

<footer>
  <p>Built with HTML and CSS</p>
</footer>

5 Make it your own

Experiment, then set it back the way you like it.

Change the header background-color to #5c3317, a rich brown, and see how the mood shifts.
Change the body background-color to #e8f0e8, a soft sage green.
Try changing font-family to Arial, sans-serif and compare the feel.

✓ Finish this stage

To complete Stage 1, your page needs a styled <header>, a <main>, and a <footer>. Press Check my work when you are ready. This opens Stage 2 and lets your teacher see that you finished.

YOUR CODE

PREVIEW