DEV Community

Cover image for Git & GitHub: Your First Steps to Version Control
Abdelhakim Baalla
Abdelhakim Baalla

Posted on

Git & GitHub: Your First Steps to Version Control

#git #github #versioncontrol #webdev

👋 Follow Me for More Content!

Before we dive into Git and GitHub, let's connect! I regularly share programming tutorials, tips, and insights:

🔗 Portfolio: abdelhakim-baalla.vercel.app

💼 LinkedIn: abdelhakimbaalla

🖼️ Instagram: abdelhakim.baalla

📧 Dev.to: abdelhakim_baalla

Introduction

Have you ever worked on a project and wished you could go back to a previous version? Or maybe you're collaborating with friends on a coding project and keeping track of changes is becoming a nightmare?

Welcome to the world of version control! Today, we're going to explore Git and GitHub – two powerful tools that will revolutionize how you manage your code and collaborate with others.

Don't worry if you've never used a command line before or if terms like "repository" sound foreign. By the end of this guide, you'll understand what Git and GitHub are, why they're essential for developers, and how to use them step by step.

What is Version Control?

Imagine you're writing a book. You start with Chapter 1, then add Chapter 2, make some edits to Chapter 1, add Chapter 3, and so on. Now imagine you want to:

  • See what your book looked like last week
  • Compare two different versions of Chapter 2
  • Work with a co-author without overwriting each other's changes
  • Keep a backup of your work that's accessible from anywhere

This is exactly what version control does for your code! It's like having a time machine and collaboration tool rolled into one.

What is Git?

Git is a distributed version control system created by Linus Torvalds (the same person who created Linux) in 2005. Think of Git as a super-smart filing system that:

  • Tracks every change you make to your files
  • Lets you create different versions (called "branches") of your project
  • Helps you merge changes from different contributors
  • Keeps a complete history of your project

Key Git Concepts

Let's break down the essential Git terminology:

Repository (Repo): A folder that contains your project files and all the version history. It's like a project folder with superpowers!

Commit: A snapshot of your project at a specific point in time. Each commit has a unique ID and a message describing what changed.

Branch: A separate line of development. The main branch is usually called "main" or "master."

Clone: Making a copy of a repository on your computer.

Push: Uploading your local changes to a remote repository.

Pull: Downloading changes from a remote repository to your local computer.

What is GitHub?

GitHub is a web-based platform that hosts Git repositories in the cloud. While Git is the tool that tracks changes, GitHub is the online service where you can:

  • Store your repositories online
  • Share your code with others
  • Collaborate on projects
  • Showcase your work to potential employers
  • Contribute to open-source projects

Think of GitHub as Google Drive for programmers, but with powerful collaboration features built specifically for code.

Getting Started: Installation and Setup

Step 1: Install Git

For Windows:

  1. Go to git-scm.com
  2. Download the installer
  3. Run the installer with default settings

For Mac:

  1. Open Terminal
  2. Type: git --version
  3. If Git isn't installed, it will prompt you to install it

For Linux:

sudo apt-get update
sudo apt-get install git
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure Git

After installation, you need to tell Git who you are:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a GitHub Account

  1. Go to github.com
  2. Click "Sign up"
  3. Choose a username (this will be part of your GitHub profile URL)
  4. Enter your email and create a password
  5. Verify your account

Your First Git Repository

Let's create your first project and track it with Git!

Step 1: Create a Project Folder 

mkdir my-first-repo
cd my-first-repo
Enter fullscreen mode Exit fullscreen mode

Step 2: Initialize Git 

git init
Enter fullscreen mode Exit fullscreen mode

This creates a hidden .git folder that will track all your changes.

Step 3: Create Your First File

Create a simple file called README.md:

# My First Project

Hello, Git and GitHub!

This is my first repository.
Enter fullscreen mode Exit fullscreen mode

Step 4: Check Status 

git status
Enter fullscreen mode Exit fullscreen mode

You'll see that Git has detected your new file but isn't tracking it yet.

Step 5: Add Files to Staging 

git add README.md
Enter fullscreen mode Exit fullscreen mode

Or to add all files:

git add .
Enter fullscreen mode Exit fullscreen mode

Step 6: Make Your First Commit 

git commit -m "Add README file"
Enter fullscreen mode Exit fullscreen mode

Congratulations! You've made your first commit.

Connecting to GitHub

Now let's put your repository on GitHub so others can see it and you can access it from anywhere.

Step 1: Create a GitHub Repository

  1. Go to GitHub and click the "+" icon in the top right
  2. Select "New repository"
  3. Name it "my-first-repo"
  4. Keep it public
  5. Don't initialize with README (we already have one)
  6. Click "Create repository"

Step 2: Connect Your Local Repository

GitHub will show you commands to run. They'll look like this:

git remote add origin https://github.com/yourusername/my-first-repo.git
git branch -M main
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Step 3: Verify the Upload

Refresh your GitHub page, and you should see your README file!

Essential Git Commands

Here are the commands you'll use most often:

Checking Status and History 

git status          # See current status of files
git log             # View commit history
git log --oneline   # Compact view of commits
Enter fullscreen mode Exit fullscreen mode

Making Changes 

git add filename    # Stage a specific file
git add .           # Stage all changes
git commit -m "message"  # Commit with message
Enter fullscreen mode Exit fullscreen mode

Working with Remote Repositories 

git push            # Upload changes to GitHub
git pull            # Download changes from GitHub
git clone <url>     # Copy a repository to your computer
Enter fullscreen mode Exit fullscreen mode

Branching 

git branch                    # List all branches
git branch feature-name       # Create new branch
git checkout feature-name     # Switch to branch
git checkout -b feature-name  # Create and switch to branch
git merge feature-name        # Merge branch into current branch
Enter fullscreen mode Exit fullscreen mode

Working with Branches

Branches let you work on different features without affecting your main code.

Creating a New Feature 

git checkout -b new-feature
Enter fullscreen mode Exit fullscreen mode

Make your changes, then:

git add .
git commit -m "Add new feature"
git push origin new-feature
Enter fullscreen mode Exit fullscreen mode

Merging Changes 

git checkout main
git merge new-feature
git push origin main
Enter fullscreen mode Exit fullscreen mode

Collaboration Workflow

Here's how teams typically work with Git and GitHub:

The Fork and Pull Request Workflow

  1. Fork the repository on GitHub
  2. Clone your fork to your computer
  3. Create a branch for your changes
  4. Make your changes and commit them
  5. Push your branch to your fork
  6. Create a Pull Request on GitHub
  7. The maintainer reviews and merges your changes

Basic Collaboration Commands 

# Start working on someone else's project
git clone https://github.com/username/project.git
cd project

# Before starting work, get latest changes
git pull origin main

# Create your feature branch
git checkout -b my-contribution

# Make changes, add, and commit
git add .
git commit -m "Add my contribution"

# Push your branch
git push origin my-contribution
Enter fullscreen mode Exit fullscreen mode

Best Practices for Beginners

Commit Messages

Write clear, descriptive commit messages:

# Good
git commit -m "Fix login button styling"
git commit -m "Add user authentication feature"

# Bad
git commit -m "fix"
git commit -m "changes"
Enter fullscreen mode Exit fullscreen mode

Commit Frequently

Make small, frequent commits rather than large ones:

# Do this
git commit -m "Add header component"
git commit -m "Style header with CSS"
git commit -m "Make header responsive"

# Not this
git commit -m "Complete entire website"
Enter fullscreen mode Exit fullscreen mode

Use .gitignore

Create a .gitignore file to exclude files you don't want to track:

# .gitignore
node_modules/
*.log
.env
.DS_Store
Enter fullscreen mode Exit fullscreen mode

Common Mistakes and How to Fix Them

Mistake 1: Committing Too Much 

# If you accidentally added files
git reset HEAD filename

# If you committed but haven't pushed
git reset --soft HEAD~1
Enter fullscreen mode Exit fullscreen mode

Mistake 2: Wrong Commit Message 

# Change the last commit message
git commit --amend -m "New message"
Enter fullscreen mode Exit fullscreen mode

Mistake 3: Working on Wrong Branch 

# Save your work temporarily
git stash

# Switch to correct branch
git checkout correct-branch

# Apply your work
git stash pop
Enter fullscreen mode Exit fullscreen mode

Practical Example: Building a Simple Website

Let's walk through a real example of using Git and GitHub to build a simple website.

Step 1: Set Up the Project 

mkdir my-website
cd my-website
git init
Enter fullscreen mode Exit fullscreen mode

Step 2: Create Basic Files

Create index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first website tracked with Git!</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Create style.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Track Your Progress 

git add .
git commit -m "Initial website structure"
Enter fullscreen mode Exit fullscreen mode

Step 4: Add a Feature

Create a new branch for navigation:

git checkout -b add-navigation
Enter fullscreen mode Exit fullscreen mode

Update index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <h1>Welcome to My Website</h1>
    <p>This is my first website tracked with Git!</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 5: Commit and Merge 

git add .
git commit -m "Add navigation menu"
git checkout main
git merge add-navigation
Enter fullscreen mode Exit fullscreen mode

Step 6: Push to GitHub 

git remote add origin https://github.com/yourusername/my-website.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Advanced Tips for Beginners

Viewing Changes 

git diff                    # See unstaged changes
git diff --staged          # See staged changes
git show                   # See last commit details
Enter fullscreen mode Exit fullscreen mode

Undoing Changes 

git checkout -- filename   # Discard changes to a file
git reset HEAD filename    # Unstage a file
git revert <commit-hash>   # Undo a specific commit
Enter fullscreen mode Exit fullscreen mode

Working with Remote Repositories 

git remote -v              # List remote repositories
git remote add upstream <url>  # Add another remote
git fetch origin           # Download changes without merging
Enter fullscreen mode Exit fullscreen mode

GitHub Features for Beginners

Issues

Use GitHub Issues to track bugs and feature requests:

  1. Go to your repository
  2. Click "Issues" tab
  3. Click "New issue"
  4. Describe the problem or feature
  5. Add labels and assign to team members

Pull Requests

Pull Requests let you propose changes:

  1. Push your branch to GitHub
  2. Click "Compare & pull request"
  3. Add a description of your changes
  4. Request reviews from team members
  5. Merge when approved

GitHub Pages

Host your website for free:

  1. Go to your repository settings
  2. Scroll to "Pages"
  3. Select source branch (usually main)
  4. Your site will be available at username.github.io/repository-name

Troubleshooting Common Issues

Problem: "Permission denied"

This usually means you need to set up SSH keys or use HTTPS authentication.

Solution:

git remote set-url origin https://github.com/username/repository.git
Enter fullscreen mode Exit fullscreen mode

Problem: "Merge conflict"

This happens when Git can't automatically merge changes.

Solution:

  1. Open the conflicted file
  2. Look for conflict markers (<<<<<<<, =======, >>>>>>>)
  3. Choose which changes to keep
  4. Remove the conflict markers
  5. Add and commit the resolved file

Problem: "Nothing to commit"

This means all your changes are already committed.

Solution:

git status  # Check what's happening
git push    # Maybe you need to push to GitHub
Enter fullscreen mode Exit fullscreen mode

What's Next?

Now that you understand the basics, here are some next steps:

  1. Practice Daily: Use Git for all your projects, even small ones
  2. Contribute to Open Source: Find beginner-friendly projects on GitHub
  3. Learn Git GUIs: Try tools like GitHub Desktop or GitKraken
  4. Explore Advanced Features: Learn about rebasing, cherry-picking, and hooks
  5. Join Communities: Participate in coding communities and collaborate on projects

Conclusion

Congratulations! You've just learned the fundamentals of Git and GitHub. These tools might seem overwhelming at first, but with practice, they'll become second nature.

Remember these key points:

  • Git tracks changes to your files over time
  • GitHub hosts your repositories online
  • Commits are snapshots of your project
  • Branches let you work on features safely
  • Pull Requests facilitate collaboration

Start small, practice regularly, and don't be afraid to make mistakes. Every developer has accidentally deleted something or created a merge conflict. The beauty of Git is that you can almost always recover from these situations.

Your journey with version control has just begun, and it's going to make you a more organized, confident, and collaborative developer. Happy coding!

Let's Stay Connected!

Found this guide helpful? I'd love to connect with you and share more programming content!

🔗 Main Links:

📱 More Platforms:

💬 Community:

Follow me for more beginner-friendly tutorials, coding tips, and tech insights. Let's learn and grow together in this amazing world of programming!

Top comments (2)

Collapse
 
contractorx profile image
Collins Dada •

Github doesn't allow push and pull request it would be advisable to get a session token or key..
love the work tho

Collapse
 
abdelhakim_baalla profile image
Abdelhakim Baalla •

Thanks for the feedback, Collins! GitHub requires authentication to push or open PRs you can add an SSH key in your account settings or use a Personal Access Token in place of your password, and you’ll be able to push, pull, and create PRs smoothly 😊