🔨 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 a Picture
Pick something you like, or add your own!

🌐 Your Website

🌐 my-website.com

🎨 Style Your Website (CSS)

Click a colored box below to change its value — you're editing real CSS!

body {
color: ;
background-color: ;
font-size: ;
text-align: ;
}
 
p {
color: ;
font-size: ;
}

📖 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!

😀 Add an Emoji

Click inside a sentence in your code first, then pick one to drop it in!

💾 Save Your Website

Download your work as a file, or open one you saved before.

🍎 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: The starter template now uses [bracketed] placeholder text — have students select and replace the heading, the sentence, and the two list items with their own words. 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, and try the Style Your Website colors.

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.

The tab label above the preview shows whatever the student typed inside <title>.

Style Your Website (CSS) now lives right under the website preview. The colored boxes sit inside the CSS itself — clicking one changes that exact value, just like editing real code. Color boxes also accept any typed color name. text-align centers (or right-aligns) the whole page, since it's set once on body and every tag inside inherits it.

Add Your Own (last option under Add a Picture) asks the student to paste an image link and inserts it directly — a good moment to talk about only using pictures they have permission to use.

😀 Add an Emoji and 💾 Save Your Website now live at the bottom of the page, below the Tag Cheat Sheet.

💾 Save to File / 📂 Open File need no internet or setup — they download/reopen a real .html file (Google Drive, USB, email all work), and bring back both the HTML and the CSS choices exactly as they were.

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 everything back to the starter "My Favorite Thing" template.