Stage 1: Hero and Food Sovereignty

STEP 1

Welcome to Unit 9: Planting for Seven Generations

Food sovereignty is the right of peoples to define their own food systems. Not just what they eat, but who grows it, how it is grown, where it comes from, and what knowledge surrounds it. For Native nations across Minnesota, North Dakota, and South Dakota, food sovereignty is an active movement: restoring seeds that were nearly lost, rebuilding connections to traditional harvesting and planting practices, and centering the idea that every decision about food today should serve the people who will be alive seven generations from now.

That seven generations principle is not a slogan. It is a framework for decision-making that appears across many Indigenous nations. When you ask "will this be good for the people who come after us?" before acting, you are thinking in a fundamentally different way than most modern systems do. It places community and continuity above short-term benefit.

In this unit, you will build a page that holds this story and invites community to contribute to it. You will learn how to build HTML forms so visitors can submit their own traditional recipes and food memories. You will style those forms with CSS. And you will write your first JavaScript: a small interaction that makes the page feel alive when someone participates.

What Are We Building?

A food sovereignty resource page with five sections: a hero with your research, a pillars section explaining key food sovereignty concepts, a featured recipes section with three traditional dishes, a community recipe submission form, and a thank you message that appears through JavaScript when the form is submitted.

STEP 2

Read First

Before writing any code, spend a few minutes with one of these resources. You are looking for two things: what food sovereignty means in practice for Native communities, and one specific detail that stands out to you, something you want to include in your research paragraph.

▶ NATIFS: North American Traditional Indigenous Food Systems , natifs.org (opens in new tab) ▶ Dream of Wild Health , dreamofwildhealth.org (opens in new tab)

NATIFS was founded by Oglala Lakota chef Sean Sherman and focuses on restoring Indigenous food systems across Native communities. Dream of Wild Health is a Minnesota-based organization working specifically on seed saving and traditional food access with Ojibwe and Dakota communities. Either one will give you strong grounding for the paragraph you are about to write.

Keep the research brief

You only need enough to write one good paragraph. Read for 5 to 10 minutes, take one or two notes, then come back and build. The goal is to understand the concept well enough to explain it in your own words, not to become an expert before you start.

STEP 3

Build the Page Structure

Type the code below. This builds your page base and the hero section styled in deep forest green. You will replace the placeholder paragraph with your own research writing in Step 5.

👉 Type this in the editor: <!DOCTYPE html>
<html>
<head>
  <title>Planting for Seven Generations</title>
  <style>

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Georgia, serif;
      background: #f8f5f0;
      color: #1a1a1a;
    }

    #hero {
      background-color: #2d4a1e;
      color: white;
      padding: 80px 40px;
    }

    #hero h1 {
      font-size: 2.5rem;
      margin-bottom: 8px;
    }

    #hero .tagline {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.7);
      font-style: italic;
      margin-bottom: 28px;
    }

    #hero p {
      font-size: 1.0625rem;
      line-height: 1.8;
      max-width: 700px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 24px;
    }

    #hero a {
      color: #a8d08d;
      font-size: 1rem;
    }

  </style>
</head>
<body>

  <section id="hero">
    <h1>Planting for Seven Generations</h1>
    <p class="tagline">A community resource for Indigenous food sovereignty</p>
    <p>Write your research here.</p>
    <a href="https://www.natifs.org" target="_blank">Learn more: NATIFS — North American Traditional Indigenous Food Systems →</a>
  </section>

</body>
</html>

STEP 4

Why These Styles?

background-color: #2d4a1e on #hero, a deep forest green rooted in the color of living land. Every unit in this curriculum uses a distinct hero color that reflects its subject. Green grounds this page in the earth and the act of planting.
.tagline as a class on a <p> element, a tagline is a single short line that sits below the main heading and sets the tone. Using a class rather than targeting all #hero p elements means the tagline gets its own distinct style while the research paragraph has different sizing and spacing.
font-style: italic on .tagline, italics signal a softer, more reflective voice. The tagline is not a heading and not a body paragraph; it sits between them in purpose and in style.
color: rgba(255, 255, 255, 0.7) on .tagline, dimmed to 70% opacity white. Lower than the paragraph text at 85%, which creates a subtle visual hierarchy: the title commands the most attention, the paragraph text is for reading, and the tagline is a quiet breath between them.
color: #a8d08d on #hero a, a sage green that is legible against the dark background without the harshness of pure white. Using a green tint keeps the link visually connected to the page's color palette.
max-width: 700px on #hero p, limits line length for comfortable reading. Long lines of text on wide screens are hard to follow because the eye has to travel too far. 700px is a reliable ceiling for readable body text.

STEP 5

Write Your Research Paragraph

Replace "Write your research here." with one paragraph written in your own words about food sovereignty. Use what you read in Step 2. You might address one or more of these ideas:

What food sovereignty means and why it matters to Native communities
The idea of making decisions for seven generations
The role of seeds, planting, or traditional harvesting in food sovereignty
Food access and food security on Tribal lands today
One specific organization or effort doing this work in MN, ND, or SD

Write in your own voice. One strong paragraph is enough. This is the research portion of the unit, from here we focus on building.

Stage 1 Complete!

You have the page foundation and your research paragraph written as HTML. In Stage 2 you will add the pillars section: four concept cards covering food security, food access, seed sovereignty, and the seven generations principle. This is where Flexbox comes in for the card layout.