Skip to main content

UNIT 21

Native Voices

Native American authors have been telling their nations' stories in print for over a century. Build an editorial-style showcase website celebrating six of them — with a featured author spotlight, a book gallery, pull quotes, and your first read-more JavaScript toggle.

⏱️ 7 Stages
🪶 Intermediate
🎯 45–60 min per stage
📖 Editorial Layout + JS Toggle

The Big Idea

When Louise Erdrich won the Pulitzer Prize in 2021 for The Night Watchman, she was the fourth Native American writer to win a major literary prize — following N. Scott Momaday (1969), Leslie Marmon Silko, and Sherman Alexie. That is not a small number of people. It is a literary tradition, and it is still growing.

In this unit you will build a website that presents that tradition the way a literary magazine would: a featured author gets the hero treatment, other authors get cards with short bios, and a pull-quote section lets their words lead. The design is editorial — wide columns, strong typography, deliberate use of whitespace.

On the JavaScript side, you will build a read-more toggle. Author bios are long. Instead of cutting them off or showing everything at once, you will write a small piece of JavaScript that shows a short preview first and lets the reader expand it with a click. You will change the button label when it opens and when it closes. That is a real pattern used on real websites.

By the end of this unit, you'll be able to say "I can..."

  • Build an editorial hero section with large display typography
  • Use CSS columns to flow text into a two-column layout
  • Design author cards with a clamped bio preview using CSS -webkit-line-clamp
  • Write a JavaScript toggle that expands and collapses content and updates button text
  • Build a book gallery using CSS Grid and aspect-ratio
  • Use Playfair Display alongside Fredoka for editorial contrast
Start Stage 1

What You'll Build

An editorial author showcase site with four sections.

A hero spotlighting one featured author with a large quote and intro. An author card grid with expandable bios powered by your read-more JavaScript. A book gallery arranged with CSS Grid. A pull-quotes section using CSS columns so the text flows like a magazine spread.

Featured Author Hero spotlight
Author Cards Grid + JS toggle
Book Gallery CSS Grid + aspect-ratio
Pull Quotes CSS columns layout

These writers turned their nations' histories, languages, and lived experiences into literature read around the world. Your site brings them together.

Your learning path

The 7 Stages

STAGE 1 The Foundation Design system + editorial hero STAGE 2 Featured Author Large spotlight card STAGE 3 Author Grid Card layout + bio preview STAGE 4 Read More Toggle Your first JS toggle STAGE 5 Book Gallery CSS Grid + aspect-ratio STAGE 6 Pull Quotes CSS columns layout STAGE 7 Today Native lit now + polish

Sources

The author profiles and biographical details in this unit draw from publisher records, author websites, and Native-led literary organizations. Pulitzer Prize and National Book Award records are drawn from official award databases. All quoted material is cited to its original published source.

Native-Led Literary Organizations

Author & Publisher Sources

Native Authorship & Scholarship

Educational Standards

  • CSTA 1B-AP-11: Decompose (break down) problems into smaller, manageable sub-problems to facilitate the program development process. (The read-more toggle in Stage 4 is a decomposition exercise: identify the problem, identify the parts — the button, the hidden content, the label — and solve each one.)
  • CSTA 1B-AP-12: Modify, remix, or incorporate portions of an existing program into one's own work, to develop something new or add more advanced features. (Students adapt the classList.toggle pattern from earlier units and apply it to a new context.)
  • ISTE 4c: Students communicate complex ideas clearly and effectively by creating or using a variety of digital objects. (The editorial layout introduces students to how visual hierarchy, typography, and whitespace communicate authority and invite reading.)
  • ISTE 6b: Students create original works or responsibly repurpose or remix digital resources into new creations. (Students design a site that presents real authors' work with attribution and care, modeling responsible digital curation.)
  • MN ELA 8.1.7.7: Engage effectively in a range of collaborative discussions. (Stage 7 asks students to reflect on why Native authorship matters and write their own statement — a short persuasive piece that can anchor a class discussion.)
  • MN ELA 8.2.4.1: Determine a theme or central idea of a text and analyze its development. (Students read short excerpts from the featured authors and identify themes of identity, land, and sovereignty that recur across the tradition.)
  • OSEU ELA.R.1 (All Grades): Students will read, understand, and interpret a variety of literary texts. (The author bios and quoted passages in this unit represent a range of Native literary voices across fiction, poetry, and memoir. Students encounter this writing as literature, not historical document.)