Skip to main content

UNIT 10

Dancing in Step

At a powwow, every piece of regalia carries meaning. Every dance style has a story. Build an interactive showcase of six dance traditions - with hover effects, click-to-open cards, and more JavaScript.

⏱️ 7 Stages
🪶 Intermediate
🎯 45–60 min per stage
⚡ Hover + Click + Modal

The Big Idea

Powwow is one of the most visible expressions of Native culture - and one of the most misunderstood. The jingles on a jingle dress are cut and rolled by hand. The fringe on a grass dancer's outfit moves like the prairie it honors. The roach headdress a Traditional dancer wears carries their identity. This unit treats that knowledge with the care it deserves.

On the coding side, you'll go further with JavaScript. In Unit 9 you made a form respond. This unit, you'll work with data objects and click events to build a modal - a popup card that opens when you click a dancer. Each dancer's story lives in a JavaScript object. Your code reads from it and displays it.

You'll also use CSS hover effects with image overlays and media queries to make your layout work on different screen sizes. By the end, this is the most complex site you've built.

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

  • Build a CSS Grid card layout where each card has a hover image overlay
  • Create a click-to-open modal using JavaScript
  • Store and read data from a JavaScript object
  • Use querySelectorAll and forEach to work with multiple elements at once
  • Add media queries so your design adjusts to different screen sizes

What You'll Build

An interactive powwow regalia showcase with four sections.

A hero introducing powwow as a living tradition. A grid of six dancer cards - each one with a hover effect that reveals more. Click a card and a modal opens with the full story. A footer with sources.

This is your most complex site yet.

Hero Powwow life intro
Dancer Grid Six cards, CSS Grid
Hover Overlay CSS transitions + scale
Click Modal JavaScript open/close

Nine websites. One more and you'll have built an entire curriculum's worth.

Your learning path

The 7 Stages

STAGE 1 The Foundation Design system + hero STAGE 2 The Dancer Grid CSS Grid card layout STAGE 3 The Dancer Images Images + object-fit STAGE 4 Hover Effects ::before overlay hover STAGE 5 Modal HTML & CSS Modal structure + styles STAGE 6 JavaScript JS data objects + forEach STAGE 7 Responsive Design Media queries + footer
Let's Begin

← Back to All Units

Sources

The powwow and regalia content in this unit draws from Tribal nation resources, the Smithsonian National Museum of the American Indian, and Native-authored scholarship. The dance descriptions in the modal popouts draw directly from Tara Browner's Heartbeat of the People: Music and Dance of the Northern Powwow (University of Illinois Press, 2002), the most thorough academic treatment of Northern powwow dance styles and regalia available. Powwow is a living tradition, and every dance style described here reflects practices that are actively carried forward by Lakota, Dakota, and Ojibwe communities today.

Tribal Nation & Indigenous-Led Sources

Museums & Cultural Institutions

Native Authorship & Scholarship

Educational Standards

This unit aligns with computer science, social studies, and Indigenous cultural standards across MN, ND, and SD. Click a panel to expand.

  • OSEU.SS.C.1, Dance Traditions as Living Cultural Practice (All Grades): Students will understand that powwow dance traditions are living expressions of specific cultural identities - not generic performance - and that each dance style carries distinct protocols, origins, and meanings tied to the nation or nations that developed it. (Students learn the origin and cultural context of each dance style before they build its modal card: Men's Traditional rooted in warrior societies, the healing origin of the Jingle Dress, the prairie wind movement of the Grass Dance. The unit explicitly distinguishes between Lakota, Dakota, and Ojibwe/Anishinaabe dance traditions rather than presenting powwow dance as a single category. Each modal card must accurately attribute the nation whose tradition it represents.)
  • OSEU.ELA.W.1, Oral Tradition as Narrative in Digital Form (All Grades): Students will understand that oral traditions - including dance, song, and ceremony - carry narrative, historical knowledge, and cultural identity, and produce writing that honors that function for a public audience. (The modal captions students write for each dance style are not descriptions of costume. They are introductions to a story: what this dance carries, where it comes from, what it means to the person dancing it. Students write as cultural interpreters for a general audience, engaging with the oral tradition behind the dance rather than just its visual appearance, and presenting it with accuracy and respect.)
  • CSTA 2-AP-12 (Grades 6-8): Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals. (The modal system in Stage 6 introduces a pattern where JavaScript must identify which card was clicked, read a data attribute from that card, and use that value to determine which modal content to display. This is the curriculum's first example of JavaScript making a decision based on data stored in the HTML, moving beyond simple show/hide into conditional behavior.)
  • CSTA 2-AP-16 (Grades 6-8): Incorporate existing code, media, and libraries into original programs. (Students reference external image files stored in the assets folder and wire them into the page using relative file paths. Managing the relationship between files, HTML, CSS, and image assets, mirrors professional web development practice and reinforces the file system concepts introduced in Unit 07.)
  • ISTE 1c, Empowered Learner: Students use technology to demonstrate their learning in a variety of ways. (The student's final page is a culturally grounded interactive reference, not a worksheet or quiz, but a functional web artifact that presents Indigenous knowledge in a respectful, designed format students can share with their community.)
  • ISTE 7a, Global Collaborator: Students use collaborative technologies to work with others to examine issues from multiple viewpoints. (The unit frames each dance style through the specific nation it comes from, Jingle Dress as Ojibwe, Grass Dance as shared across Lakota, Dakota, and Ojibwe, helping students understand that powwow is not a single homogeneous tradition but a gathering of distinct peoples and practices.)
  • MN Social Studies 7.4.9.6 (Grade 7): Describe the cultural contributions of groups from Minnesota's past and explain how diverse cultural perspectives contribute to the state's cultural heritage. (Powwow is one of the most significant living cultural institutions among Minnesota's Ojibwe and Dakota nations. The unit presents powwow not as a historical practice but as an ongoing tradition, students learn that powwow grounds across Minnesota are active gathering places where these dance traditions are practiced and passed forward every year.)
  • MN Arts B.5.1.1.1 (Grade 5-8): Analyze how the context of a work of art influences its meaning. (Regalia is a form of wearable art where every element carries meaning: materials chosen for their connection to the land, colors chosen for family or clan identity, adornments earned through ceremony or achievement. Students learn to read regalia as a visual language before building the page that presents it.)
  • MN CS K-12 6.2.1 (Grade 6): Use a development process to plan, design, and iteratively develop computational artifacts. (The unit is structured so students build the visual layout first, then layer hover effects on top, then add the JavaScript modal system. Each stage produces a working version of the page that gets more interactive with each step, a direct application of iterative development.)
  • MN ELA 8.3.3.1 (Grade 8): Use technology to produce and publish writing. (The hero section asks students to write a paragraph about powwow in their own words based on the sources provided. Students are writing for an audience, the page is designed to be shared, which frames the writing as publication rather than assignment.)
  • ND Indigenous Studies, Culture and Traditions (All Grades): Understand the cultural practices, arts, and traditions of Indigenous nations in North Dakota. (The unit covers dance traditions shared by or significant to Lakota and Dakota nations, both of which have major presences in North Dakota through Standing Rock, Spirit Lake, Sisseton-Wahpeton, and other nations. Grass Dance in particular has deep roots in plains nations' ceremonial life and is practiced widely across ND Tribal communities.)
  • ND CS 6.E.1 / 7.E.1 / 8.E.1 (Grades 6-8): Create artifacts by applying existing knowledge of computing concepts and practices. (Students bring together CSS Grid from Unit 04, image handling from Unit 06, CSS transitions from Unit 09, and JavaScript show/hide from Unit 09 to build a page more complex than any previous unit. The artifact is genuinely interactive, it responds to user actions in ways that feel like a real web application, not a static page.)
  • ND Arts 6-8.Cr1.1: Demonstrate artistic choices in the creation of visual artwork. (The page students build involves meaningful visual design decisions: card proportions, overlay color and opacity, modal layout. Students are not filling in a template but making choices about how the regalia and dance information is presented visually, which directly reflects the aesthetic and cultural weight of the subject.)
  • ND CS 9-12.E.3 (Grades 9-12): Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal need. (The finished page functions as a cultural education resource that could be used by community members, educators, or students unfamiliar with powwow traditions. Students understand they are building something with real utility, not an exercise.)
  • OSEU Standard 2, Culture (All Grades): Understand the cultural practices, traditions, and values of the Oceti Sakowin and other Indigenous peoples of South Dakota. (The Lakota and Dakota dance traditions in this unit are living expressions of Oceti Sakowin culture. The unit presents them as current, living practices, not history. Students learn the names, materials, and meanings of regalia as knowledge that belongs to specific peoples, not as generic "Native American" content.)
  • OSEU Standard 4, Oral Traditions and Literature (All Grades): Recognize the importance of oral traditions, literature, and artistic expression to Indigenous cultures. (Dance is one of the oldest forms of storytelling and oral tradition in Lakota and Dakota culture. The unit explicitly connects each dance style to the story it carries, the warrior's journey in Men's Traditional, the healing origin of the Jingle Dress, so students understand the dances as living narratives, not performance.)
  • SD CS 6-8.AP.M.1 (Grades 6-8): Decompose problems and subproblems into parts to facilitate the design, implementation, and review of increasingly complex programs. (The JavaScript modal system is introduced in parts: first the HTML structure of the modal, then the CSS that hides and shows it, then the JavaScript that connects cards to modal content using data attributes. Students build each layer before connecting them, making the complexity approachable.)
  • SD CS 6-8.IC.Si.1 (Grades 6-8): Describe the impact of computing on society and culture. (The unit asks students to consider what it means to present Indigenous cultural knowledge on a website, who the audience is, what context is needed, how design choices affect whether the page feels respectful or reductive. This reflection connects technical decisions to cultural responsibility.)