Tutorial – Getting Started with Git on Windows and Mac

Step 1: Install Git

Download Git for Windows

Go to the official Git website and download the latest version of Git for Windows.

Install Git

Run the installer and follow the prompts. You can leave most settings at their default values.
Choose a text editor when prompted.
Finish the installation process.

Set Up Git
Open Git Bash, which is installed along with Git. This tool lets you run Git commands.

Set up your username and email in Git (this information will be attached to your commits):

Bash

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Verify that Git is installed by typing:

Bash

git --version

Git for Mac

Check if Git is Already Installed
Git comes pre-installed on most Macs. To check if Git is available, open Terminal and type:

Bash

git --version

If Git is installed, you’ll see the version number. If not, follow the next step to install it.

Install Git with Homebrew (if Git is not installed)
If Git is not already installed, you can use Homebrew (a package manager for Mac) to install it. First, install Homebrew by typing this in the Terminal:

Bash

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

After Homebrew is installed, run the following command to install Git:

Bash

brew install git

Set Up Git
In Terminal, configure your Git username and email:

Bash

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Step 2: Create Your First Git Repository

For Both Windows and Mac:

Open Git Bash (Windows) or Terminal (Mac)
Navigate to the folder where you want to create your project. Use the cd command to move between folders. For example:

Bash

cd C:/Users/YourName/Documents  # For Windows
cd ~/Documents                  # For Mac

Create a New Project Folder
Create a directory for your project and navigate into it:

Bash

mkdir my-first-git-project
cd my-first-git-project

Initialise a Git Repository
Initialise a new Git repository. This will create a hidden .git folder that Git uses to track your project:

Bash

git init

You’ll see a message like “Initialized empty Git repository in [path]”. Now your folder is being tracked by Git!

Step 3: Add Files and Make a Commit

Create an HTML File
Open your text editor (Notepad, Visual Studio Code, or any other editor) and create a simple index.html file in your project folder. Add the following code:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My First Git Project</title>
</head>
<body>
  <h1>Hello, Git!</h1>
</body>
</html>

Save the file in your project folder.

Stage the File for Commit
In Git Bash (Windows) or Terminal (Mac), check the status of your project by typing:

Bash

git status

Git will tell you that there’s an untracked file (index.html). To start tracking the file, “stage” it for a commit:

Bash

git add index.html

Make Your First Commit
Now that the file is staged, you can save a snapshot of it by committing. A commit records the current state of your project:

Bash

git commit -m "Initial commit with index.html"

The -m flag allows you to add a message describing the commit. In this case, the message is "Initial commit with index.html". Every time you make changes, you should include a meaningful commit message.

Step 4: Create a Branch and Make Changes

Create a New Branch
Branches let you experiment with new features without affecting the main version of your project. Create a new branch for adding CSS to your project:

Bash

git checkout -b feature-add-css

The -b flag creates a new branch, and git checkout switches to that branch.

Add a CSS File
Open your text editor again and create a style.css file in the same folder as index.html. Add the following CSS:

CSS

body {
  background-color: lightblue;
}
h1 {
  color: navy;
}

Save the file.

Update the HTML File
Modify your index.html file to link the new CSS file. Add this line inside the <head> section:

HTML

<link rel="stylesheet" type="text/css" href="style.css">

Stage and Commit Your Changes
Now that you’ve updated the project, stage and commit the changes:

Bash

git add style.css index.html
git commit -m "Added CSS styling"

Step 5: Merge Your Branch with the Main Project

Switch Back to the Main Branch

Once you’ve finished working on your feature, switch back to the main branch:

Bash

git checkout main

Merge the Feature Branch
Merge your new changes (from the feature-add-css branch) into the main branch:

Bash

git merge feature-add-css

If Git encounters any conflicts, you’ll need to resolve them manually, but for now, the merge should be smooth.

Bonus: Push Your Code to GitHub

Create a GitHub Account
If you don’t already have one, sign up for a free account at GitHub.com.

Create a New Repository
On GitHub, click the + icon at the top right and select New repository. Give it a name (e.g., my-first-git-project), then click Create repository.

Connect Your Local Repository to GitHub
In Git Bash (Windows) or Terminal (Mac), connect your local repository to the GitHub repository:

Bash

git remote add origin https://github.com/yourusername/my-first-git-project.git

Push Your Code to GitHub
Push your code to GitHub so that others can see it:

Bash

git push -u origin main

Your project is now hosted on GitHub! You can share the link with others or work on it from any computer by cloning the repository.

By following this exercise on either Windows or Mac, you’ve learned how to set up and use Git for version control. These skills will be essential for managing your web development projects, especially when collaborating with others. Git allows you to keep track of changes, experiment safely, and ensure that your code is backed up and organised.

Feel free to explore more Git commands and features, and let me know if you need any further guidance!