Git Basics for Vibe Coders

You often don’t fully understand what the AI just generated. Sure, it looks right, and it might even work until you realize it broke something else. Or when that “small improvement” turns into a complete rewrite you wish you could undo.

That’s where Git comes in. Git is a version control system in short it is your personal safety net and undo button for code. It tracks every change, every experiment, every mistake, and lets you roll back whenever you need to. Think of it as keeping a detailed history of your codebase, so nothing is ever truly lost.

Using Git on macOS

If you’re on a Mac, you likely already have Git installed — it comes bundled with the Xcode Command Line Tools. To check, open Terminal and type:

git --version

You should see a response like:

git version 2.50.1 (Apple Git-155)

If you don’t see a version number, you’ll need to install the Xcode Command Line Tools, which include Git, by running:

xcode-select --install

This command will open a small installer window. Follow the prompts to install the tools. Once installed, Git will be available system-wide. You only need to do this once — after that, you can use Git directly from Terminal or through any code editor like VS Code.

Why use Git in your workflow

  • History - revisit old versions and understand what changed and why.
  • Collaboration - work with others without overwriting each other’s progress.
  • Freedom - try bold ideas safely in branches, then merge what works.

The Git basics to get started

Here’s a quick walkthrough of essential Git commands and what they do:

Initialize a new Git repository

This command creates a hidden .git folder in your project, allowing Git to start tracking your files.

git init

Stage your changes

This command tells Git which files to include in the next commit, in this case, all files in the project.

git add .

Save a snapshot of your progress

The message helps you remember what changed in this version.

git commit -m "One line describtion what you did"

Create a new branch

Branches let you work on new ideas or features without affecting your main code.

git branch dev

Switch to your new branch

You’re now working in an isolated environment where you can safely make changes.

git checkout dev

How to Revert Changes in Git

Git lets you undo mistakes at different stages of your workflow:

Undo changes in a file before committing

Restores the file to its last committed state.

git checkout -- filename

Unstage a file you accidentally added

Removes the file from the staging area without deleting your changes.

git reset HEAD filename

Revert a commit after it has been committed

Creates a new commit that undoes the changes from a previous commit.

git revert commit-hash

Reset your branch to a previous commit

Resets your branch to a specific commit, discarding all changes after it. Use with caution, as this is destructive.

git reset --hard commit-hash

Try Git with a Simple Project

Now that you know the basics, let’s practice Git with a simple example project.

  1. Create a new directory and files:
mkdir vibe-demo
cd vibe-demo
touch index.html style.css
  1. Add basic content:

In index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Vibe Demo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello VibeCoders!</h1>
  </body>
</html>

In style.css:

body {
  font-family: sans-serif;
  background: #f4f4f4;
  text-align: center;
}
h1 {
  color: #333;
}
  1. Initialize Git and make your first commit:
git init
git add .
git commit -m "Initial commit with index.html and style.css"
  1. Make a change and commit again: Add a new paragraph in index.html, then run:
git add index.html
git commit -m "Added intro paragraph to homepage"
  1. View your commit history:
git log

You’ll see a list of all your commits — your project’s timeline.

  1. Revert changes and experiment:

Let’s say you don’t like the new paragraph you just added. You can undo it in a few ways:

Undo uncommitted changes:

git checkout -- index.html

Restores the file to its last committed state.

Undo the last commit (but keep the changes in your files):

git reset --soft HEAD~1

Completely undo the last commit (discard changes):

git reset --hard HEAD~1

Revert a specific commit safely:

git revert commit-hash

This exercise helps you see how Git captures every step of your creative process, and gives you the power to reverse it at any time.