webroad.online
  1. 1Web
  2. 2HTML
  3. 3CSS
  4. 4JavaScript
  5. 5TypeScript
  6. 6Git
  7. 7Tooling
  8. 8React
  9. 9State management
  10. 10Next.js
  11. 11Forms
  12. 12Data and backend
  13. 13SEO
  14. 14Tailwind CSS
  15. 15Animations
  16. 16Testing
  17. 17Architecture
Git · Lesson 1 of 3

Git: the basics

Repo, commit, staging area, everyday commands and .gitignore.

Updated

What Git is

Git is a version control system: it keeps the full history of the project — every change, who made it, when and why. You can go back to an earlier version at any time, work in parallel with others and try ideas without breaking what works.

GitHub (or GitLab) is a service that hosts Git repositories online and adds collaboration: pull requests, review, CI. Git ≠ GitHub.

The core concepts

Term What it is
repository (repo) the project + its whole history (the hidden .git folder)
commit a "snapshot" of the project at a point in time, with a message
branch an independent line of development (the next lesson)
remote the copy of the repo on the server (origin)
HEAD where you are right now in the history

The 3 areas

Git has three "places" a change passes through:

working directoryyour filesgit add→staging areawhat goes into the commitgit commit→repositorythe history

The staging area (the index) lets you choose exactly what goes into a commit — you can change 5 files and make two separate, logical commits.

Everyday commands

Command What it does
git status what changed and what's staged — run it often
git diff the changes not yet staged
git add <file> / git add -p stage (the whole file / piece by piece)
git commit -m "message" creates the commit
git log --oneline the history, compact
git pull fetches and integrates the changes from the remote
git push sends your commits to the remote
git restore <file> throws away uncommitted changes in a file
git stash / git stash pop puts changes aside temporarily

A good commit

  • Small and logical — a single change (a bug, a small feature). Easy to read in review, easy to undo.
  • A message that says why, not just what: "fix: keep the cart after login" > "update".
  • The code works after every commit (the build isn't broken).

.gitignore

The .gitignore file says what never goes into Git:

node_modules/        # dependencies — reinstalled from package-lock
.next/               # the build
.env*                # SECRETS — never in Git
*.log
.DS_Store

If you accidentally put a secret in a commit and pushed it, consider it compromised: change it (rotate the key), don't just delete it from the code.

Undoing mistakes — kinds and when

Situation Command
uncommitted changes in a file git restore file
you staged something by mistake git restore --staged file
the last commit has a wrong message / you forgot a file (you haven't pushed yet) git commit --amend
undoing a commit that's already published git revert <hash> — creates a new commit that does the opposite
"I broke everything locally" git reflog — the history of every HEAD position, from which you can recover almost anything

The golden rule: don't rewrite published history (amend, rebase, reset on commits already pushed to a shared branch).

Summary

  • Git = version history; GitHub = hosting + collaboration.
  • working directory → add → staging → commit → history.
  • Small, logical commits with clear messages; secrets in .gitignore.

Official sources

Exercises

Was this page helpful?

One tap — no account needed.