UNIT 18 • STAGE 1 OF 7

The Foundation

Set up the design system, build the hero section, and add your navigation and section stubs

UNIT
STEP 1

Unit 18: The Self-Determination Era

Unit 18 documents the Self-Determination Era of federal Indian policy, from 1968 to 1994. You are building the seventh research site in the Federal Indian Policy Series. The design system, the structure, and the approach are the same as Units 11 through 16. The history is new, and it is the most legally active era in the series: more laws protecting Tribal sovereignty were passed in these twenty-six years than in any period since the treaty era.

The Termination Era ended not with a single law but with a shift in political conditions. The federal policy that followed moved in the opposite direction: from ending Tribal sovereignty to legislating its protection. The Indian Self-Determination and Education Assistance Act of 1975 gave Tribes the authority to administer their own federal programs. The laws that followed addressed Tribal children, Tribal religion, Tribal gaming, and Tribal cultural heritage. The courts shaped the era alongside Congress.

The thesis for this site

The thesis you are building toward across all seven stages: "After a century of policies designed to take land, break up families, and end Tribal sovereignty, Congress spent twenty-six years passing laws to protect what remained. The courts spent those same years defining what sovereignty meant in practice." This is the record you are documenting.

New JavaScript pattern in this unit: filterable cards

Stage 3 introduces filter state management. You will build a legislation grid where clicking a decade button shows only the laws from that decade and hides the rest. The technique uses data attributes, a forEach loop, and style.display toggling. Stages 1 and 2 are HTML and CSS only.

STEP 2

The Design System

Unit 18 uses the same Prussian blue archival palette as Units 11 through 16. The CSS custom property names and values are unchanged. This is the seventh site in the series, and it shares the same visual language as the other six.

// Same palette as Units 11–16. No changes. :root {
  --bg-main:     #0D1B2A;  /* Ink Black */
  --bg-section:  #1B263B;  /* Prussian Blue */
  --bg-card:    #0D1B2A;  /* Same as bg-main */
  --text-light:  #E0E1DD;  /* Alabaster, primary text */
  --text-dim:   #778DA9;  /* Lavender Grey, secondary */
  --text-muted:  #506070;  /* Labels, captions */
  --gold:       #778DA9;  /* Accent */
  --gold-light:  #A8BDD0;  /* Hover accent */
  --gold-dim:   rgba(65,90,119,0.14);
  --gold-border:rgba(119,141,169,0.22);
  --rust:       #415A77;
}
STEP 3

Build the Hero Section

The hero follows the same structure as Units 11 through 16: two-column grid, era badge, large Playfair Display title, thesis description with a bolded closing line, resource links, and two CTA buttons.

  • Era badge: "1968 – 1994"
  • Title: "Self-Determination"
  • Thesis closing line: "Twenty-six years of legislation. The nations shaped what came next."
  • Resource links: National Archives, Native American Rights Fund (narf.org), National Congress of American Indians (ncai.org)
  • CTA buttons: "Explore the Record" (primary, links to #the-shift) and "The Laws" (secondary, links to #the-laws)

Indian Civil Rights Act (1968)

The Indian Civil Rights Act was signed into law on April 11, 1968. It was the first federal law to apply most Bill of Rights protections to Tribal governments: freedom of speech, freedom of the press, the right to a speedy trial, protection from unreasonable search and seizure. It also required Tribal governments to provide counsel in criminal cases. The law was controversial because it imposed external constitutional standards on sovereign governments. But it marked a significant shift: the same Congress that had passed HCR 108 fifteen years earlier was now passing laws that treated Tribal governments as governments that had civil rights obligations, not as entities to be dissolved.

STEP 4

Add the Nav and Section Stubs

Add the fixed nav with the six section anchor links and build empty <div> stubs for all six sections. You will fill each section in Stages 2 through 7.

Nav links: #the-shift, #the-laws, #the-nations, #the-courts, #my-research, #today

Stage 1 Complete!

The design system is set, the hero is built, and the nav and section stubs are in place. Stage 2 adds the Shift section: the Civil Rights movement as national context, Native activism as part of the climate that drove policy change, and the political conditions that produced ISDEAA.

Code Editor
Live Preview