Ibnovate Course 2 · The Rising Builders
⏱ 75 minLive session · ages 12–15

Session 18 — Ship It

Duration: 75 min · Format: live online · Ages: 12–15

Session goal: by the end, every student's quiz app is live on the internet at a real URL they can share, and they've presented it to the class. This session is the unit's build project.

Before class — prep (5 min)

Agenda

Time Segment
0:00 Hook — the difference between "it works" and "it's live" (5 min)
0:05 Teach — from three panels to one real file (15 min)
0:20 Teach — put it on the internet (15 min)
0:35 Build project — deploy and present (23 min)
0:58 Check for understanding (10 min)
1:08 Wrap-up + homework (7 min)

0:00 · Hook (5 min)

Ask the class and take a few answers (chat or unmute):

Land the idea: a CodePen is your workshop; deploying is opening the shop. Today they turn their project into a real website with its own address that works on any phone, anywhere — for free. This is the moment their app becomes real.

0:05 · Teach — From three panels to one real file (15 min)

Explain: CodePen splits your code into three tidy panels, but a real website is files. The whole quiz fits in one file named index.html — the special name every web server looks for first. The CSS goes inside a <style> tag, and the JavaScript goes inside a <script> tag, all wrapped in the page skeleton CodePen was hiding for you.

Type/run this together — show the shape of the single file (paste your quiz's real CSS and JS where marked):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Quiz App</title>
  <style>
    /* paste your CSS panel here */
  </style>
</head>
<body>
  <div id="quiz">
    <h1 id="question">Question goes here</h1>
    <div id="options"></div>
    <p id="score">Score: 0</p>
  </div>

  <script>
    /* paste your JavaScript panel here */
  </script>
</body>
</html>

Walk through the skeleton: <head> holds settings (the <title> on the tab, the viewport line that makes it work on phones); <body> holds what you see; <style> and <script> bring in the other two layers. Point out that the HTML panel's content goes in the <body>.

⚠ Watch for the #1 gotcha: the file must be named exactly index.html (all lowercase, no spaces). A server looks for index.html as the home page — Index.html or quiz.html won't load automatically.

Show the fast path in CodePen: Export → Export to ZIP downloads a folder that already contains a correct index.html with everything assembled. That's the folder we'll deploy.

Ask: "Why put the <script> at the bottom of the <body>, after the elements?" (Answer: so the elements exist before the JavaScript tries to getElementById them.)

0:20 · Teach — Put it on the internet (15 min)

Explain: a host is a computer that serves your files to the world. We'll use a free one. Demo the two paths live.

Picture what deploying does: your files go to a free host, which gives them a live web address.

Diagram of deployment: your files are uploaded to a free host, which serves them at a live web address

Path A — Netlify Drop (fastest). 1. Go to Netlify Drop. 2. Drag the exported folder (the one with index.html inside) onto the page. 3. Wait a few seconds — it gives you a live URL like https://silly-name-1234.netlify.app. Open it. It's live worldwide.

Path B — GitHub Pages (more permanent). 1. On GitHub, create a new repository (public), tick Add a README. 2. Add file → Upload files, drop in your index.html, and Commit. 3. Go to Settings → Pages, set Source: Deploy from a branch, pick the main branch and /root, Save. 4. Wait a minute, refresh, and GitHub shows your live URL: https://yourname.github.io/your-repo/.

⚠ Watch for: deploys aren't instant — GitHub Pages can take a minute or two to go live, and updates take time to appear. If you change your code, you re-deploy (re-drag the folder on Netlify, or re-upload/commit the file on GitHub). The old version can also be cached — a hard refresh (Ctrl+Shift+R) helps.

Ask: "Once it's live, what do you need to send someone so they can play your quiz?" (Answer: just the URL — nothing installed, works in any browser.)

0:35 · Build project — Deploy and present (23 min)

This is the unit's build project: every student ships their quiz and shows it live.

Part 1 — Deploy (≈13 min). Have each student: 1. Open their Session 17 quiz Pen and Export → Export to ZIP, then unzip it. 2. Deploy via Netlify Drop (drag the folder) or GitHub Pages (upload index.html). 3. Open the live URL on their phone to prove it works off their computer. 4. Paste the live link in the shared chat/doc.

Circulate for (or watch the chat for) the three blockers nearly everyone hits — a file not named index.html, dragging the ZIP instead of the unzipped folder, and expecting the link to work before the deploy finishes.

Part 2 — Showcase (≈10 min). Run a quick round of 60-second demos. For each student, have them share the live URL (drop it in chat so others can play) and answer three quick prompts: - "What is your quiz about, and how many questions?" - "Show one thing you styled or changed to make it yours." - "What was the hardest bug, and how did you fix it?"

Debrief: "You didn't just write code — you shipped a product to the whole internet. That's exactly what a professional web developer does."

0:58 · Check for understanding (10 min)

Ask these aloud or drop them in the chat. Answer key (for you):

  1. What must the home page file be named, and why? → index.html — a web server automatically serves that file as the site's home page.
  2. Where do the CSS and JavaScript go when you combine everything into one file? → CSS inside a <style> tag in the <head>; JavaScript inside a <script> tag, usually at the end of the <body>.
  3. You changed your quiz after deploying — how do people see the new version? → Re-deploy (re-drag the folder on Netlify, or re-upload/commit on GitHub), then hard-refresh; the update isn't automatic.

1:08 · Wrap-up + homework (7 min)

Teaching notes

<title>Sara's Football Quiz</title>
<meta name="description" content="A 5-question quiz about football. Can you beat it?">

Vocabulary

Term Meaning
Deploy Put your files on a host so anyone can visit them
Host A computer that serves your website to the internet
index.html The default home-page file a server looks for
URL The web address people use to reach your site
Re-deploy Upload the new version so the live site updates

Resources

Practice set

Extra exercises reinforcing single-file structure and deployment — easy to hard. Great for lab time or homework.

1. Predict the result: you deploy a folder whose home page is named Quiz.html, not index.html. What happens when you visit the site root? → It won't load automatically — the server looks for index.html. You'd get a "not found" or a file listing.

2. Name the parts: in a single-file page, which tag holds the CSS and which holds the JavaScript? → CSS goes in <style>; JavaScript goes in <script>.

3. Fix the bug: this page shows no styling. Why? → The CSS is outside the <style> tag (it's loose text in the <head>). Wrap it: put the rules inside <style> … </style>.

<head>
  h1 { color: red; }
</head>

4. Fix the bug: the JavaScript errors with "cannot read property of null" when the page loads. The <script> is in the <head>. What's the likely fix? → The script runs before the <body> elements exist. Move the <script> to the end of the <body> so the elements are there first.

5. Write it: write the one line that sets the browser-tab title to "My App". → <title>My App</title> (inside the <head>).

6. Explain it: a classmate says "I updated my code in the editor but the live site still shows the old quiz." What did they forget? → To re-deploy — the live site only changes when you upload the new files again (and they may need a hard refresh).

7. Trace it (hard): you deploy via Netlify Drop and get happy-cat-42.netlify.app. Then you fix a bug and drag the updated folder again. What happens to the URL and the old version? → The same URL updates to the new version (Netlify replaces the deploy); the old version is gone. The link you shared keeps working and now shows the fix.

Going deeper (optional)

For a class that's flying, introduce the real developer loop — version control — which they've just touched by using GitHub. Explain that each commit is a labelled snapshot of your project, so you can see its history and undo mistakes:

edit index.html  →  commit "add 5th question"  →  GitHub Pages auto-redeploys
edit index.html  →  commit "fix scoring bug"   →  live site updates again

Land the idea: professionals never overwrite files blindly — they commit small, described changes, and the host redeploys automatically. That history is a safety net and a portfolio of exactly what you built and when. Challenge them to make three separate commits (each a small improvement) and read their own commit list like a changelog. This is the workflow behind essentially every software team.

Common mistakes & fixes

Next session

Session 19 — How Machines See (Unit 5 — Deeper AI): students move from building apps to teaching computers to understand images — the start of a deeper dive into how modern AI works.

Ibnovate · Build · Innovate
Type to search · Esc to close
Welcome back
Sign in to continue building.
Accounts are created by Ibnovate — ask your instructor for your login.
🔒