UNIT 12 • STAGE 1 OF 7
The Foundation
Build the hero section for your Treaty-Making Era research website
Welcome to Unit 12: Treaty-Making Era
This unit is different from the ones before it. You are not learning a new coding skill from scratch. You already know HTML, CSS, and the beginnings of JavaScript. What you are doing in this unit is using those skills to do something that matters: build a research website about one of the most important and least understood periods in American history.
From 1778 to 1871, the United States government negotiated more than 370 treaties with Tribal nations. These were legal agreements between sovereigns. They were written in English, often translated poorly or not at all, sometimes signed by people who did not have the authority to speak for their nation, and in many cases broken before the ink was dry. The treaties are still federal law. They still appear in courts today.
Over seven stages, you will build a full research website about this era. Each stage adds one new section. The code starts pre-loaded so you can focus on what matters: understanding the history, doing the research, and publishing your own voice on the web.
How These Stages Work
Each stage gives you a pre-built code foundation. Your job is to read the code, understand what it does, fill in the content with real research, and make the website yours. Look at the Live Preview as you work: every change you make appears there instantly.
Read First
Before you touch the code, spend 10 minutes with one of these resources. You are looking for one thing to hold: what did it mean for the United States to make a treaty with a Tribal nation? What was supposed to happen, and what actually happened?
▶ National Archives: American Indian Treaties (opens in new tab) ▶ Library of Congress: American Indian Law: A Beginner’s Guide (opens in new tab) ▶ Smithsonian NMAI: Nation to Nation: Treaties Between the United States and American Indian Nations (opens in new tab)What You Are Reading For
The hero section of your website needs a description: 2 to 3 sentences that introduce the Treaty-Making Era to someone who knows nothing about it. What happened? Why does it matter? After your reading, you will have what you need to write it.
Your Starter Code
Look at the code in your editor. It has two parts: a <style> block with all the CSS for the hero section, and a <body> with the full HTML structure. Your job is not to type this from scratch. Your job is to understand it and then replace the placeholder text with real content.
Here are the key CSS ideas at work in this starter code:
CSS Custom Properties (design system)
--bg-main: #0D1B2A;
--text-light: #E0E1DD;
--gold: #778DA9;
--rust: #415A77;
}
--bg-main: #0D1B2A: sets the darkest background, an ultra-dark blue-black. Named Ink Black, it carries the weight of documents, archives, and serious historical content without being harsh.--text-light: #E0E1DD: a pale, cool grey for text instead of pure white. Easier on the eyes over long reading, and it maintains a quiet, archival tone throughout the page.--gold: #778DA9: used for badges, accents, year headings, and highlights. A slate blue that signals structure and authority: calm and precise, the way legal documents feel.--rust: #415A77: a deeper steel blue used in the timeline section (coming in Stage 3). Slightly darker than--gold, it creates visual hierarchy between accent levels without leaving the palette.
Font pairing
- Playfair Display: a serif typeface used for the big headings. Serifs feel editorial and authoritative, like a published book or newspaper. This is intentional: you are publishing a research document.
- Inter: a clean sans-serif for body text, navigation, and UI elements. It is highly readable at small sizes.
CSS Grid for the hero split layout
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
}
grid-template-columns: 1fr 1fr: divides the hero into two equal columns. Left column holds the text content. Right column holds the image placeholder.gap: 72px: generous space between the two columns. This breathing room is an intentional UX design choice: tighter spacing feels busy, wider spacing feels considered and calm.
Fill In Your Content
Find each <!-- REPLACE: ... --> comment in the editor. Replace it with real content. Here is what each one needs:
- Era description paragraph: Write 2 to 3 sentences in your own words introducing the Treaty-Making Era. Use what you read. Who was involved? What happened? Why does it matter?
- Research resource links: The three links are already there. You can keep them or replace them with other sources you found useful.
- Nav links: The navigation items link to sections below. They will work once you add those sections in later stages. Leave them as-is for now.
Writing your description
Do not try to summarize everything. Pick one idea that felt important when you were reading and write about that. Strong writing is specific. "The U.S. made more than 370 treaties with Tribal nations and broke most of them" is a better sentence than "there were many treaties and it was complicated."
Why These Design Choices
This website uses a dark color palette instead of the light backgrounds from earlier units. That is a deliberate design decision. Dark backgrounds feel serious and measured. They ask the reader to slow down. For a subject as weighty as federal Indian policy, that is the right tone.
The gold accent color is used sparingly: only for the era badge, the divider line under each section heading, and hover states on links. When a color only appears in a few places, it carries more visual weight when it does appear. That is a fundamental principle of visual hierarchy in UX design.
The split hero layout puts the text on the left and an image on the right. Most people in Western cultures read left to right, so they encounter the text first. The image on the right reinforces what they have just read rather than competing with it. This is Z-pattern composition: a classic UX principle for landing pages.
Stage 1 Complete!
Your hero section is in place. In Stage 2 you will add the Key Cases section: your first CSS 3D flip cards. The flip card technique will be new, but the CSS arrives pre-built. Your job is to fill in the Marshall Trilogy cases: Johnson v. McIntosh, Cherokee Nation v. Georgia, and Worcester v. Georgia.
© 2026 Relentless Feather. All rights reserved.