# Git for non-coders | Envisioning

Source: https://www.envisioning.com/learn/git

---

Skip to guide

[Coding for Non-Coders](/coding-for-non-coders)

# Git for non-coders

Git is a program that saves versions of your project, so you can go back when something breaks. GitHub is a website where people keep a shared copy. If you build with AI tools you will run into both, usually right after something breaks.

Six short chapters, starting with a single file. Boxes marked Try it are interactive. Everything else is just reading, and nothing here touches your computer.

Start with one file

---

01One file02Saving03Going back04Branches05GitHub06Advanced

---

01

## Git keeps every version of a file

You have probably saved a file as final, then final-2, then final-REAL. Git keeps one file and remembers every version of it. Start with a single file, the page for an event called Open Studio, and save it a few times both ways.

Try itEdit the page, then see what each side keeps. Four edits.

openstudio.site

Open Studio

Come and see what we are making.

RSVP

Your next edit

Add the date

Make this edit and save it

Without Git: a copy for every save

-   index.html

With Git: one file, every version kept

index.html

first draft

Latest: First draft, saved by you

One save. So far both sides look the same: one file. On the right, Git has stored it as the first saved version.

-   a saved version
-   the one you just saved

Drive and Dropbox keep old versions too, but one file at a time and on their own schedule. Git saves a version when you tell it to, and gives it a name.

02

## You decide what goes into each saved version

Real projects are folders with more than one file. This one now has two: index.html for the words and styles.css for the look. A saved version holds every file in the folder, and you choose when to save and which changes to include. That matters most when an AI edits several files at once and only some of the edits are good.

Try itClick Send to the AI, then pick which changes to save.

You asked the AI: “Make the page dark and add an RSVP button.”

Send it, and the AI edits two files. Then pick what goes into each saved version.

Start over

Your folder

Where the files get edited

Up to date

index.html

The words on the page

styles.css

How the page looks

Next version

What you picked to save

Empty

Nothing picked yet

Saved versions

Newest at the bottom

2 saved

1.  First draft
    
    earlier
    
2.  Add the date
    
    just saved
    

You asked the AI for two things. Nothing has changed yet, so there is nothing to save.

Send to the AISave version

In Git words: a saved version is a `commit`, and it holds every file in the folder as it was. Picking files for it is _staging_, done with `git add`. `git status` lists what changed and `git diff` shows the lines: the difference between two versions is a _diff_.

03

## You can open any saved version, and undo the bad one

Later, the AI redesigned the layout and the page stopped working. Every earlier version is still there. First look back at one. Then undo the damage.

Try itClick any page in the line to open that version.

first draftadd datedark themenew layout

-   ▼you are here
-   the version that broke the page

openstudio.site

This page isn't working

TypeError: layout is undefined

Redesign the layout

This is the latest version, and the AI's redesign broke the page. Click dark theme, the one before it.

In Git words: `git log` lists the versions. `git checkout` opens one of them. The “you are here” marker is called `HEAD`.

### Looking back does not undo anything

To actually undo a change, it matters whether you saved it as a version yet.

Try itChoose what happened to see how to undo it.

What happened?

I changed a file but haven't saved it yetI saved it as a version

Pick one on the left

In Git words: `git restore` discards unsaved edits. `git revert` saves a version that cancels an earlier one.

04

## A branch is a second line of versions

Going back fixes a mistake after it happens. A branch keeps the mistake away from the working version in the first place: you try the idea on its own line, and join it to main once it works.

Try itClick through the steps to try an idea and merge it.

A second line of versions

You are on main

main

main is the line of versions people see, three so far. You want to try a new layout without touching it.

Start a branch Start over

In Git words: `git switch -c try-new-layout` starts a branch, `git switch main` takes you back, and `git merge` joins them. main is only a name. It is the one everyone agrees to treat as the real version.

AI coding tools often work this way without being asked. Each task gets its own branch, and it is merged only after someone checks it.

05

## GitHub is one more copy of the same project

So far everything happened on one computer. Each box below is a full copy of the project, with every version. Git copies versions between boxes, and GitHub is the box everyone can reach. Follow your new layout from your computer to a teammate's.

Try itClick Next to follow your new layout from your computer to your teammate's.

1.  1Commit
2.  2Push
3.  3Pull request
4.  4Merge
5.  5Pull

Your computerGitHubTeammate's computercloneclone

-   a version everyone has
-   your new layout
-   proposed, not merged yet

GitHub holds the project, and you and a teammate have each copied it to your computers, so both have every file and the same three versions. You save the new layout on a branch. It exists only on your computer. Nobody else can see it, and this step works offline.

git commit

Next

Git and GitHub are separate things

Git keeps the versions and works with no internet at all. GitHub is one website that hosts a copy. GitLab and Bitbucket do the same job. Someone with no access to your project can fork it: copy the whole thing into their own account, change it there, and send changes back with a pull request.

Your AI tool already knows these words

Claude Code, Cursor and similar tools can commit, push and open pull requests for you. Ask in plain words: “commit this”, “push the branch”, “open a PR”. A pull request asks the project to pull your branch in. It has nothing to do with `git pull`, which confuses everyone at first.

In Git words: if two people change the same line, Git stops the merge and asks a person to pick one. That is a _merge conflict_. Your editor shows a button for each option, and an AI assistant can resolve one if you tell it which version is right.

06

## Three ideas for when you run several things at once

The five chapters above are enough to work with an AI tool. These come up later, once you have more than one task, branch or AI session going. Each one is a single picture.

### Worktrees: one project, several folders

Two AI sessions in the same folder overwrite each other's edits. A worktree gives each one its own folder on its own branch, while all of them share one history.

Nothing is copied twice, and merging works as usual. `git worktree add`

One repositoryevery version, kept onceFolder 1mainits own filesFolder 2try-new-layoutits own filesFolder 3fix-bugits own files

### Stash: park unsaved edits

You are half-way through a change and need to switch branches, but Git will not switch with unsaved edits in the way. Stash puts them on a shelf and leaves the folder clean. Pop brings them back.

`git stash` and `git stash pop`

Half-finishedfoldershelfunsaved edits→git stashfoldershelffolder is clean→git stash popfoldershelfedits are back

### Cherry-pick: take one version, leave the rest

A branch has three saves and only the middle one is good. Cherry-picking copies that one onto main and ignores the others. The copy is a new version with the same change.

`git cherry-pick` followed by the version

mainbranchxgood fixzcopy of the fixcherry-pick

## Now build something of your own.

Coding for Non-Coders has project ideas, tools, and ways to build with AI.

[Back to the guide](/coding-for-non-coders)
