Deploy Your Work
Think of it like this: You just made an awesome drawing. Deployment is like getting a special spot on the world's biggest refrigerator so everyone can see it! 🖼️➡️🌍
✨ PAN'S RULE: If it's not chaotic, it's not magic! ✨
Build something real and share it with the world! Learn how to publish your project online using free tools
like Netlify and GitHub Pages.
Key Concepts
Watch & Learn
index.html
app.netlify.com/drop
in a browser tab
When to Use Each Tool?
Netlify Drop is for speed ⚡. It's the fastest way to get a project online to show someone. GitHub Pages is for power and teamwork 🐙. It's where you store your code, track changes, and host a site all in one place—just like pro developers do.
Deploy in 3 Steps with Netlify Drop
Have Your Files Ready
Take the HTML file you vibe-coded in Module 2 (or any HTML file
you've made). Put it in a folder on your computer. Make sure
your main file is called
index.html.
Go to Netlify Drop
Visit app.netlify.com/drop. You'll see a big area that says "Drag and drop your site folder." Drag your folder right onto it!
Your Site is Live! 🎉
Netlify gives you a link (like
random-name.netlify.app). Click it — your project is now live on the internet! Share
the link with anyone.
Read More
Safety Reminder Before You Deploy
Before publishing anything online, make sure your project doesn't contain your full name, home address, phone number, school name, or any private information. Once something is online, anyone can see it!
Your Challenge
Apprentice Path: The 1-Minute Deploy ⚡
Take the webpage you vibe-coded in Module 2 and make it live! Or use an AI to help you build something new to deploy.
-
1Make sure your project has an
index.htmlfile. Use AI to add something fun if you want — a color theme, a countdown timer, anything! - 2Go to app.netlify.com/drop.
- 3Drag your project folder onto the Netlify Drop area.
- 4Copy your new .netlify.app link. You now have a real live website!
- 5Share the link with a friend or family member. How does it feel to have something live on the internet? 🌍
- ⭐Level Up: Go back to your
index.htmlfile and change something—the background color, a sentence, or add a new emoji. Now, drag the folder to Netlify Drop again. It will give you a new link. See how easy it is to update your work?
Pro Builder Path: The Developer Workflow 🐙
Ready for the developer workflow? Deploy this same project using GitHub Pages. You'll need to create a repository, push your code, and enable Pages in the settings. It's more steps, but it's how pros share their work every day. Need a guide? Check out the official GitHub Pages docs.
👨👩👧 Parent Corner: Your Child's First Live Website!
This is a huge moment! Your child just published something for the world to see. Celebrate it! Next step idea: For a birthday or special reward, consider helping them get a real domain name (like theirname.com). Services like Porkbun or Namecheap make this an affordable and exciting project you can do together, connecting their digital creation to a real-world identity.
From Hobby to Career
Every professional web developer, AI engineer, and game designer on the planet deploys their work. The process of taking code from your machine and publishing it is a fundamental skill. What you learned in this module isn't just a fun trick—it's the first step in a professional workflow.