Skip to main content

UNIT 8

Beads & Code

Beadwork is a visual language. Every pattern holds meaning. Learn CSS techniques that let you design with precision - then build a digital beadwork page inspired by Tribal artists.

⏱️ 7 Stages
🌿 Intermediate
🎯 45–60 min per stage
🔷 CSS Grid + Custom Properties

The Big Idea

Traditional beadwork isn't decoration. It's communication. A diamond can represent the four directions. A morning star carries hope. A chevron marks seasons or ceremony. Beaders plan every pattern before placing a single bead - and that kind of intentional thinking is exactly what great web design requires.

This unit introduces CSS custom properties - variables that let you define a color or value once and use it everywhere on your page. Change one line and the whole design shifts. You'll also go deeper with CSS Grid, using it to build an actual bead grid where each cell is one pixel in your pattern.

You'll research the beadwork traditions of the Ojibwe/Anishinaabe, Dakota, and Lakota peoples. Then you'll design your own original pattern and write an artist statement explaining what it means.

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

  • Create CSS custom properties to control your whole design from one place
  • Build a pixel-style bead grid using CSS Grid
  • Use border-radius to shape elements and create visual patterns
  • Research three Tribal beadwork traditions and present them clearly
  • Design an original pattern and write an artist statement about its meaning

What You'll Build

A digital beadwork page with five sections - research, tradition profiles, your original pattern, and an artist statement.

Your bead grid is built with CSS. Every color choice reflects what you've learned about what patterns mean. Every section shows a different tradition.

The last stage adds a sticky nav so the whole page feels like a real cultural publication.

Hero & Research Your page, your intro
Ojibwe & Anishinaabe MN / ND beadwork
Dakota MN / SD beadwork
Lakota ND / SD beadwork

Seven websites built. This one gets deep.

Your learning path

The 7 Stages

STAGE 1 Hero and Research Design system + hero STAGE 2 Ojibwe & Anishinaabe Beadwork First bead grid STAGE 3 Dakota Beadwork Grid + color patterns STAGE 4 Lakota Beadwork Third nation's artform STAGE 5 My Design Build your own pattern STAGE 6 Polish Custom properties + color STAGE 7 Navigation Bar Sticky nav + anchor links STAGE 8 · CAPSTONE Make It Yours Design your own beadwork, then the quiz
Let's Begin

← Back to All Units

Sources

The beadwork history and cultural content in this unit draws from museum resources, Native-led media, and Tribal cultural organizations. These sources represent Ojibwe and Anishinaabe communities of Minnesota and North Dakota, Dakota communities of Minnesota and South Dakota, and Lakota communities of North Dakota and South Dakota. Students are encouraged to explore these sources directly as they research and write the hero section of their project.

Smithsonian National Museum of the American Indian (NMAI)

Native-Led Media & Tribal Nation Sources

State & Regional Cultural Resources

Educational Standards

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

  • OSEU.SS.C.1, Visual Arts as Cultural Expression and Identity (All Grades): Students will understand that the visual arts of Tribal nations - including beadwork, quillwork, and geometric design - carry cultural meaning, identity, and relationship encoded in color, pattern, and form. (Beadwork is not decorative. The geometric patterns of Ojibwe, Dakota, and Lakota beadwork carry specific meanings tied to the nation, family, and individual who made them. Students learn the specific cultural contexts - floral traditions, geometric traditions, color symbolism - before translating those patterns into CSS Grid. The unit explicitly instructs students not to replicate patterns that are sacred or ceremonially restricted.)
  • OSEU.ELA.W.1, Cultural Attribution and Public Explanation (All Grades): Students will produce written explanations of cultural content appropriate to a public audience, including accurate attribution of the Tribal nation whose tradition they are representing. (Each beadwork-inspired design students create requires a written caption: which nation's beadwork tradition does this draw from, what is the cultural significance of the pattern or color choices, and what protocol applies to replication. Students are writing as cultural explainers for a general audience, which requires both accuracy and appropriate humility about the limits of their knowledge.)
  • CSTA 2-AP-12 (Grades 6-8): Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals. (Students build a bead grid using CSS Grid and apply pattern logic through the systematic assignment of color classes, row by row, bead by bead, mirroring the iterative, structured thinking that underlies algorithmic design.)
  • CSTA 2-AP-16 (Grades 6-8): Incorporate existing code, media, and libraries into original programs and give attribution. (Students build on the established structural pattern from earlier units, incorporate CSS custom properties as a reusable system, and cite all cultural and academic sources they draw from for the hero section and artist statement.)
  • ISTE 6c, Creative Communicator: Students communicate complex ideas clearly and effectively by creating or using a variety of digital objects. (Students translate research on traditional Indigenous art into a structured digital page featuring coded geometric patterns, written analysis, and a navigable single-page layout, using code as a medium of creative and cultural expression.)
  • ISTE 3b, Knowledge Constructor: Students evaluate the accuracy, perspective, credibility, and relevance of information and resources. (Stage 1 requires students to read the NMAI "A Life in Beads" resource and synthesize what they learn into their own words as HTML paragraph text, practicing research-to-writing skills with a high-tier primary source.)
  • MN Visual Arts 6.8.2.1.1 (Grade 6): Analyze how the elements of art and principles of design communicate meaning in artworks. (Students study how beaders use color, repetition, symmetry, and geometry to carry cultural meaning. Then they make deliberate choices in their own digital pattern, each color selected to express something about the tradition they studied or their own identity.)
  • 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. (Ojibwe and Anishinaabe beadwork from Minnesota is presented as a living tradition, not a historical artifact. Dakota beadwork, rooted in the land and waterways of what is now Minnesota, is contextualized within the broader story of Dakota presence and displacement.)
  • MN Media Arts 6.8.2.3.1 (Grade 6): Create media artworks using digital and/or technical tools that communicate ideas and demonstrate craftsmanship. (The bead grid is a precise technical artifact: each div placed intentionally, each color class chosen to contribute to a larger pattern. The unit explicitly connects the discipline of coding to the discipline of beadwork, both require planning, repetition, and care.)
  • MN CS K-12 6.1.1 (Grade 6): Decompose problems into smaller components through systematic analysis. (A full bead pattern is decomposed into rows, each row into individual bead color decisions, each decision expressed as a single class assignment. Students learn to think at multiple levels of abstraction simultaneously.)
  • 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 apply CSS Grid knowledge to a new and more abstract use case, a grid not for page layout but for pixel-level pattern construction. Custom properties are introduced as a professional CSS technique, extending students' technical vocabulary.)
  • ND Visual Arts, Creating (Grades 6-8): Generate and conceptualize artistic ideas and work. (Students plan their own original bead pattern before coding it, mirroring the planning process traditional beaders use. The artist statement in Stage 5 asks students to articulate their intentions, connecting the visual result to the ideas behind it.)
  • ND Indigenous Studies, Cultural Practices and Expressions (All Grades): Understand and appreciate the cultural traditions, practices, and art forms of Indigenous peoples of North Dakota. (Ojibwe and Anishinaabe communities from the Turtle Mountains and other ND regions are represented in Stage 2. Lakota beadwork from Standing Rock and other ND nations is represented in Stage 4. The unit situates these as living, present-day traditions.)
  • 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 final project is a complete, navigable page that both demonstrates technical skill and places the student's own creative work in direct conversation with the traditions they studied, a form of cultural acknowledgment through code.)
  • OSEU Standard 5.1 (All Grades): Describe the significance of visual arts, music, and oral traditions as expressions of Oceti Sakowin culture, identity, and worldview. (Lakota and Dakota beadwork is one of the most recognized visual art forms of the Oceti Sakowin. This unit studies pattern meanings, the diamond for the four directions, the morning star for hope and guidance, and asks students to engage with those meanings before building their digital patterns.)
  • OSEU Standard 5.2 (All Grades): Analyze how traditional arts and contemporary expressions of Indigenous creativity reflect continuity and change in Tribal communities. (Stage 4 and Stage 5 together frame this directly: students study a traditional Lakota geometric style, then create their own original pattern in Stage 5, participating in an act of creative continuity.)
  • SD Visual Arts 6-8.Cr2.1 (Grades 6-8): Demonstrate selected organizational principles and elements of art in original works of art. (Students apply symmetry, color contrast, and geometric repetition in their bead patterns. The artist statement in Stage 5 asks them to name the principles they used and explain why, demonstrating intentional visual decision-making.)
  • 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 bead grid is built incrementally: one section at a time, one row at a time, one bead at a time. This staged construction models the decomposition approach that scales to any complex software project.)