Build your first webpage while you learn about the Indigenous peoples of North Dakota. The editor on the right is yours to play in: type, change things, and press Run any time. Want to be guided letter by letter? Press 👀 Type it with me. (pause on a highlighted word to see what it does)
1 Welcome & land acknowledgment
North Dakota is the homeland of diverse Indigenous peoples who have lived here since time immemorial. Today, 5 federally recognized Tribal Nations call North Dakota home, representing three distinct cultural heritages.
These 5 Tribal Nations come in 2 groups:
Sioux and Dakota: 3 nationsSpirit Lake Nation, Standing Rock Sioux Tribe, and Sisseton Wahpeton Oyate.
MHA Nation and Anishinaabe: 2 nationsThree Affiliated Tribes (MHA Nation) and the Turtle Mountain Band of Chippewa.
💡 Each Tribal Nation is sovereign: it has its own government, laws, and services, like a state or country.
2 Start your HTML document
Every webpage starts the same way. <!DOCTYPE html> tells the browser "this is HTML5." The <html> tag wraps your whole page, and every opening tag needs a closing tag with a slash, like </html>.
What this code means
<!DOCTYPE html>
The very first line of every page. It tells the browser to read your file as modern HTML5, so your page shows up the way you built it.
<html> ... </html>
The wrapper around your whole page. Everything you make lives between the opening <html> and the closing </html>.
🎮 Try it: press ▶ Run to see your page. The <!DOCTYPE html> and <html> ... </html> shell is already in your editor, ready to build on. Want a guide? Press 👀 Type it with me.
3 Add the head and title
The <head> is the backstage of your page. The <title> inside it names your page.
What this code means
<head> ... </head>
The backstage of your page. It holds information about the page that visitors do not see directly on screen.
<title> ... </title>
The name of your page. It shows on the browser tab at the top of the window, it is the name saved when someone bookmarks the page, and it is the clickable headline your page shows in Google search results. A clear title helps people find your work.
🎮 Try it: in the editor, change the title from My Page to North Dakota's Tribal Nations.
4 Add the body and a heading
The <body> holds everything visitors can see. <h1> is the biggest, most important heading. Every page should have exactly one.
What this code means
<body> ... </body>
Everything a visitor sees on the page lives inside the body: headings, text, pictures, and buttons.
<h1> ... </h1>
The biggest, most important heading, used once per page for its main title. HTML has six heading sizes, <h1> down to <h6>, from largest to smallest.
Two words to know: tag and element
Tag
A label written in angle brackets, like <h1>. Most tags come in a pair: an opening tag <h1> and a closing tag </h1> with a slash.
Element
The opening tag, the closing tag, and everything in between. <h1>North Dakota's 5 Tribal Nations</h1> is one element.
🎮 Let's try it: change the <h1> to North Dakota's 5 Tribal Nations. Then type headings from <h1> to <h6> and press Run to see all six sizes go from biggest to smallest.
🤔 Quick check before you go on
How many Tribal Nations call North Dakota home? Type your answer, then press Submit to unlock the next steps.
5 The Sioux and Dakota Nations
Add a section heading and a sentence about the three Sioux and Dakota Nations of North Dakota. <h2> is a section heading, one step down from <h1>. <p> is a paragraph of text.
What this code means
<h2> ... </h2>
A section heading, one size down from <h1>. Use it to label the main sections of your page.
<p> ... </p>
A paragraph. Any block of normal sentences goes inside a <p>.
Spirit Lake NationRamsey, Benson, Nelson Counties
Standing Rock Sioux TribeSioux, Morton Counties
Sisseton Wahpeton OyateLake Traverse Reservation, SE ND
🎮 Try it: under your <h1>, add <h2>Sioux and Dakota Nations</h2> and a <p> sentence about the 3 Sioux and Dakota Nations. Press Run.
6 The MHA Nation and Anishinaabe
Now add a second section for North Dakota's other two Tribal Nations: the MHA Nation and the Turtle Mountain Band of Chippewa.
What this code means
<h2> and <p>, again
The same two tags as the Sioux and Dakota section, used a second time. Reusing tags to build more sections is exactly how real web pages are made.
Three Affiliated Tribes (MHA Nation)Fort Berthold Reservation, Western ND
Turtle Mountain Band of ChippewaRolette County
🌿 The Three Affiliated Tribes, also called the MHA Nation, are three distinct peoples: the Mandan, Hidatsa, and Arikara. They have lived along the Missouri River for centuries, long before European contact.
🎮 Try it: add a second <h2>MHA Nation and Anishinaabe</h2> and a <p> about these 2 Tribal Nations. Press Run.
7 Make it your own
You have built the page. Add another <h2> heading and a <p> paragraph about a nation you want to learn more about, then press Run to see it.
<h2>MHA Nation</h2>
<p>The MHA Nation has lived along the Missouri River for centuries.</p>
✓ Finish this stage
To complete Stage 1, your page needs a main heading and both nation sections. Press Check my work when you are ready. This opens Stage 2 and lets your teacher see that you finished.
Unit 1 · Tribal Nations
Stage 1 of 7