Frontend Academy · Lesson

git init add commit and status

Initialize a repository, stage changes with git add, create commits, and read git status and git log to understand the history.

git init add commit and status is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Version Control?

Git tracks every change to your code over time. You can see what changed, when, and why. Mistakes are recoverable. Multiple people can work on the same codebase. Every professional team uses Git.

git init — Start a Repository

Run git init in any folder to initialise a Git repository. Git creates a hidden .git directory that stores the entire project history.

mkdir my-project && cd my-project
git init
# Initialized empty Git repository in ./my-project/.git/

The Three Areas

Git has three areas: Working Directory (files you edit), Staging Area (files marked for the next commit), Repository (committed history). The staging area lets you craft precise commits.

git status — What's Changed?

git status shows which files are untracked, modified, or staged. Use it constantly during your workflow to understand the current state.

git status
# Output:
# On branch main
# Changes not staged for commit:
#   modified: index.html
# Untracked files:
#   styles.css

git add — Stage Changes

git add filename stages a specific file. git add . stages all changes in the current directory. git add -p stages changes interactively (hunk by hunk).

git add index.html           # stage one file
git add src/                 # stage a directory
git add .                    # stage everything
git add -p                   # interactive staging

git commit — Save a Snapshot

git commit -m 'message' creates a permanent snapshot of staged changes. The message should describe why the change was made, not what. Each commit has a unique SHA hash.

git commit -m 'feat: add user authentication form'
git commit -m 'fix: correct email validation regex'
git commit -m 'refactor: extract validation into helper function'

Conventional Commits

Many teams use the Conventional Commits format: type(scope): description. Common types: feat, fix, refactor, test, docs, chore, perf. This enables automated changelog generation and semantic versioning.

feat(auth): add Google OAuth login
fix(cart): prevent duplicate item addition
docs(api): add rate limit documentation
chore(deps): upgrade React to 18.3

git log — View History

git log shows the commit history. git log --oneline shows a compact one-line-per-commit view. git log --graph draws the branch structure.

git log --oneline --graph
# * a1b2c3d feat: add dark mode toggle
# * d4e5f6g fix: resolve mobile nav overflow
# * 7h8i9j0 refactor: extract theme hook

git diff — See What Changed

git diff shows unstaged changes. git diff --staged shows staged changes. git diff HEAD shows all changes since the last commit.

The .gitignore File

List files and directories to exclude from version control in .gitignore. Always ignore node_modules, .env, dist, and build directories. GitHub provides gitignore templates for every language and framework.

# .gitignore
node_modules/
dist/
.env
.env.local
*.log
.DS_Store
coverage/

git restore — Undo Unstaged Changes

git restore filename discards changes to a file in the working directory, reverting it to the last committed version. Destructive — changes are lost.

git restore index.html        # discard unstaged changes
git restore --staged file.js  # unstage without losing changes

Quick Check

What does git add . do?

Recap: Core Git Commands

git init starts a repo. git status shows current state. git add stages files. git commit saves a snapshot with a message. git log shows history. git diff shows changes. .gitignore excludes files. Always write meaningful commit messages that explain why, not what.

Frequently asked questions

Is the “git init add commit and status” lesson free?

Yes — the full text of “git init add commit and status” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “git init add commit and status”?

Initialize a repository, stage changes with git add, create commits, and read git status and git log to understand the history. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “git init add commit and status” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy