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 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 Minnesota'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>Minnesota's 11 Tribal Nations</h1> is one element.
๐ฎ Let's try it: change the <h1> to Minnesota's 11 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 Minnesota home? Type your answer, then press Submit to unlock the next steps.
5 The Dakota nations
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
๐ฎ Try it: under your <h1>, add <h2>Dakota Nations</h2> and a <p> sentence about the 4 Dakota communities. Press Run.
6 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
๐ฎ Try it: add a second <h2>Anishinaabe Nations</h2> and a <p> about the 7 Anishinaabe communities. 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>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.