How To Use Git And GitHub? Step By Step Guide For Beginners

Git and GitHub are the industry standard tools for tracking code changes and collaborating on software projects. While they sound similar, they serve entirely different purposes.

- Git is a local software tool that tracks changes in your files.
- GitHub is an online hosting service that stores your Git repositories in the cloud.

Technical Analysis: Git vs. GitHub

What is Git?

Git is a Distributed Version Control System (DVCS) installed directly on your computer. It tracks the history of modifications in a project folder. If you make a mistake, Git allows you to roll back to a previous version of your code. It operates entirely offline without needing an internet connection.

What is GitHub?

GitHub is a cloud based platform that hosts Git repositories. It adds a graphical user interface (GUI) and collaboration features to Git. Teams use GitHub to share code, review peer work, manage project tasks, and track bugs. Alternative platforms include GitLab and Bitbucket.

Key Differences

Feature	Git	GitHub
What it is	Local software tool	Cloud based hosting service
Installation	Installed on your local machine	Accessed via a web browser
Internet	Works completely offline	Requires internet connection
Core Function	Tracks code history and branches	Facilitates team collaboration
Interface	Command Line Interface (CLI)	Graphical User Interface (GUI)

Core Concepts to Understand

- Repository (Repo): A project folder tracking files and change history.
- Commit: A snapshot of your files saved at a specific point in time.
- Staging Area (Index): A preview zone where you prepare files before committing them.
- Branch: A parallel version of your repository used to develop features safely without affecting the main code.
- Remote: A version of your repository hosted on the internet (e.g., on GitHub).
- Clone: Copying a remote GitHub repository down to your local machine.

Step by Step Guide for Beginners

Step 1: Install and Configure Git

1. Download Git from git-scm.com and install it.
2. Open your terminal (Mac/Linux) or Git Bash (Windows).
3. Set your global username:
  bash
  
  git config --global user.name "Your Name"
4. Set your global email address:
  bash
  
  git config --global user.email "your.email@example.com"

Step 2: Create a Local Repository

1. Create a new folder for your project:
  bash
  
  mkdir my-first-project
2. Navigate into your project folder:
  bash
  
  cd my-first-project
3. Initialize the folder as a Git repository:
  bash
  
  git init

Step 3: Track and Commit Changes

1. Create a new file named index.html or README.md inside your folder.
2. Check the status of your repository to see untracked files:
  bash
  
  git status
3. Add the file to the staging area:
  bash
  
  git add index.html
4. Commit the staged file with a descriptive message:
  bash
  
  git commit -m "Initial commit: add index.html"

Step 4: Link Local Git to GitHub

1. Sign up for a free account at github.com.
2. Click the + icon in the top-right corner and select New repository.
3. Name your repository and click Create repository (leave “Initialize this repository with” options unchecked).
4. Copy the remote repository URL provided (e.g., https://github.com).
5. Link your local project to GitHub:
  bash
  
  git remote add origin https://github.com
6. Rename your default branch to main:
  bash
  
  git branch -M main
7. Push your local code up to GitHub:
  bash
  
  git push -u origin main

Step 5: Branching and Collaboration Workflow

To work on new features without breaking your working code, follow this standard industry workflow:

1. Create and switch to a new branch:
  bash
  
  git checkout -b feature-login
2. Modify your files, add them, and commit:
  bash
  
  git add . git commit -m "Add login form UI"
3. Push your new branch to GitHub:
  bash
  
  git push origin feature-login
4. Open GitHub in your browser, find your repository, and click Compare & pull request.
5. Review the code changes online and click Merge pull request to combine the feature into your main branch.

Essential Cheat Sheet

git status – Shows modified, staged, and untracked files.
git log – Displays the history of all commits in the current branch.
git pull – Fetches changes from GitHub and merges them into your local folder.
git clone <url> – Downloads an existing remote repository onto your computer.

How to use Git and GitHub to create your first developer portfolio?

Using Git and GitHub is the best way to host your developer portfolio because it proves to employers that you know how to use industry standard version control. Here is the step by step framework to build, track, and deploy yourfirst portfolio website for free.

Step 1: Set Up Your Project Locally

Before writing code, create a dedicated space on your computer and start tracking it with Git.

1. Create a portfolio folder: Open your terminal or Git Bash and run:
  bash
  
  mkdir developer-portfolio cd developer-portfolio
2. Initialize Git: Turn this folder into a Git repository:
  bash
  
  git init
3. Create your starter files: Create your main website files:
  bash
  
  touch index.html styles.css README.md

📝 Step 2: Write Code and Save Your Progress

Open your folder in a code editor (like VS Code), add your initial content, and save your milestones.

1. Add basic HTML: Open index.html and add a simple header with your name and a short bio.
2. Stage your files: Tell Git you want to track these new files:
  bash
  
  git add .
3. Commit your work: Save this baseline snapshot:
  bash
  
  git commit -m "Initial commit: Set up portfolio structure"

🚀 Step 3: Create a Special GitHub Repository

GitHub provides a free hosting service called GitHub Pages that turns your repository into a live website. To make your portfolio accessible at https://github.io, follow this specific naming convention:

1. Go to GitHub and click New Repository.
2. Crucial Step: Name your repository exactly: yourusername.github.io (replace yourusername with your actual GitHub username in lowercase).
3. Leave it Public and do not initialize it with a README.
4. Click Create repository.

🔗 Step 4: Push Your Portfolio Online

Link your local project folder to your new GitHub repository and upload your code.

1. Link the remote repository: Copy the URL from GitHub and run:
  bash
  
  git remote add origin https://github.com
2. Set the main branch:
  bash
  
  git branch -M main
3. Push to GitHub:
  bash
  
  git push -u origin main

Within 1 to 5 minutes, your live portfolio website will be active and viewable by anyone in the world at https://github.io!

🌟 Best Practices for a Developer Portfolio on GitHub

To make your GitHub profile and portfolio stand out to recruiters, implement these four habits:

Use a .gitignore file: Create a file named .gitignore to exclude system files (like .DS_Store) or private environment variables from being pushed publically.
Write a Great README.md: Treat your project’s README file as a landing page. Include screenshots of your work, the tech stack used, and direct links to live demos.
Pin Your Best Repositories: On your main GitHub profile view, use the “Pinned” section to showcase up to 6 of your best coding projects.
Commit Frequently: Make small, regular commits with clear messages (e.g., git commit -m "Add contact form styling") rather than one massive commit at the end. This showcases an active, authentic development process.