Ch. 05 — Git & GitHub
Chapter 05

Git & GitHub: Saving and Sharing Your Work

Git is not scary. It's just a very obsessive save system.

⏱ 1 hour 🛠 GitHub Desktop (free) · GitHub account (free)

Why you need this

Every developer uses Git. Every company that builds software uses GitHub (or a similar platform). When you join a team or freelance for a company, code lives on GitHub. Knowing how to put your work there, get work from there, and not accidentally break things makes you a real collaborator — not just someone who hands over a Figma file and hopes for the best.

But there's an even more immediately useful reason: GitHub Pages. By the end of this chapter, you'll have a real live website with a real URL, hosted for free, that you can share with anyone in the world. No credit card. No server. No hosting bill.

Git: the obsessive save system

You know how when you're working on a big Figma file, you sometimes duplicate it before making a major change — just in case? "Landing Page v2 — before rebrand" and "Landing Page v3 — after rebrand FINAL"? Git replaces that messy system with something that actually works.

Git watches your project folder and remembers every single change you've ever saved to it. Instead of duplicating files, you "commit" — you save a labeled snapshot of your project at that moment in time. You can have hundreds of commits and jump back to any of them instantly. Nothing is ever lost.

  • Repository (repo) = a project folder that Git is watching. "I'm in the repo" means "I'm in the project folder."
  • Commit = a saved snapshot of your project with a short message describing what changed. Like a Figma version history label, but for code.
  • Branch = a parallel version of your project where you can make changes without affecting the main version. When the changes are ready, you "merge" them in. For now, you'll work only on the "main" branch.
📖 Jargon decoded
What's the "terminal" (and do you need it)?
The terminal (also called "command line" or "shell") is a text-based way to control your computer. Git was originally designed for the terminal. However, GitHub Desktop — a free app — lets you use Git visually without ever opening the terminal. Start there. You can learn terminal commands later if you want to go faster, but it's not required for this course.

GitHub: your code's home on the internet

Git lives on your computer. GitHub is a website that stores your Git repos online. Think of it like Dropbox, but specifically designed for code — with version history, collaboration tools, and the ability to let others see and contribute to your work.

When you "push" to GitHub, you're uploading your local commits to the online repo. When your teammates "pull" from GitHub, they download the latest changes to their machines. This is how software teams work on the same codebase without overwriting each other's work.

The basic Git workflow

  • Write or change files — you do your work in VS Code as usual
  • Stage — select which changed files to include in this snapshot (GitHub Desktop shows you a checklist)
  • Commit — write a short message describing what you changed ("Add nav bar", "Fix button color", "Make layout responsive") and save the snapshot
  • Push — upload your commits to GitHub so they're online and backed up
💡 Good commit messages
Write them like you're leaving a note for your future self
"Update" or "Fix stuff" or "Changes" are useless commit messages. In 6 months, you won't remember what you changed. Write: "Add mobile responsive layout to homepage" or "Fix button hover state color." Clear, specific, past-tense. Your future self will thank you.

GitHub Pages — free website hosting in 2 minutes

GitHub has a feature called GitHub Pages. If your repo has an index.html file and you turn on GitHub Pages in Settings, GitHub will serve that file as a live website for free. No hosting costs. No server setup. Just files on GitHub, live on the internet.

Your website will live at: https://[your-username].github.io/[repo-name]/

This is how this course website is hosted. It's how hundreds of thousands of designers and developers share their portfolios, projects, and experiments. It's completely free and it takes about 2 minutes to set up.

🎯 Real-world use
Every project you build can be shared
Every exercise in this course can be put on GitHub Pages. Your card from Chapter 02, your landing page from Chapter 03, your button from Chapter 04 — all of these can become real, sharable URLs. Start building a portfolio of living, breathing projects, not just Figma files. A designer who can share a working URL is fundamentally more impressive than one who shares a screenshot.
🌐
Hands-on activity
Get your first website live on the internet
You need: GitHub account (free — github.com) GitHub Desktop (free — desktop.github.com) VS Code
  1. 1
    Create a free account at github.com. Choose a username you're comfortable sharing — it'll be in your website's URL.
  2. 2
    Download GitHub Desktop at desktop.github.com (free). Install it and sign in with your GitHub account.
  3. 3
    In GitHub Desktop: File → New Repository. Name it my-first-site. Set the local path to your Desktop. Click "Create Repository."
  4. 4
    Open that new folder in VS Code (in GitHub Desktop: Repository → Open in Visual Studio Code). Create a file called index.html. Paste in your card HTML from Chapter 02, or ask Claude to generate a simple personal page.
  5. 5
    Back in GitHub Desktop, you'll see index.html listed under "Changes." In the bottom left, type a commit message: "Add homepage". Click "Commit to main."
  6. 6
    Click "Publish repository" (top right in GitHub Desktop). Make sure "Keep this code private" is unchecked (it needs to be public for GitHub Pages). Click "Publish Repository."
  7. 7
    Go to github.com, find your repo, click Settings → Pages (left sidebar). Under Source: select "Deploy from a branch" → Branch: main → /(root) → Save.
  8. 8
    Wait 1–2 minutes. Refresh the Pages settings page. You'll see a green message: "Your site is published at..." — that URL is your live website. Share it.
Key takeaways
  • Git is a save system that remembers every change you've ever made — nothing is ever lost
  • A commit is a labeled snapshot of your project at a moment in time
  • GitHub stores your repos online and makes collaboration possible
  • GitHub Desktop lets you use Git without the terminal — start there
  • GitHub Pages = free, instant website hosting — every project you build can have a real URL
  • Good commit messages are short, specific, and past-tense: "Add responsive nav bar"