Day 5: Sharing With the World

Time commitment: ≈ 20 minutes (+ video)

Welcome to Day 5!

Today you'll learn how developers save, track, and share their work using Git and GitHub.

By the end of this lesson, your AI chat interface will be backed up online—and you'll understand the daily workflow every professional engineer uses.

Before We Start

You should have your AI chat interface project cleaned up and working from Day 4. It should be in its own folder (like ai-chat-interface or ai-text-generator) with just the chat functionality—no extra HTML/CSS from earlier lessons.

If you haven't done this yet, go back to Day 4 and complete the challenge to create a standalone chat interface.

Video Context

In the video, you'll see me using iTerm2 on a Mac, and my Git/GitHub are already configured. That means I won't see first-time authentication prompts, but you might—and that's completely normal.

Passwords: When Git asks for your password, it won't show what you're typing for security reasons. Just type and press Enter—it's working even though you can't see it.

🎥 Watch: Git & GitHub — The Daily Workflow

Follow along as we initialize Git, create a repo on GitHub, protect your API key, and push your project.

Why Git and GitHub Matter

Collaboration & Team Work — Multiple people can work without overwriting each other.
Version Control — Every change is a checkpoint; you can always roll back.
Portfolio & Proof — Public record of projects and growth.
Industry Standard — Used everywhere, from Big Tech to startups.

About the green squares: Nice to have, not everything—many senior devs have empty graphs due to private work.

What Are Git and GitHub?

Tool	Purpose	Analogy
Git	Tracks changes to code locally on your computer	“Track Changes” for programmers + time machine
GitHub	Cloud hosting for Git repositories	Google Drive + social network for developers

Git lives on your computer. GitHub lives on the internet.

Step 1: Install Git (If You Haven't Already)

Follow the installation guide at git-scm.com.

git
git --version
git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Step 2: Create a GitHub Account

Go to github.com → Sign Up → Verify your email. Use a professional username.

Step 3: Create a New GitHub Repository

GitHub → + (top right) → New repository
Name it ai-text-generator (or your folder name)
Keep it Public
Do NOT initialize with README, .gitignore, or license
Click Create repository

Step 4: Open Your Project in VS Code Terminal

Open your project folder in VS Code
Terminal → New Terminal
Ensure you’re in the correct directory

Helpful commands:

pwd — where am I?
ls — list files
cd folder-name — go into a folder
cd .. — go up one directory

Windows: Install Git Bash to use the same commands.

Step 5: Protect Your API Key

Before pushing to GitHub, keep your Gemini API key out of the repo.

Create `config.js`

window.API_KEY = 'YOUR_ACTUAL_GEMINI_API_KEY_HERE';

Update `script.js`

Use the key from config.js without hardcoding it again:

const API_KEY = window.API_KEY; // read from config.js

Load order in `index.html`

<script src="config.js"></script>
<script src="script.js"></script>

Why this order? script.js needs the key available, so config.js must load first.

Step 6: Create `.gitignore`

# Keep API keys private
config.js

# macOS system files
.DS_Store

Step 7: Initialize Git and Make Your First Commit

git init
git status
git add .
git commit -m "Initial commit: AI text generator"

Step 8: Connect to GitHub and Push

git remote add origin https://github.com/YOUR-USERNAME/ai-text-generator.git
git push -u origin main

Auth: If prompted, type your username and password (or a Personal Access Token). Your typing won’t appear—that’s normal.

Step 9: Verify It Worked

Refresh your repo on GitHub. You should see:

index.html
style.css
script.js
.gitignore

And not config.js. Perfect.

Step 10: Make a Change and Push Again

Make a change

// Updated: improved error handling

Check diff, commit, push

git status
git diff   # press Q to exit
git add .
git commit -m "Remove comments and clean up code"
git push

Understanding Git Commands

Command	What It Does
`git status`	Shows what files changed
`git diff`	Shows exact changes
`git add .`	Stages all changes
`git commit -m "msg"`	Creates a checkpoint
`git push`	Uploads commits to GitHub
`git log`	Shows commit history

Viewing Your Commit History

On GitHub, click “X commits” to see who changed what and when.

Common First-Time Issues

Issue	Solution
Password prompt shows nothing	Normal—type and press Enter
Authentication failed	Use a Personal Access Token
Permission denied (publickey)	Use HTTPS or set up SSH keys
`git: command not found`	Install Git or fix PATH
Line-ending warnings	Safe to ignore
`.DS_Store` in repo	Add to `.gitignore`

Why Not GitHub Pages (Yet)?

Because you’re using an API key. On a public site, anyone can view source/console and steal it. Later you’ll learn to deploy with a backend and environment variables.

Helpful Resources

Official Docs

Videos

Key Takeaways

git init starts tracking
git add . stages changes
git commit -m makes a checkpoint
git push publishes to GitHub
Use .gitignore to protect secrets (like API keys)

Your Challenge

Make a small change
Run the workflow:

git status
git add .
git commit -m "Your message here"
git push

Verify the update on GitHub
Share your repository link

What You’ve Accomplished

✅ Built a website with HTML and CSS
✅ Added interactivity with JavaScript
✅ Connected to a real AI API
✅ Created a working chat interface
✅ Stored your code on GitHub using Git

You’re working like a real developer. Keep going.