The Foundation

STEP 1

Welcome to Unit 16: Indian Reorganization Era

You have built four era research websites. Unit 11 covered treaty-making. Unit 12 covered removal. Unit 13 covered the Reservation System. Unit 14 covered allotment and assimilation. This is Unit 16, and it covers what the federal government tried next: a course correction that changed the law but could not undo the damage already done.

In 1934, Congress passed the Indian Reorganization Act. The IRA ended the allotment policy that had stripped Tribes of 90 million acres since 1887. It allowed for the restoration of some surplus lands to Tribal ownership. It encouraged Tribes to adopt written constitutions and establish Tribal governments. On paper, it was the most significant federal policy reversal since allotment began. In practice, its limits were just as significant as its reach.

Land already lost stayed lost. The IRA could stop new allotments, but it could not restore fee-patented land that had passed out of Tribal hands through taxation, foreclosure, or sale. Checkerboard ownership, where Tribal trust land, individual allotments, and non-Native-owned parcels sit side by side across a reservation, became a permanent feature of many Tribal land bases during this era. The constitutional process the IRA encouraged was largely built around western governance models, with boilerplate language designed in Washington rather than from within each Tribe's own governing traditions. And the era ended not through reform but through termination, as pressure from outside and above moved federal policy in the opposite direction starting in 1953.

Over seven stages, you will build a research website documenting this era. The new CSS and JavaScript skill in this unit is the comparison slider: a draggable interface that allows readers to compare two panels of content side by side, controlled by a handle they can click and drag.

STEP 2

Read First

Before you touch the code, spend 10 minutes with one of these resources. You are looking for one specific, verifiable fact about the Indian Reorganization Era: something you can use as the anchor sentence in your hero description.

▶ National Archives: Indian Reorganization Act (1934) (opens in new tab) ▶ Smithsonian National Museum of the American Indian (opens in new tab) ▶ Indian Land Tenure Foundation (opens in new tab)

STEP 3

Your Starter Code

The starter code uses the same design system as Units 11, 12, 13, and 14. This is the fifth consecutive unit using this palette. The variable names, the font pairing, and the layout logic are already part of how you think about the page. That is exactly the point. In professional development, you rarely build a design system from scratch. You work inside one that was there before you arrived, and you maintain it across projects and time. You are doing the same thing here.

Here are the CSS ideas at work:

The shared design system (Units 11–15)

• --bg-main: #0D1B2A: Ink Black. Page background. The deepest layer of the palette. Every section and card sits above it, creating depth through layered backgrounds rather than drop shadows.
• --text-light: #E0E1DD: Alabaster Grey. Slightly off-white. Pure white on dark backgrounds causes harsh contrast. Toned down one step, it reads as more authoritative and is easier to sustain over long reading.
• --gold: #778DA9: Lavender Grey. Badges, dividers, borders, hover states. Structural but not loud. It marks the architecture of the page without competing with the content.
• --rust: #415A77: Dusk Blue. One step darker than --gold. Used for section background alternation and card layers where you need another level of depth without going back to pure black.

Font pairing (same as Units 11–14)

• Playfair Display: The serif used only for h1 headlines. Serifs carry editorial weight. Using one at display scale places this era in the tradition of the published historical record.
• Inter: Clean sans-serif for everything else: nav, body text, labels, card content. The contrast between a heavy serif display and an efficient sans-serif body is the typographic signature of this design system.

Hero two-column grid

• grid-template-columns: 1fr 1fr: Two equal columns. Left: era badge, title, description, CTAs. Right: image area. Equal columns give neither side visual dominance.
• gap: 72px: Wide column spacing signals deliberate design. For a research site about a serious historical era, tight spacing would feel rushed. 72 pixels of air between columns reads as purposeful.
• align-items: center: Vertically centers the left column text alongside the right column image. Without this, short left content would sit at the top while the image floated in the middle, disconnected.

STEP 4

Fill In Your Content

Find the <!-- REPLACE: ... --> comments in the editor. Two places to fill in:

• Era description paragraph: Write 2 to 3 sentences in your own words about the Indian Reorganization Era. What did the IRA do? What did it fail to restore? What did Tribes inherit entering this era? Use a specific fact as your first sentence.
• Research resource links: Three starter links are in the code. Keep them or swap in sources you found more useful during your reading. If your own Tribal nation has an official website, add it here.

STEP 5

Why These Choices Matter

You are building your fifth consecutive website in this design system. That repetition is deliberate. In Units 11 through 14, you learned the system piece by piece. In Unit 16, you are deploying it. The CSS is familiar, the layout is familiar, and the only thing that is new is the content. That shift, from learning a tool to using a tool, is what advanced work feels like.

The nav links in your hero point to sections that do not exist yet: #the-policy, #the-land, #the-constitutions, #the-nations, #my-research, #today. Each stage adds one. By Stage 7, every link scrolls to real content about the Indian Reorganization Era.