The Foundation

STEP 1

Welcome to Unit 14: Reservation System

You have now built two era research websites. Unit 11 covered treaty-making. Unit 12 covered removal. This is Unit 14, and it covers the era that came next: the Reservation System.

When removal failed to push Indigenous nations off the continent entirely, the federal government changed its approach. Instead of moving people, it would contain them. Reservations were defined, boundaries were drawn, and those boundaries were guaranteed by treaty. Then the guarantees were broken.

The Fort Laramie Treaty of 1868 is the central document of this era. It guaranteed the Black Hills and the entire Great Sioux Reservation to the Lakota Nation in perpetuity. That word means forever. It lasted nine years. When gold was discovered in the Black Hills in 1874, the United States government attempted to buy the land. When the Lakota refused to sell, Congress simply took it anyway. The Supreme Court ruled in 1980 that this was an unconstitutional seizure. The Sioux Nation refused the $100 million award. That legal claim remains open today.

Over seven stages, you will build a research website documenting this era. The new skill in this unit is the CSS pull quote: styled <blockquote> elements with large decorative quotation marks created entirely in CSS using the ::before pseudo-element. You will use it in Stage 4 to display documented statements from Tribal leaders who lived through this period.

STEP 2

Read First

Before you touch the code, spend 10 minutes with one of these resources. You are looking for one thing to hold onto: what was the Reservation System, why was it created, and which nations in your region were affected by it?

▶ National Archives: Fort Laramie Treaty of 1868 (opens in new tab) ▶ Native American Rights Fund: Trust Lands and Reservation History (opens in new tab) ▶ Standing Rock Sioux Tribe (opens in new tab)

STEP 3

Your Starter Code

The starter code in your editor uses the same design system as Units 11 and 12. Same palette. Same fonts. Same variable names. That is intentional: all seven era websites in this series share one visual language. A reader moving from your Removal Era site to your Reservation System site will immediately recognize they are part of the same project.

Here are the CSS ideas at work:

The shared design system (Units 11, 12, and 13)

• --bg-main: #0D1B2A: Ink Black. The deepest layer. Used for the page background, nav, and hero. When you look at a historical archive, documents sit on dark backgrounds. This palette makes the same argument: this is a serious document, not a promotional page.
• --text-light: #E0E1DD: Alabaster Grey. Off-white, not pure white. Pure white on a dark screen creates harsh contrast that causes eye strain over long reading. Slightly toned down reads as more authoritative and is easier on the eyes.
• --gold: #778DA9: Lavender Grey. Used for badges, dividers, hover states, and the era date badge. Reads as structured and restrained rather than bright or flashy.
• --rust: #415A77: Dusk Blue. A step darker than --gold. Used in section backgrounds and card backgrounds where you need another layer of the palette without going all the way back to black.

Font pairing (same as Units 11 and 12)

• Playfair Display: The serif used only for h1 headlines. Serifs have been the typeface of published authority since the printing press. Using one for your main title places this research website in that tradition.
• Inter: Clean, readable sans-serif for body text, labels, and navigation. The contrast between a dramatic serif headline and an efficient sans-serif body is the core typographic pairing of editorial design.

Hero two-column grid

• grid-template-columns: 1fr 1fr: Two equal columns. The left column holds the text content: the era badge, the title, the description, and the call-to-action buttons. The right column holds the image area. Equal columns give neither side visual dominance.
• gap: 72px: 72 pixels of space between the columns. Tight spacing between elements feels hurried. Wide spacing between elements feels deliberate. For historical research, deliberate is the right tone.
• align-items: center: Vertically centers the left column content alongside the right column image. Without this, the text would align to the top and the image would feel detached from it.

STEP 4

Fill In Your Content

Find the <!-- REPLACE: ... --> comments in the editor. There are two places to fill in:

• Era description paragraph: Write 2 to 3 sentences in your own words about the Reservation System era. What happened? Which nations in your region were affected? What was the difference between what was promised and what actually occurred?
• Research resource links: Three starter links are already in the code. Keep them or swap in sources you found more useful during your reading.

STEP 5

Why These Choices Matter

You are now building your third consecutive website in this design system. That is not repetition for its own sake. In professional web development, systems are extended and maintained, not rebuilt from zero every time. The skill you are practicing right now is exactly what it looks like to work inside an existing visual language: you know the variable names, you know where to plug in new content, and you can move fast because the foundation is already solid.

The nav links in your hero point to sections you have not built yet: #the-policy, #the-treaties, #the-voices, #the-nations, #my-research, #today. Each stage you complete adds one of those sections to the page. By Stage 7, every nav link will scroll to real content.

Notice that Unit 14 has six sections rather than five. That extra section is #today, added to Unit 12 in its final stage. Here it is built into the nav from the beginning, because it belongs in the architecture of every era site: history does not end. The nations are still here. Their reservations are living sovereign homelands, not historical artifacts.