Unit 5 · Stage 7

Make It Your Own

You have built the entire site across the first six stages: a sticky navigation bar, three sections with alternating backgrounds, article cards, and a full footer. Every nav link scrolls to its section. The site works. This final stage makes it yours. You will add an image, add a source link, and swap the example content for knowledge from your own Tribal nation. 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 site is complete from Stages 1 through 6. In this last stage you add two new tags, an <img> and an external <a> link, then make the words and colors your own.

1 Start from your finished site

Your finished Stage 6 code should already be in the editor. You should see the full working site: sticky nav, three sections, article cards, and a complete footer. Now it becomes yours. The example content covers Ojibwe, Dakota, Lakota, Nakota, and MHA Nation lifeways. This stage asks you to center your own Tribal nation's knowledge.

What you can change

The article text: Find the words inside each <article> and each <p class="section-intro">, and replace them with what you know from your own community, family, and sources.
The headings and ids: Rename the sections if your nation's lifeways are better described by different headings. Update the <h1> title, the nav link text, the section ids, and the footer to match.
Keep it true: You can keep the same three topics, food, buffalo and hunting, and trade, or change them to match what your nation or community teaches.

🌿 Why this matters. If you do not have your own community's knowledge yet, ask an elder, a teacher, or a family member, or use the sources listed on the Unit 5 main page. The site is a tool for learning and representing, not just a technical exercise.

2 Add an image to one section

HTML images use the <img> tag. It is a self-closing tag, meaning it has no closing tag. Two attributes are required: src, the image address, and alt, a text description for screen readers and for when the image fails to load.

What this code means

src: The address of the image. It can be your own image URL or a public domain image from a source like Wikimedia Commons.
alt: A description of what the image shows. It should describe the image specifically, not just label it. "Wild rice harvest" is a label. "Two people in a canoe harvesting wild rice on a Minnesota lake" is a description.
style="width: 100%": Makes the image fill the width of its article card, with rounded corners and a little space below it.

✍️ Add an <img> inside any article. Give it a src and an alt. Use the example below, then press ▶ Run.

<img
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Wild_rice_harvesters.jpg/640px-Wild_rice_harvesters.jpg"
  alt="Two people in a canoe harvesting wild rice on a Minnesota lake"
  style="width: 100%; border-radius: 6px; margin-bottom: 12px;"
>

3 Add an external link

You can link to a source you used in your research. External links need two extra attributes: target="_blank" to open in a new tab, and rel="noopener" for security.

What this code means

href: The web address the link points to. For an outside site it is a full https:// address, not an #id like your nav links.
target="_blank": Opens the source in a new browser tab, so your reader does not lose your page.
rel="noopener": A safety attribute that keeps the new tab from getting any control over your page.

✍️ Add a source link at the bottom of an article. Use the example below, then press ▶ Run.

<p>
  <a
    href="https://millelacsband.com/home/culture"
    target="_blank"
    rel="noopener"
  >Learn more: Mille Lacs Band of Ojibwe</a>
</p>

🤔 Quick check before you go on

Every <img> needs two attributes. One is src. What is the other one, the text description read aloud by a screen reader? Type it, then press Submit to unlock the last steps.

4 Change the color palette

The deep forest green (#2d4a3e) fits woodland and prairie themes. Your nation's territory, or the topic you chose, might call for a different palette. Try changing the header, nav, and footer background color to fit what you are representing.

#4a2d2d, a deep ochre red for plains and dry prairie
#1a2e4a, a deep lake blue for water-based nations
#3d3520, a dark earth tone for agricultural traditions
Or choose your own. Change background-color in header, nav, and footer to the same base color, then adjust the .section-heading and article h3 colors to match.

🎨 This step is yours. There is nothing to check here. Experiment, then keep the palette that feels right for what you are representing.

5 Semantic HTML: what you built

Before you finish, take stock of every semantic tag you used in this site and what each one means.

<header>, the top of the page, holding the title and subtitle
<nav>, the navigation bar with anchor links to each section
<main>, the primary content, holding all three sections
<section>, a thematic chapter with its own heading and article cards
<article>, a self-contained piece of content that makes sense on its own
<footer>, the bottom of the page with the site description and credits
<a href="#id">, an anchor link that jumps within the same page
<img src alt>, an image with a required text description

A page built with these tags is not just code. It is a structured document. A screen reader navigates it. A search engine indexes it. Another developer reads it and understands the hierarchy immediately. That is what semantic HTML means in practice.

🪶 A note on publishing cultural knowledge. When you build a page that represents your Tribal nation's knowledge, you are doing something that matters. Be thoughtful about what you share. Some knowledge is meant to stay within the community. Some is appropriate to share publicly. Check with elders, teachers, or community members if you are unsure what is okay to publish. The technology is yours. How you use it is a cultural decision, too.

6 Unit 5 complete

Step back and look at what you built across all five units:

Unit 1: HTML structure, headings, lists, links, semantic markup
Unit 2: CSS basics, colors, fonts, Flexbox, box shadows
Unit 3: CSS positioning, overlays, newspaper layout
Unit 4: CSS Grid, hover, transitions, and cultural protocols in design
Unit 5: a full single-page site with semantic HTML and anchor navigation

🎉 Well done. You built a full single-page website from scratch using semantic HTML and anchor navigation. You represented Tribal Nations in the region as living, present, and historically connected. You added an image and a source of your own, and you thought about what belongs on a public page and what does not. That is the work of this unit. You did it.

🏁 Finish Unit 5

To finish Unit 5, your site needs one <img> with a src and an alt, and one external link with target="_blank". 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 site as traditional-lifeways.html.

YOUR CODE

PREVIEW