Hero and Research

Welcome to Unit 8: Beads & Code

Every bead in a traditional beaded piece is placed by hand. A beader plans their pattern before they begin, mapping the colors, counting the rows, deciding what the finished piece will say. Then they work bead by bead until the pattern comes together.

That is exactly how you will build this project. You will use CSS Grid to create a digital bead grid, where each small cell in the grid represents one bead. You will assign color classes to each cell to build geometric patterns. One bead at a time, row by row, the pattern takes shape.

Along the way, you will study Ojibwe and Anishinaabe beadwork from Minnesota and North Dakota, Dakota beadwork from Minnesota and South Dakota, and Lakota beadwork from North Dakota and South Dakota. Then you will design your own original pattern and write an artist statement about it.

Read First

Before you write a single line of code, take time to read this resource from the Smithsonian National Museum of the American Indian. It tells the story of how beadwork developed, what the patterns mean, and how the tradition has been carried forward by Indigenous artists. You will use what you learn to write the research paragraphs in your hero section.

The page has a downloadable PDF if you prefer to read it that way. Take notes on anything that stands out to you: how old the tradition is, where glass beads came from, what certain patterns represent, or what the work means to the artists who make it.

Build the Page Structure

Type the code below to start your project. This builds the basic page structure with a hero section styled in deep navy blue. You will fill in your own research text in Step 5.

Why These Styles?

Let's walk through the CSS choices and why each one was made.

• * { box-sizing: border-box; margin: 0; padding: 0; }, The * selector targets every element on the page. Setting box-sizing: border-box means padding is counted inside an element's width rather than added on top, which makes layouts more predictable. Setting margin: 0 and padding: 0 removes the browser's default spacing so we start from a clean, consistent base.
• font-family: Georgia, serif on body, Georgia is a serif typeface that reads well on screens. It feels considered and traditional without being stiff, which matches the cultural weight of the subject.
• background: #faf7f2 on body, A warm off-white, like aged paper or birchbark. It is softer than pure white and gives the page warmth without competing with the section colors you will add in later stages.
• id="hero" on the section, Using an id instead of a class means this section can be targeted both by CSS (#hero) and by anchor links (href="#hero"). In Stage 7 you will add a nav bar where clicking "Home" scrolls back to this section.
• max-width: 700px on #hero p, Limits each paragraph to a comfortable reading width. On wide screens, very long lines of text are hard to follow. Capping the width at 700px keeps the text readable without centering it.
• color: rgba(255, 255, 255, 0.85) on #hero p, Pure white text on a dark background can feel harsh. Using 85% opacity white softens the contrast slightly, making it easier to read for longer passages.
• target="_blank" on the link, Opens the NMAI page in a new browser tab so your project page stays open. Any link to an external site should use target="_blank" so visitors do not lose their place.

Write Your Research

Now replace the placeholder paragraph text with your own words. You have read the NMAI resource, use what you learned to write two paragraphs about beadwork history and what this project means to you.

Some things you might include in your paragraphs:

• How old beadwork traditions are and what materials came before glass beads
• When and how glass trade beads arrived and how artists adapted them
• What certain patterns or colors represent
• Why you chose to build this project using code as a medium

Write in your own words. Do not copy text from the source. A good research paragraph shows you read and thought about something, not just that you found it.