Stage 3: Timeline | Unit 12

STEP 1

Read the Timeline in Your Preview

Your editor now has a Timeline section below the Key Cases section. Scroll down in the Live Preview and read through all eight pre-built events, from 1778 to 1871.

This is the shape of the Treaty-Making Era in order: the first treaty, the laws that defined federal authority, the court decisions that set limits on Tribal sovereignty, the removal that followed, and the moment when the United States stopped negotiating with Tribal nations as sovereign equals altogether.

What You Are Looking At

Each year block has a large year number on the left and event cards below. Each card has a colored left border that tells you what kind of event it was. Read the border colors to understand the type before you read the text.

STEP 2

The Four Event Types

Every timeline event has a color-coded left border. Here is what each color means:

type-law An act of Congress or federal statute. Laws that changed the rules.

type-case A court decision. The law interpreted, applied, or overturned.

type-event A historical event, treaty signing, or military action.

type-response A Tribal nation's action, resistance, or formal response.

In the HTML, the type is set as a class on the .timeline-event div. You will use these same class names when you add your own events in Step 3.

// The class goes on the outer div, like this: <div class="timeline-event type-law">

STEP 3

Add Your Two Research Events

Scroll to the bottom of the #timeline section in your editor. You will see a comment block that says STEP 3 with two empty year blocks ready for you to fill in.

Using your vetted sources from the hero section, research two events from the Treaty-Making Era (1778-1871) that are not already in the timeline. Write your findings in Google Docs first, then paste your descriptions here.

Ideas for Your Research Events

Here are some events you could research. Choose any two, or find your own:

1794: Battle of Fallen Timbers & Treaty of Greenville. After defeating a Native alliance in Ohio, the U.S. forced 12 Tribal nations to cede most of present-day Ohio and part of Indiana.

1830: The response of the Cherokee National Council. While Congress debated the Indian Removal Act, the Cherokee Nation passed its own laws asserting sovereignty and refusing to recognize Georgia's authority.

1831: Cherokee Nation v. Georgia. (The second Marshall Trilogy case, not yet in your timeline.)

1838: The Potawatomi Trail of Death. The forced removal of the Potawatomi Nation from Indiana to Kansas. About 850 people were marched 660 miles. More than 40 died, including many children.

1851: First Fort Laramie Treaty. The U.S. met with Sioux, Cheyenne, Arapaho, Crow, and other nations on the Northern Plains. The treaty defined Tribal territories and promised annual payments in exchange for safe passage of settlers.

1868: Second Fort Laramie Treaty. Ended Red Cloud's War. Guaranteed the Sioux Nation the Black Hills "forever." The treaty was violated six years later when gold was discovered.

How to Fill In the Blank Event Blocks

Each blank block has placeholder text in HTML comments that tells you what to replace. Change the year number, the event type class, the type pill text, the event name, and the description. Keep your description to 2-3 sentences.

STEP 4

Why This Layout Works

The large year number anchors every event in time without requiring a long caption. Your eye lands on the number first, establishing "when," then drops down to the events to understand "what happened." This is called a typographic anchor: using font size, weight, and color to create a visual hierarchy that guides reading order.

The rust color for the year number is the same rust used for the dot on the flip cards and the section divider. Repeating a color across elements ties them together and tells the reader they belong to the same design system. Consistency builds trust.

// Year number: large Playfair, rust, anchors the year block .year-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  color: var(--rust);
  font-weight: 900;
}

Notice clamp(3.5rem, 6vw, 5.5rem). You saw clamp() in Unit 12 Stage 1. It sets a minimum (3.5rem), a preferred (6vw, which scales with the viewport), and a maximum (5.5rem). The year number scales with the screen but never gets too small to read or too large to fit.

Stage 3 Complete!

Your timeline is live with eight pre-built events plus two from your own research. In Stage 4 you will add the U.S. Context section: a pre-written look at what was driving federal policy during this era, and one stat callout you will fill in yourself.

The Timeline