Unit 7 · Stage 7

Make It Your Own

Across six stages you built a complete vocabulary page: a page intro, a word grid, and seven word cards with audio players. This final stage is where you make the site your own. You will build the other three pages, research words from a language that matters to you, connect real audio, and add one concrete thing to this page right now: a note that credits your sources. 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. Your colors.html page is finished: header, navigation, a word grid, and seven word cards with audio. In this last stage you add one small, respectful touch in code, a .sources credit line, and think about what it means to publish a language on the web.

1 One page done. Now build the other three.

Your colors.html page is complete: a page intro, a word grid, and seven word cards with audio players. The three remaining vocabulary pages use exactly the same structure. You build animals.html, food.html, and common-items.html by duplicating this page and changing the content for each category. The editor here shows your finished colors.html as the template.

How to duplicate the template

Copy the whole page: Open colors.html, select all the code, and copy it. Create a new file called animals.html in the same folder and paste it in.
Change what names the page: Update the <title>, the header <h1> and <p>, and the .page-intro heading and text.
Replace the cards: Swap the seven word cards for animals vocabulary. Then repeat the whole process for food and common items.

2 Starter vocabulary to build on

Use the words below as a beginning. They are drawn from the Ojibwe People's Dictionary (ojibwe.lib.umn.edu) and published Lakota and Dakota language resources. Language varies across dialects and families.

Animals: makwa (Ojibwe) bear, migizi (Ojibwe) bald eagle, amik (Ojibwe) beaver, mooz (Ojibwe) moose, waabooz (Ojibwe) rabbit, matho (Lakota) bear, wambli (Lakota) eagle.
Food: manoomin (Ojibwe) wild rice, miskomin (Ojibwe) raspberry, ode'imini (Ojibwe) strawberry, giigoonh (Ojibwe) fish, wiiyaas (Ojibwe) meat, wagmeza (Dakota) corn, tinpsila (Lakota) prairie turnip.
Common items: makak (Ojibwe) birch bark bowl, jiimaan (Ojibwe) canoe, mashkimod (Ojibwe) bag, waabooyaan (Ojibwe) blanket, ishkode (Ojibwe) fire, nibi (Ojibwe) water, tipi (Lakota and Dakota) dwelling.

⚠️ Verify before you publish. Always confirm words with your community, elders, or official language resources before you put them on the web. A published error spreads.

3 Research your own language

The starter list is a scaffold. The real goal of this unit is to find words from a language that means something to you: the language of your community, your family, or the land you live on. Here is where to research and verify them.

Ojibwe: Search words at ojibwe.lib.umn.edu. Many entries include audio. Click the speaker icon to hear the word.
Dakota and Lakota: The Lakota Language Consortium at lakhota.org has dictionaries and learning materials. For Dakota, the University of Minnesota Dakota Language Project has resources online.
Other languages: First Voices (firstvoices.com) hosts community-curated archives for dozens of Indigenous languages, many with audio.
Ask an elder or language keeper: No dictionary replaces a living speaker. If your community has a language keeper, asking them directly is the most accurate and meaningful way to learn how a word is used.

🪶 On attribution and respect. When you publish a website with Indigenous language content, you are making a claim that the words are accurate. Cite your sources in your site's footer or on a dedicated sources page. If you are not certain a word is correct, say so. It is better to tell readers to verify a word than to publish an error.

4 Add a sources note to your page

Turn that idea into code. Right now the footer credits one source in a single line. Add a small, faded .sources rule and a second footer line that reminds readers to verify. Two small pieces do the job: a .sources CSS rule, and one <p class="sources"> in the footer.

What this code means

font-size: 0.75rem: Makes the note small, quieter than the main credit line above it, so it reads as a footnote.
opacity: 0.75: Fades the text slightly. It is present and readable, but treated with a light touch.
The text Always verify words with your community: It tells readers that the words are a starting point and that accuracy is a shared responsibility. That is honesty, not weakness.

✍️ Add the .sources rule inside <style>, then add a <p class="sources"> inside the <footer>. Use the examples below, then press ▶ Run.

.sources {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-top: 8px;
}

<footer>
  <p>Built with HTML and CSS &bull; Sources: Ojibwe People's Dictionary (ojibwe.lib.umn.edu)</p>
  <p class="sources">Always verify words with your community, elders, or official language resources before sharing.</p>
</footer>

🤔 Quick check before you go on

One idea runs through this whole unit: before you publish a word, you should ______ it with your community, elders, or an official language resource. Type the missing word, then press Submit to unlock the last steps.

5 Add real audio and keep your pages accurate

Your audio tags point to placeholder paths like audio/ozhaawashkwaa.mp3. Here is how to connect them to real recordings, and how to keep your home page honest as your site grows.

Find a pronunciation file for your word from one of the sources above and download it.
Save it to an audio/ folder inside your project folder, named clearly, for example makwa.mp3.
Update the src to match: src="audio/makwa.mp3". Open the page in a browser and press play.
When a category grows past seven words, update the word count on the matching card in index.html so the home page stays accurate.

Supported audio formats

MP3, OGG, and WAV: Most browsers support all three. MP3 (audio/mpeg) is the most widely compatible.
If your file is a different format: Search for a free audio converter to change it to MP3 before you link it.

6 Reflection and Unit 7 complete

Before you share your site, take a moment with these questions:

Which language did you feature, and what is your connection to it?
Did you find any words that had no direct English equivalent?
What does it mean to publish a language on the internet, and who might find this site useful?
If an elder or language keeper saw this site, what would you want them to notice first?

Look at the skills you used across the seven stages of this unit:

linking HTML pages together with a navigation bar
interactive dropdowns and hover effects
a responsive word card grid
embedded <audio> players
a faded .sources credit line
choosing what to publish and what to protect

🎉 Well done. You built a complete, multi-page language learning website. You linked pages, laid out a card grid, embedded audio, and credited your sources. More than that, you used code to make an Indigenous language more visible and accessible on the web. Share your site with someone who speaks the language and ask them to test it. Their feedback is the most meaningful review you will receive. Keep building.

🏁 Finish Unit 7

To finish Unit 7, your page needs the .sources rule and a <p class="sources"> in the footer. Press Check my work when you are ready. This records that you finished the unit for your teacher, and you can press ⬇ in the preview bar to download your page as colors.html.

YOUR CODE

PREVIEW