Unit 7 · Stage 6

Word Cards and Audio

Your colors page has a heading, a navigation bar, and an empty word grid waiting to be filled. In this stage you will add seven Ojibwe color word cards, each with the native word, its English meaning, a short usage note, and an audio player so learners can hear the pronunciation. Play in the editor, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. You already know how to write CSS rules inside a <style> block and how a class styles the elements that carry it. This stage adds one new HTML element: the <audio> tag, which plays a sound file right on the page.

1 The word card and the audio tag

Each word card shows four things: the Ojibwe term, the English meaning, a short usage note, and an audio player. The player comes from a built in HTML element, <audio>. When you give it the controls attribute, the browser draws a play and pause button, a progress bar, and a volume control. You point it to a sound file with a <source> tag, the same way the <img> tag points to a picture.

🔊 About the audio files. The src paths in this stage point to audio/word.mp3 files that do not exist yet, so the player shows up but will not play. In Stage 7 you will research real recordings from the Ojibwe People's Dictionary (ojibwe.lib.umn.edu) or First Voices (firstvoices.com), save them in an audio/ folder, and link the real files.

2 Add the word card styles

Find your <style> block and add these rules just before the closing </style> tag. They give each card a white background, rounded corners, and clean spacing, and they make the audio player fill the width of the card.

What this code means

.word-card: A white card with padding, a soft shadow, and a thin border, so each word sits on its own tidy panel inside the grid.
.word-native: Large, bold, dark navy text for the Ojibwe word itself, the most important thing on the card.
.word-english: Small uppercase gray text with letter spacing, a quiet label under the native word.
.word-note: Comfortable body text for the usage note, with room to breathe before the audio player.
.word-card audio: width: 100% stretches the player to the full card width so it looks the same in every browser.

✍️ Add the five rules inside your <style> block, before </style>. Use the example below, then press ▶ Run.

/* add these inside <style>, before </style> */
.word-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
}

.word-native {
  font-size: 1.375rem;
  font-weight: 700;
  color: #1a2744;
  margin-bottom: 4px;
}

.word-english {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.word-note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 16px;
}

.word-card audio {
  width: 100%;
  margin-top: 4px;
}

🤔 Quick check before you go on

What HTML tag lets a web page play a sound file? Type it, then press Submit to unlock the last step.

3 Add the seven word cards

Find the <div class="word-grid"> in your HTML. Delete the  comment and replace it with seven word cards. Every card uses the same shape: a native word, an English label, a usage note, and an audio player.

🪶 A note on the words. These come from the Ojibwe People's Dictionary (ojibwe.lib.umn.edu). Spelling and pronunciation vary across dialects. Verify them with your community, elders, or the dictionary before you publish.

How the audio tag works

<audio controls>: controls is a boolean attribute: just its presence tells the browser to draw the built in player. Without it, the audio element shows nothing.
<source src="..." type="audio/mpeg">: Points to the sound file and its format. audio/mpeg is the type for MP3 files; you can also use audio/ogg or audio/wav.
The same shape, seven times: Repeating one card structure keeps the grid even and makes the page easy to extend when you add more words later.

✍️ Replace the comment inside .word-grid with the seven cards. Use the example below, then press ▶ Run.

<!-- replace the comment inside .word-grid with these -->
<div class="word-card">
  <div class="word-native">ozhaawashkwaa</div>
  <div class="word-english">blue</div>
  <div class="word-note">Used for inanimate things like water and sky. Color words in Ojibwe describe a state of being, not a fixed quality.</div>
  <audio controls><source src="audio/ozhaawashkwaa.mp3" type="audio/mpeg"></audio>
</div>

<div class="word-card">
  <div class="word-native">miskwaa</div>
  <div class="word-english">red</div>
  <div class="word-note">Used for inanimate red things. The word miskwi means blood, sharing the same root. Red carries deep meaning in ceremony and healing.</div>
  <audio controls><source src="audio/miskwaa.mp3" type="audio/mpeg"></audio>
</div>

<div class="word-card">
  <div class="word-native">ozhaawaa</div>
  <div class="word-english">yellow</div>
  <div class="word-note">Can also refer to golden or amber tones. Used for inanimate things like leaves in autumn or a beeswax candle.</div>
  <audio controls><source src="audio/ozhaawaa.mp3" type="audio/mpeg"></audio>
</div>

<div class="word-card">
  <div class="word-native">makadewaa</div>
  <div class="word-english">black</div>
  <div class="word-note">Inanimate verb. Related to makade, meaning darkness or the color of charcoal. Used for the night sky, dark soil, and charred wood.</div>
  <audio controls><source src="audio/makadewaa.mp3" type="audio/mpeg"></audio>
</div>

<div class="word-card">
  <div class="word-native">waabishkaa</div>
  <div class="word-english">white</div>
  <div class="word-note">Inanimate verb. Used for snow, birch bark, and pale winter light. The animate form is waabishkizi, used for living beings.</div>
  <audio controls><source src="audio/waabishkaa.mp3" type="audio/mpeg"></audio>
</div>

<div class="word-card">
  <div class="word-native">ozaawaa</div>
  <div class="word-english">brown / orange</div>
  <div class="word-note">Covers warm earth tones from brown to orange-yellow. Used for things like clay earth, dried leaves, and tree bark.</div>
  <audio controls><source src="audio/ozaawaa.mp3" type="audio/mpeg"></audio>
</div>

<div class="word-card">
  <div class="word-native">ozhaawashkozi</div>
  <div class="word-english">green / blue (animate)</div>
  <div class="word-note">The animate form of ozhaawashkwaa, used for living beings. In Ojibwe, some languages do not separate green and blue into distinct categories.</div>
  <audio controls><source src="audio/ozhaawashkozi.mp3" type="audio/mpeg"></audio>
</div>

4 Make it your own

Experiment, then set it back the way you like it.

Change the .word-card background to a soft tint like #fafeff and see if the page feels more unified.
Add an eighth card for a color word in your own language, using the same card shape.
Look up two of these words on the Ojibwe People's Dictionary and compare the spelling and usage notes across dialects.

✓ Finish this stage

To complete Stage 6, your colors page needs the word card styles and seven .word-card divs, each with an audio player inside. Press Check my work when you are ready. This opens Stage 7 and lets your teacher see that you finished.

YOUR CODE

PREVIEW