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 Every website in the world begins the same way
Look at the code already in your editor on the right. You did not have to write it. Every web page ever made starts with this same little skeleton. Here is what each part is doing:
The skeleton that is already in your editor
<!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 on the page lives between the opening <html> and the closing </html>.
<head> ... </head>
The backstage of your page. It holds information about the page that visitors do not see on the screen, like the page's name.
<title> ... </title>
The name of your page. It shows on the browser tab, it is what saves when someone bookmarks you, and it is the blue headline your page shows in a Google search.
<body> ... </body>
The stage. Everything a visitor actually sees (headings, text, pictures, buttons) lives inside the body.
💡 You will reuse this exact skeleton on every page you ever build. It is already typed for you, so you can spend your energy on the parts that make your page yours.
3 Most tags come in pairs
Notice the slashes. Almost every tag has an opening tag and a matching closing tag with a slash, and your words go in between:
A tag and its pair
<title> … </title>
The opening tag <title> says "the name starts here." The closing tag </title> (same word, plus a slash) says "the name ends here." That is why <head>, <body>, and <html> each have a partner with a slash in your editor.
A few special tags close themselves and have no partner, and you will meet those later. For now, remember the pair: open, then your words, then close.
4 Your turn: run it, then name your page
Time to touch the code. You will not add anything new yet. You will just change the page's name and watch what happens on the browser tab.
✍️ What makes a good title? Your name plus what the page is. Type the whole thing between the <title> tags. Not sure what to write? Use the example below.
<title>Maya's First Website</title>
🤔 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 Name the page on the screen: the big heading
The <body> already holds an <h1> that says My first web page. <h1> is the biggest, most important heading, the main title a visitor sees. Change its words to name your real page.
What this code means
<h1> ... </h1>
The biggest, most important heading, used once per page for its main title. HTML has six heading sizes, <h1> down to <h6>, largest to smallest.
✍️ Change the words, keep the tags. Type your new title between the <h1> and </h1>. Not sure? Use the example below, then press ▶ Run.
<h1>North Dakota's 5 Tribal Nations</h1>
6 The Sioux and Dakota Nations
Now you will add brand-new code. Under your <h1>, 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
✍️ What goes in the paragraph? A short fact about the Sioux and Dakota Nations. Type the whole sentence and end it with a period. Not sure what to write? Use the example below word for word, then press ▶ Run.
<h2>Sioux and Dakota Nations</h2>
<p>There are 3 Sioux and Dakota nations in North Dakota.</p>
7 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.
✍️ What goes in the paragraph? A short fact about these two Tribal Nations. Type the whole sentence and end it with a period. Use the example below word for word if you are not sure, then press ▶ Run.
<h2>MHA Nation and Anishinaabe</h2>
<p>There are 2 more Tribal Nations in North Dakota.</p>
8 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