Build your first webpage while you learn about the Indigenous peoples of Minnesota. 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
Minnesota is the ancestral homeland of the Dakota people and the traditional territory of the Anishinaabe (Ojibwe) people. Today, 11 federally recognized Tribal nations call Minnesota home.
These 2 Nations are:
Dakota: 4 nationsSouthern Minnesota. Dakota means "friend" or "ally."
Anishinaabe: 7 nationsNorthern Minnesota. Anishinaabe means "original people."
💡 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 Minnesota 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>Minnesota's 11 Tribal Nations</h1>
6 The Dakota nations
Now you will add brand-new code. Under your <h1>, add a section heading and a sentence about the Dakota communities of southern Minnesota. <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>.
Shakopee MdewakantonScott County
Prairie IslandGoodhue County
Lower SiouxRedwood County
Upper SiouxYellow Medicine County
✍️ What goes in the paragraph? A short fact about the 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>Dakota Nations</h2>
<p>There are 4 Dakota nations in southern Minnesota.</p>
7 The Anishinaabe nations
Now add a second section for the seven Anishinaabe communities of northern Minnesota.
What this code means
<h2> and <p>, again
The same two tags as the Dakota section, used a second time. Reusing tags to build more sections is exactly how real web pages are made.
White EarthMahnomen, Becker, Clearwater
Red LakeBeltrami, Clearwater, Lake of the Woods
Leech LakeCass, Itasca, Beltrami, Hubbard
Fond du LacCarlton, St. Louis
Bois ForteSt. Louis, Koochiching
Grand PortageCook County
Mille LacsMille Lacs, Aitkin
✍️ What goes in the paragraph? A short fact about the Anishinaabe 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>Anishinaabe Nations</h2>
<p>There are 7 Anishinaabe nations in northern Minnesota.</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>White Earth Nation</h2>
<p>White Earth is the largest reservation in Minnesota.</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