UNIT 19 • STAGE 6 OF 7

My Research

Build the research prompts section and learn CSS counters, automatic numbering with no JavaScript

Home All Units Unit 19 ← Stage 5 Stage 7 →
UNIT
STEP 1

My Research: Connecting to the Present

Every prior era in this series ended decades ago. This one has not. The Nation Rebuilding Era is ongoing. The courts, legislation, and nation-building work documented in this unit are active and changing right now. The My Research section connects learners to that living record by prompting them to investigate their own nation's history in this era specifically.

Eight research prompts guide the inquiry, covering governance, economics, language, land, courts, education, federal policy response, and the student's own assessment of what sovereignty looks like for their nation today. Each prompt is numbered automatically using CSS counters, no JavaScript, no manually typed numbers.

Why this era is different to research

Sources for Units 11 through 17 were mostly historical: legislation passed, cases decided, policies implemented. For Unit 19, primary sources are often current: active Tribal court decisions, ongoing land acquisition programs, language revitalization efforts in progress. The research prompts push students toward Tribal government websites, NCAI resources, NARF case files, and the Harvard Project database, sources that reflect what is happening now, not just what happened.

STEP 2

New CSS Technique: CSS Counters

CSS counters let the browser automatically number elements, no JavaScript, no hard-coded numbers in the HTML. You declare a counter, increment it on each element, and output the value in a ::before or ::after pseudo-element. Change the order of prompts in the HTML and the numbers update automatically.

// Three properties build a counter, each has one job /* 1. counter-reset: declares the counter, sets it to 0 */
/* Place on the parent container */
.research-list {
  counter-reset: research-prompt;
}

/* 2. counter-increment: adds 1 each time this element is rendered */
.prompt-item {
  counter-increment: research-prompt;
}

/* 3. content: counter() outputs the value, only in ::before/::after */
.prompt-item::before {
  content: counter(research-prompt, decimal-leading-zero);
}
  • counter-reset: name creates a counter called name and sets it to 0. You can reset it to any starting value: counter-reset: name 4 starts at 4.
  • counter-increment: name adds 1 each time the browser renders an element with this rule. Default increment is 1; you can specify any number: counter-increment: name 2 counts by twos.
  • counter(name, style) inside content outputs the current value. decimal-leading-zero formats it as 01, 02, 03... Other styles: decimal (1, 2, 3), upper-roman (I, II, III), lower-alpha (a, b, c).
  • The content property only works in ::before and ::after pseudo-elements. It cannot be used on regular elements directly.
  • The counter is scoped to the parent that declared it. Multiple independent lists on the same page each get their own counter by using the same counter-reset on each parent.
// Positioning the counter number, absolute inside relative parent .prompt-item {
  position: relative;
  padding: 36px 36px 36px 88px; /* left gap for the counter */
}

.prompt-item::before {
  content: counter(research-prompt, decimal-leading-zero);
  position: absolute;
  left: 32px;
  top: 32px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  opacity: 0.35;
}
STEP 3

The Eight Research Prompts

Each prompt targets a specific dimension of Nation Rebuilding Era activity. The prompts move from governance (most structural) through to the student's own synthesis (most interpretive). Students replace the guidance text with their actual research findings when building their final site.

Prompt 01, Governance

What is the current governance structure of your nation? Has there been a constitutional reform or major governance restructuring since 1994? If so, what changed and what drove the change?

Prompt 02, Economic Development

What economic development is your nation currently pursuing? Is gaming part of the picture? What else? Who employs the most people connected to your nation's economy?

Prompt 03, Language

What language revitalization efforts exist in your community? What is the current status of your language, thriving, endangered, critically endangered? What programs exist and what progress has been made?

Prompt 04, Courts and Jurisdiction

Has your nation been involved in significant litigation since 1995? What legal questions were at stake? What was the outcome and what did it mean for your nation's jurisdiction or rights?

Prompt 05, Land

What land recovery efforts has your nation undertaken in the Nation Rebuilding Era? How does the Indian Land Buy-Back Program affect your nation's land base? How does your nation's current land base compare to what was held in 1934 after the IRA era?

Prompt 06, Education

What Tribal college, university, or K-12 institutions serve your community? Are there language immersion schools? How does your nation approach education as an exercise of sovereignty?

Prompt 07, Responding to Federal Policy

What recent federal policy changes have most directly affected your nation, in the last five years? How has your nation's leadership responded? What is your nation currently advocating for at the federal level?

Prompt 08, Sovereignty in Practice

Based on your research, what would you point to as the clearest example of your nation exercising sovereignty in the Nation Rebuilding Era? What makes it a genuine act of self-governance rather than an act administered by or through the federal government?

STEP 4

Build the My Research Section

The section background is --bg-section, alternating from The Nations' --bg-main. The research list uses counter-reset: research-prompt on the <ol>, counter-increment: research-prompt on each .prompt-item, and content: counter(research-prompt, decimal-leading-zero) in .prompt-item::before. The list itself uses list-style: none, the CSS counter replaces the default browser numbering.

Stage 6 Complete! One stage left.

Stage 7 finishes the site with the Today section, a scroll-driven animation pre-built feature, the era series closing statement, and the Unit 19 teaser: all eight era websites assembled into one multi-page site. The complete Unit 19 site will be a working single-page document covering the full Nation Rebuilding Era.

Code Editor
Live Preview
Relentless Feather © 2026 Relentless Feather. All rights reserved.