Lesson 2: Your First Repository
What You'll Learn
In this lesson, you'll create your first Git repository and start tracking a simple project. You'll see how Git monitors changes to your files.
What is a Repository?
A repository (or "repo") is a project folder that Git tracks. It contains:
- Your project files (code, images, documents, etc.)
- A hidden
.gitfolder where Git stores all version history
Think of it as: A regular folder with superpowers - Git watches every change you make.
Part 1: Creating a Project Folder
First, let's create a folder for your project. We'll make a simple website project.
Step 1: Open Terminal
Open the Terminal app on your Mac (Applications → Utilities → Terminal).
Step 2: Navigate to Your Projects Folder
Let's go to your home directory and create a projects folder:
cd ~
mkdir projects
cd projects
What each command does:
cd ~- Go to your home directorymkdir projects- Make a new folder called "projects"cd projects- Enter the projects folder
Step 3: Create Your Project Folder
mkdir my-first-repo
cd my-first-repo
Now you're inside a folder called my-first-repo. This will become your Git repository.
Part 2: Initializing a Git Repository
Now let's tell Git to start tracking this folder.
The git init Command
Run this command inside your project folder:
git init
You should see:
Initialized empty Git repository in /Users/yourname/projects/my-first-repo/.git/
What Just Happened?
Git created a hidden .git folder inside your project. This folder contains:
- All your version history (commits)
- Configuration settings
- Information about branches
To see the hidden .git folder:
ls -la
The -la flag shows all files, including hidden ones (those starting with a dot).
Part 3: Creating Your First File
Let's create a simple HTML file to track with Git.
Option 1: Create File in Terminal
echo "<h1>My First Git Project</h1>" > index.html
Option 2: Create File in VS Code
- Open VS Code
- File → Open Folder → Select
my-first-repo - Click the "New File" icon
- Name it
index.html - Add this content:
<!DOCTYPE html>
<html>
<head>
<title>My First Git Project</title>
</head>
<body>
<h1>Hello Git!</h1>
<p>This is my first file tracked by Git.</p>
</body>
</html>
Save the file (Cmd + S).
Part 4: Checking the Status
Now let's see what Git thinks about our file.
The git status Command
This command shows you what's changed in your repository:
git status
You should see something like:
On branch main
No commits yet
Untracked files:
(use "git add <file>..." to include in what will be committed)
index.html
nothing added to commit but untracked files present (use "git add" to track)
Understanding the Output
| Term | What It Means |
|---|---|
| On branch main | You're on the main branch (the default branch) |
| No commits yet | You haven't saved any snapshots yet |
| Untracked files | Git sees the file but isn't tracking it yet |
| index.html | The file that's not being tracked |
Part 5: Understanding Git's Three States
Files in a Git repository can be in three states:
| State | Description | Command to Move Here |
|---|---|---|
| 1. Working Directory | Files you're currently editing (modified but not staged) | Just edit the file |
| 2. Staging Area | Files marked to be included in the next commit | git add |
| 3. Repository | Files permanently saved in Git history | git commit |
Real-world analogy:
- Working Directory = Shopping cart (you're still picking items)
- Staging Area = Checkout line (items you've decided to buy)
- Repository = Receipt (purchase is complete and recorded)
Visualizing Your Repository
Right now, your file is "untracked" - Git sees it but isn't watching it yet:
Your Computer:
├── my-first-repo/
│ ├── .git/ (Git's hidden folder - empty so far)
│ └── index.html (Untracked - Git sees it but ignores it)
In the next lesson, you'll learn how to add this file to the staging area and make your first commit!
Practice Exercise
Before moving to the next lesson, try these tasks:
- Create another file called
README.mdwith some text - Run
git statusand see both untracked files - Create a folder called
cssand add a filestyle.cssinside it - Run
git statusagain - what do you see?
Commands to try:
# Create README file
echo "# My First Repo" > README.md
# Check status
git status
# Create CSS folder and file
mkdir css
echo "body { margin: 0; }" > css/style.css
# Check status again
git status
Summary
Commands Learned
| Command | What It Does |
|---|---|
git init |
Initialize a new Git repository in the current folder |
git status |
Show the current state of your repository |
Key concepts:
- A repository is a folder tracked by Git
git initturns a regular folder into a Git repository- The
.gitfolder stores all version history git statusshows what's changed- New files start as "untracked"
What's Next?
In the next lesson, you'll learn the basic Git commands to add files to the staging area and make your first commit. You'll start building your project's history!