🔨 Build-A-Website Workshop

Code goes on the left. Your website shows up on the right. Let's build!

1 Look at the code
2 Click a tool to add something new
3 Watch your website change!

💻 Your Code

🏗️ Website Structure
Every website starts with these three.
📝 Page Content
Click a tool to add it to your website!
😀 Add an Emoji
Click inside a sentence first, then pick one!
🖼️ Add a Picture
Pick something you like!

🌐 Your Website

🌐 my-website.com

📖 Tag Cheat Sheet

Most tags come in pairs — an opening tag and a closing tag (with a slash).

<html>…</html>
Wraps the whole webpage, start to finish.
<head>…</head>
Holds info about the page. You don't see it on the page.
<title>…</title>
Names the tab at the top of the browser.
<body>…</body>
Everything you can SEE on the page goes in here.
<h1>…</h1>
A big, bold heading — the title of your page.
<p>…</p>
A paragraph — one or two sentences of text.
<ul>…</ul>
Starts a bulleted list.
<li>…</li>
One item inside the list.
<h2>…</h2>
A smaller heading — great for starting a new section.
<img>
Shows a picture. This tag stands alone — no closing tag needed!
🍎 Tips for Teachers (click to open)

Live demo idea: Click 🔄 Start Over, then delete everything in the code box. Click the Website Structure tools in order — html, head, body — while you explain each one, then add a heading and paragraph. Students watch the page build itself from nothing!

Grades 2–3: Have students edit the words already inside the starter template — the heading, the sentence, and the two list items. The Emoji and Picture tools are fun, low-risk ways to practice clicking inside the code.

Grades 4–6: Point them to the Smaller Heading and Picture tools to add extra sections to their page.

The Heading tool is smart: it adds a big <h1> first, then automatically switches to a smaller <h2> for every heading after that — the button's label updates to show which one comes next.

Every "Add" tool inserts new code with the editable words already highlighted, so students can just start typing to replace them. Click 🔄 Start Over any time to reset the code back to the starter "My Favorite Thing" template.