Lesson 20 · THE GRAND FINALE · about 45 minutes · do this WITH a parent 👨‍👩‍👧

🌍 Publish Day: Put Your Page on the Real Internet

For nineteen lessons, your amazing product page has lived on ONE computer: yours. Today it gets an address on the real internet — a link that works on any phone, tablet, or computer on Earth. This is the moment everything was building toward. Go get a parent — you do this one together!

🎬 Watch first (90 seconds)

Why does a parent need to be here?

Putting something on the internet means everyone can see it, and it needs a real account owned by a grown-up. Creating accounts and sharing things publicly are grown-up decisions — that's not a "boring rule," it's how real web developers with awesome parents do it. So: no parent next to you yet? Pause here, go find one, and tell them the magic words: "I built a website and today we publish it." Watch their face. 😄

Two new words: hosting and URL

Right now, your page lives in a file on your computer. When you close the laptop... the website "goes to sleep" too. Nobody else can visit it. To fix that, we need two things:

Hosting = a computer somewhere in the world that never sleeps, holding a copy of your files. It stays awake 24/7 so anyone can visit your page at 3 in the morning from the other side of the planet.
URL = the worldwide address of your page, like https://robo-sneakers.netlify.app. Just like your house has a street address, your page gets an internet address. Type it anywhere on Earth → your page appears.

💡 The one idea of this lesson Your local file and the online copy are two SEPARATE things. Publishing makes a copy of your files and puts it on the hosting computer. If you change your local file afterwards, the internet version does NOT magically change too — you have to upload again. The loop is always: change it locally → check it → upload again. Every real developer on Earth lives inside that loop.

🛡️ Internet safety rules (read these out loud together)

Publish WITH a parent — never alone.
No real personal info on the page: never your real full name, home address, school, phone number, or photos of yourself. Your first name or a cool nickname is plenty.
The fake product stays fake. No real prices, no real "buy" promises — it's a fun demo, and that's what makes it safe.
The parent owns the hosting account — their email, their password, their decision to keep the site up or take it down.

🛠️ Publish it (parent + kid team-up)

🧪 Your mission Take practice/landing.html from your computer to a real URL that works on a phone. We'll use Netlify Drop — a free tool where publishing is literally drag-and-drop.

Final check (you, the developer). Open practice/landing.html in the browser one last time. Click the button — does the message appear? Open DevTools and check the Console for red errors (Lesson 18 skills!). Ship it clean. 🕵️
Safety sweep (together). Read the whole page with your parent, top to bottom. Any real full names, addresses, school names, phone numbers, or photos of you? Remove them. Fake product? Perfect. ✅
Parent's turn: the parent creates a free account at https://app.netlify.com (Netlify is a famous, free hosting service that real companies use too). Parent's email, parent's password.
Go to https://app.netlify.com/drop — this magic page is called Netlify Drop. It's a big drop zone that says "drag your site here."
Prepare the package. On your computer, make a NEW folder (call it something like my-site). Put a copy of landing.html inside it, and rename that copy to index.html. Why? index.html is a magic name: when someone visits your URL, the hosting computer automatically opens the file called index.html first. It's the "front door" file.
The big moment: drag the whole FOLDER (not just the file) onto the Netlify Drop page. 🫳📦
Wait a few seconds... and Netlify hands you a real URL, something like https://something-random.netlify.app. Now do the coolest test in this entire course: open that URL on a phone. Your page. On a phone. From the internet. You are LIVE, worldwide. 🤯🌍
Optional victory lap: in Netlify, open your site's settings and rename it to something cooler, like robo-sneakers.netlify.app. Then send the link to grandparents, cousins, family friends — everyone. You made a real website and it has a real address. 🎉

🔁 The update loop

Tomorrow you'll want to change something — a color, a word, a new feature card. Remember: the online copy doesn't update itself! The loop goes:

Fix it locally — edit index.html in your folder on your computer.
Check it — open the local file in your browser. Button works? Console clean?
Upload again — drag the folder onto Netlify Drop again, or (with your parent logged in) drop it on your site's Deploys page so it updates the SAME URL.
Refresh the URL — and there's your change, live for the whole world.

Change → check → upload → refresh. That's the heartbeat of every website on the internet, and now it's yours.

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

🎓 YOU DID IT

Stop for a second and let this sink in: you started at "what is a tag?" and you just published a real website to the real internet. HTML walls, CSS paint, JavaScript electricity, AI teamwork, detective debugging — and now, worldwide publishing. You finished the ENTIRE course. That is genuinely a big deal. 🥳

🏆 Check your trophy shelf — the 🌍 World Publisher badge should be shining there.
📜 Open your certificate and print it. Hang it somewhere everyone can see it. You earned every pixel.
🤖 Tell your AI teacher your live URL! The teacher will write your final learning record and suggest your next adventure — making the page phone-friendly? Adding a second page? Building a game? The course is over, but the building never stops.

📚 Want more?

⭐ Best thing to read next MDN: Publishing your website — the official guide to putting sites online, including MORE ways to publish (like GitHub Pages) for when you're ready for the next level. Reading it counts as a lesson block!