Session 4: Saving Your Progress — Version Control with Git & GitHub

Welcome to Session 4! In the previous session, you successfully built a beautiful personal webpage inside Google Antigravity. Right now, that code lives inside your private workspace. If you delete that workspace by accident, your work is gone.

Over the next 45 to 60 minutes, you will learn how to take safety snapshots of your work and back them up securely to GitHub—the world's most popular cloud platform for code.

Prerequisites

A laptop connected to the internet.
Your browser open with your Google Antigravity workspace from Session 3 active.
A personal email address (like Gmail, Outlook, or Yahoo) that you can access to read confirmation codes.

Core Concepts: Git vs. GitHub

What is Git? Think of Git as a "Time Machine" or an "Auto-Save Snapshot System" for folders. When you write code, you occasionally save a permanent checkpoint (called a Commit). If you make a mistake later and break your website, you can easily use the time machine to revert your folder back to yesterday's perfect snapshot.
What is GitHub? While Git runs locally on your computer/workspace, GitHub is a cloud storage service (like Google Drive, OneDrive, or Dropbox) designed specifically for code files. It allows you to store your Git checkpoints safely on the cloud and share them with the world.
What is a Repository (Repo)? Simply a virtual project folder that Git is tracking.

Step-by-Step Guide

Step 1: Creating a Free GitHub Account

Let's register on GitHub first. This is a fully visual, web-based process.

Open a new browser tab and navigate to: https://github.com/
In the top-right corner, click "Sign Up".
Type your email address and click "Continue".
Create a strong password and click "Continue".
Choose a unique username (e.g., waqar-hybrid-rides or haziq-webdev) and click "Continue".
Type n (for No) when asked about email preferences, then click "Continue".
Complete the simple anti-spam puzzle (verifying you are a human) and click "Create account".
Verify Your Email: Check your inbox for a 6-digit verification code from GitHub. Type that code into the web page.
GitHub will ask a few setup questions. Simply scroll to the bottom and click "Skip personalization" to proceed to your clean GitHub home dashboard.

Step 2: Creating a Remote Code Repository (Folder)

Now, let's create an empty cloud drawer on GitHub where we will store our code.

On your GitHub home dashboard, click the green button that says "New" (or click the plus + icon in the top-right and select "New repository").
In the Repository name field, type:
```
my-first-website
```
Ensure the repository is set to Public (so Cloudflare can connect to it later).
⚠️ CRITICAL STEP: Leave all checkboxes (Add a README file, Add .gitignore, Choose a license) UNCHECKED. Adding these would write files to the cloud drawer before we link our local folder, causing git sync errors.
Click the green button at the bottom: "Create repository".
You will now see a page filled with simple command lines. Keep this tab open—we will copy commands from here in Step 4!

Step 3: Opening the Terminal in Google Antigravity

Google Antigravity has a built-in terminal window right at the bottom, which connects directly to your workspace container files.

Switch back to your Google Antigravity browser tab.
Look at the bottom panel of the workspace. If you don't see a terminal, click the menu (top left) or press Ctrl + ~ (or Cmd + ~ on Mac) to toggle the Terminal pane.
You should see a prompt ending in $ waiting for you.

Step 4: Configuring and Initializing Git

Now, let's tell the workspace who we are and tell Git to start tracking our folder.

Configure your Git name by typing this exact command in the terminal (replace Your Name with your real name) and press Enter:
```
git config --global user.name "Your Name"
```
Configure your email by typing this command (replace your-email@example.com with your GitHub registration email) and press Enter:
```
git config --global user.email "your-email@example.com"
```
Initialize the Git tracking system in our folder. Type this command and press Enter:
```
git init
```
- What this does: Creates a hidden .git folder inside your workspace. Git is now actively watching your project!

Step 5: Staging and Committing Your File (Taking a Checkpoint)

Before we take a snapshot, we must place our files on the "staging launchpad."

Add your index.html file to the staging launchpad. Type this and press Enter:
```
git add index.html
```
Verify what is on the launchpad:
```
git status
```
- You should see new file: index.html printed in green.
Press the button to take our first permanent snapshot checkpoint! Type this command exactly and press Enter:
```
git commit -m "My first webpage snapshot"
```
- What this does: The -m stands for "message". It attaches a helpful note to our checkpoint so we know what we did.

Step 6: Pushing Your Code to the Cloud (GitHub)

Now, let's link our workspace to our GitHub cloud folder and send the files up!

Create a standard master trunk line named main. Type this and press Enter:
```
git branch -M main
```
Tell Git the exact URL of your remote GitHub folder. Copy and paste this command directly from your open GitHub browser page (it will look exactly like this, but with your own GitHub username):
```
git remote add origin https://github.com/YOUR_USERNAME/my-first-website.git
```
Send your code snapshot to the cloud! Type this command and press Enter:
```
git push -u origin main
```
GitHub Authentication popup: A visual browser window will pop up asking for permission. Click the button that says "Authorize GitCredentialManager" or "Sign in with your browser" and verify using your GitHub credentials.

Once the terminal prints Branch 'main' set up to track remote branch 'main' from 'origin', your code has safely traveled to the cloud!

Verification: Did it work?

Let's verify that your files are safe in the cloud:

Go back to your open GitHub tab in your web browser.
Refresh the page (F5 or click reload).
Instead of the setup instructions page, you should now see your file index.html listed cleanly with your commit note "My first webpage snapshot"!
Click on index.html to see your code saved beautifully in GitHub's cloud viewer.

What's Next?

So spectacular! You have saved a permanent checkpoint of your code and uploaded it safely to the GitHub cloud. Your code is now protected forever.

But right now, people can only view the raw code lines on GitHub—they cannot visit your webpage as a visual website on the internet. In Session 5, we will learn how to obtain a custom domain name (like yourname.com or a free equivalent) so people can easily address your website!