Put Your Webpage on the Internet! 🧙‍♂️

First, we need to create an account on a website called GitHub. Think of GitHub as a magic notebook in the sky where coders save all their work so it’s never lost — and so they can share it with the world!

1. 1Go to github.com in your web browser.
2. 2Click “Sign up”— it’s totally free!
3. 3Type in your email address. Ask a parent if you need help with this part.
4. 4Pick a username — this is your wizard name! Make it fun but remember it. (Example: coder-sam)
5. 5Create a password and keep it safe. Write it down somewhere!
6. 6Click the big “Create account” button and follow the steps to finish signing up.

📸What you'll see — the Sign Up page

📸Fill it in like this (use YOUR name and email!)

🎉You did it! This is your GitHub home page

Next, we’re going to use a super cool tool called Code to Webpageto turn your Python code into something the internet can show. It’s like a magic translator! 🪄

1. 1Go to code-webpage.vercel.app— that’s the Code to Webpage tool!
2. 2You’ll see a big dark box. That’s where your code goes!
3. 3Open your Python code from class. Select all of it (Ctrl+A or Cmd+A) and copy it (Ctrl+C or Cmd+C).
4. 4Click inside the dark box on the website, then paste your code (Ctrl+V or Cmd+V).
5. 5Click the big green “Convert to HTML →” button!

📸Paste your code in here

1. 6Your HTML code will appear below. Now click “Copy HTML” — that arrow is pointing right at it!

📸Click "Copy HTML" — the green button up there!

Now we’re going back to GitHub to create something called a repository (say it like: re-poz-it-or-ee). This is the special folder where your webpage will live!

1. 1Go back to github.comand make sure you’re logged in.
2. 2Look for the green “Create repository” button on the left side of your home page and click it.

📸Click "Create repository" on your home page

1. 3In the “Repository name” box, type a name for your project — like my-project. No spaces!
2. 4Make sure “Public” is selected so people can visit your webpage.
3. 5Leave everything else alone and scroll down to click the green “Create repository” button!

📸Fill in your repo name like this

🎉Your repository is created! It looks like this

Your magical backpack (repository) is empty right now. Time to put your webpage code inside it! We’re going to create a file called index.html— that’s the special name the internet uses to find your homepage.

1. 1Click where it says “creating a new file” (the green arrow was pointing to it in the last screenshot).
2. 2At the top where it says the file name, type exactly: index.html — spelling counts here!
3. 3Click inside the big white/dark area below — that’s the editor where you write the code.
4. 4Paste the HTML code you copied from Code to Webpage (Ctrl+V or Cmd+V).

📸Name the file "index.html" and paste your code in

1. 5Click the green “Commit changes...” button in the top right corner.
2. 6A little box will pop up. Just click the green “Commit changes” button again.

📸Click "Commit changes" to save your file!

🎉Your file is saved! You should now see index.html in your repo

This is the most exciting part! We’re going to flip a switch called GitHub Pagesthat turns your repository into a real live website that anyone can visit. Let’s do it!

1. 1Click the ⚙️ Settings tab at the top of your repository page.
2. 2Scroll down the left menu and click “Pages” — the arrow will show you!

📸In Settings, find and click "Pages" on the left

1. 3Under “Branch”, click the dropdown that says “None” and choose “main”.

📸Click the dropdown and select "main"

1. 4Click the green “Save” button!

📸Click Save — the arrow is pointing right at it!

1. 5Wait about 1–2 minutes then refresh the page. You’ll see a message that says “Your site is live at...” 🎉
2. 6Click “Visit site” to see your webpage on the real internet!

🎉You'll see this — your site is live! Click "Visit site"!

🌟THIS is your webpage — live on the internet!