Whether you’re just starting in web development, data science, or software engineering, mastering Git and GitHub is crucial. This tutorial will help you understand what Git and GitHub are, the basic Git commands you need to know, and how you can use their features to boost your work efficiency.
What is Git, and Why Should You Use It?
Git is a version control system that helps you track changes made to your files over time, almost like a time machine for your code. It allows you to revert to previous versions of your project whenever needed. You can also create branches, which are like copies of your files where you can safely experiment and make changes. Later, you can merge those changes back into the original version once you’re happy with them.
Imagine you’re writing a book. Every day, you make changes—add paragraphs, rewrite chapters, fix typos. But one day, you make a huge mistake and lose a whole section. How do you go back? This is where Git comes in. Git is a tool that helps you save snapshots of your project over time, so you can:
- Review and restore previous versions
- Work on new features without touching your original code
- Collaborate with others without overwriting their work
It’s like having a superpowered undo button, combined with a diary that records every change.
What is GitHub?
GitHub is an online platform that hosts your Git repositories, making them accessible from anywhere. Think of it like cloud storage for your code. Imagine you’re working on a project at home. Later, while you’re at a friend’s place, you suddenly think of the perfect fix for a bug that’s been bothering you for days—but your computer isn’t with you.
If your project is stored on GitHub, no worries! You can simply use any computer to clone (download) your project using a Git command. After making your changes, you can push the updated version back to GitHub, keeping your project up to date no matter where you are.
What is Version Control?
Version control means managing changes to your files in a structured way. Instead of duplicating folders like this:
1 2 3 |
my-portfolio-v1/ my-portfolio-v2-final/ my-portfolio-v3-final-final-this-one/ |
- Saves every change with a message (called a commit)
- Allows you to track who changed what and when
- Let multiple people work on the same project without stepping on each other’s toes. Think of it as Google Docs’ version history, but for code—and much more powerful.
Git vs GitHub — Side-by-Side Comparison
Feature | Git | GitHub |
---|---|---|
What it is | Version control system | Web-based platform for Git projects |
Where it runs | On your computer | In the cloud (on GitHub’s servers) |
Track versions? | Yes | No (relies on Git for that) |
Store code? | Yes (locally) | Yes (online) |
Collaborate with others? | Not by itself | Yes (pull requests, issues, etc.) |
Requires internet? | No | Yes |
Popular use case | Saving code history | Sharing code and working as a team |
Getting Started: Core Git Commands Explained
- Initialize Git in a Project Folder: Navigate to your project folder in the terminal and run:
git init
. This creates a hidden .git folder that starts tracking changes. - Check What’s Changed:
git status
. Shows you which files have been added, modified, or removed. - Stage Your Changes:
git add index.html
. Adds index.html to the “staging area,” meaning you’re preparing it for the next snapshot (commit). To add all files at once:git add
. - Commit (Save) Your Changes:
git commit -m "Add homepage layout"
. Commits the staged files with a descriptive message, like saving your work with a sticky note attached. - View Your History:
git log
. See every commit you’ve made—like a changelog or revision history.
How to configure GitHub
Before you start using Git to track changes in your projects, there are a couple of important setup steps to complete. These help Git know who you are, so it can keep track of changes made by you and others. Open your terminal (Command Prompt, Git Bash, or Terminal on macOS/Linux) and type: git --version
Now that Git is installed, tell it who you are. This information is used in every commit message, helping others (and future-you) see who made each change. To set your username and email, run the following:
1 2 |
git config --global user.name "Jane Doe" git config --global user.email "jane.doe@gmail.com" |
Cloning a Repository
If you want to download a copy of a GitHub repo to your local machine:
1 |
git clone https://github.com/username/repo-name.git |
Push the repository to GitHub
After you create the repo, you should be redirected to a page that tells you how to create a repo locally or push an existing one.
1 2 3 |
git remote add origin https://github.com/aronno1920/git-and-github-tutorial.git git branch -M main git push -u origin main |
Branching and Merging
Branches let you test new ideas without messing up your main project.
1 2 3 4 5 |
# Create a branch git branch add-footer # Switch to that branch git checkout add-footer |
Make your changes, then merge them back:
1 2 3 4 5 |
# Go back to main git checkout main # Merge the new feature git merge add-footer |
Typical Project Folder Structure
Keeping your project clean is just as important as writing good code. Here’s a common folder structure for a web app:
1 2 3 4 5 6 7 8 9 |
my-project/ ├── .gitignore # Tells Git what NOT to track ├── README.md # Project description ├── package.json # App config & dependencies ├── public/ # Static files (images, HTML) ├── src/ # App source code │ ├── index.js │ └── components/ └── tests/ # Unit tests |
Best Practices for Using Git and GitHub.
Write Clear Commit Messages: Each commit message should explain why the change was made.
1 |
git commit -m "Fix bug in login form validation" |
Don’t track files that change often or are machine-specific (like node_modules
, .env
, or log files). Example .gitignore
:
1 2 3 |
node_modules/ .env .DS_Store |
Keep Your Commits Small and Focused
1 2 3 |
git commit -m "Add homepage layout" git commit -m "Fix navbar alignment" git commit -m "Remove unused footer section" |
Leave a Comment