How to Use GitHub to Store Your First Project

You just finished your first coding project. Maybe it's a calculator, a to-do app, or a personal website. Now what? How do you save it properly, share it with others, or make sure you never lose your work?

The answer is GitHub — the platform where over 100 million developers store, share, and collaborate on code. Whether you're building a portfolio, applying for jobs, or just learning, knowing how to use GitHub is an essential skill.

This guide will walk you through everything from scratch. No prior Git or GitHub experience required.

What You'll Learn:
✅ What Git and GitHub are and why they matter
✅ How to install and configure Git on your machine
✅ How to create your first GitHub repository
✅ How to push your project code to GitHub
✅ How to make changes and track your project's history
✅ Best practices for organizing your repositories

What is Git? What is GitHub?

Before we start, let's clarify two terms that beginners often confuse:

Think of it this way:

• Git is like the "Save" and "Undo" system for your entire project — but much more powerful
• GitHub is like Google Drive for your code — it stores your project online so you can access it anywhere

Why Should You Use Git and GitHub?

1. Never lose your code again

Your laptop could crash, your hard drive could fail. With GitHub, your code is safely stored in the cloud.

2. Track every change you make

Git remembers every change. Made a mistake? You can go back to any previous version of your code.

3. Build your developer portfolio

Recruiters and hiring managers look at GitHub profiles. Your repositories show what you can build.

4. Collaborate with others

Working on a group project? GitHub makes it easy for multiple people to work on the same codebase.

5. It's an industry standard

Almost every software company uses Git. Learning it now gives you a head start in your career.

Step 1: Install Git

On macOS

Open Terminal and run:

# Check if Git is already installed
git --version
 
# If not installed, install via Homebrew
brew install git

If you don't have Homebrew, install it first from brew.sh.

On Windows

Download Git from git-scm.com and run the installer. Use the default settings — they work fine for beginners.

After installation, open Git Bash (it comes with the installer) and verify:

git --version
# Output: git version 2.x.x

On Linux (Ubuntu/Debian)

sudo apt update
sudo apt install git
 
git --version

Step 2: Configure Git

After installing Git, tell it who you are. This information appears in your commit history:

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

Use the same email you'll use for your GitHub account. This links your local commits to your GitHub profile.

Verify your configuration:

git config --global --list
# Output:
# user.name=Your Name
# user.email=your.email@example.com

Step 3: Create a GitHub Account

1. Go to github.com
2. Click Sign up
3. Choose a username (this will be your public profile URL: github.com/your-username)
4. Use a professional username — recruiters will see this

Tip: Choose a username that's easy to remember and professional. Avoid random numbers or joke names. Something like chanh-le or john-doe-dev works great.

Step 4: Create Your First Repository

A repository (or "repo") is like a folder for your project on GitHub. Let's create one.

Option A: Create on GitHub First (Recommended for Beginners)

1. Click the + icon in the top-right corner of GitHub
2. Select New repository
3. Fill in the details:

4. Click Create repository

Understanding .gitignore

A .gitignore file tells Git which files to not track. You don't want to upload:

• Dependencies (node_modules/, venv/)
• Build files (dist/, build/)
• Secrets (.env, API keys)
• OS files (.DS_Store, Thumbs.db)

GitHub provides templates for common languages. Here's a simple example:

# Dependencies
node_modules/
venv/
__pycache__/
 
# Environment variables (NEVER commit these!)
.env
.env.local
 
# Build output
dist/
build/
 
# OS files
.DS_Store
Thumbs.db
 
# IDE files
.vscode/
.idea/

Step 5: Connect Your Local Project to GitHub

Now let's connect your project on your computer to the GitHub repository.

If You Already Have a Project Folder

Navigate to your project folder in the terminal:

cd ~/my-projects/my-first-website

Initialize Git in your project:

# Turn this folder into a Git repository
git init

Connect it to your GitHub repository:

# Add the remote repository URL
git remote add origin https://github.com/your-username/my-first-website.git

If You Created the Repo on GitHub First

Clone (download) the repository to your computer:

# Clone the repository
git clone https://github.com/your-username/my-first-website.git
 
# Navigate into the project folder
cd my-first-website

This creates a folder with the repository name and sets up the Git connection automatically.

Step 6: The Git Workflow — Add, Commit, Push

This is the core workflow you'll use every day. Think of it as three steps:

Step 6.1: Check the Status

Always start by checking what's changed:

git status

Output example:

On branch main
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        index.html
        style.css
        script.js

Step 6.2: Stage Your Files (git add)

Staging tells Git which files you want to include in your next save point:

# Add specific files
git add index.html style.css
 
# Or add ALL changed files at once
git add .

git add . adds everything in the current directory. Be careful — make sure you have a .gitignore file first so you don't accidentally add files you shouldn't.

Step 6.3: Commit Your Changes (git commit)

A commit is a snapshot of your project at a specific point in time. Always include a descriptive message:

git commit -m "Add homepage with navigation bar and hero section"

Writing Good Commit Messages:

Commit message tips:

• Start with a verb: Add, Fix, Update, Remove, Refactor
• Keep it under 72 characters
• Describe what you did and why, not how

Step 6.4: Push to GitHub (git push)

Pushing uploads your commits to GitHub:

# First time pushing to a new repository
git push -u origin main
 
# After the first time, just use
git push

The -u flag sets the default remote branch, so future pushes only need git push.

The Complete Flow

Here's the full workflow from start to finish:

# 1. Make changes to your files (edit code, add files, etc.)
 
# 2. Check what changed
git status
 
# 3. Stage the changes
git add .
 
# 4. Commit with a message
git commit -m "Add contact form with email validation"
 
# 5. Push to GitHub
git push

That's it! These five commands are 90% of what you'll use day-to-day.

Step 7: Making Changes and Tracking History

Making More Changes

After your initial push, the workflow stays the same. Every time you make changes:

# Edit your files...
git add .
git commit -m "Style the footer with flexbox layout"
git push

Viewing Your Commit History

See all your past commits:

git log --oneline

Output:

a1b2c3d Style the footer with flexbox layout
e4f5g6h Add contact form with email validation
i7j8k9l Add homepage with navigation bar and hero section
m0n1o2p Initial commit

Each commit has a unique ID (like a1b2c3d) that you can use to go back to that version if needed.

Viewing Changes Before Committing

See what you've changed before staging:

# See all unstaged changes
git diff
 
# See staged changes (ready to commit)
git diff --staged

Step 8: Write a Great README

Your README.md is the first thing people see when they visit your repository. A good README makes your project look professional.

Here's a template:

# Project Name
 
Brief description of what this project does.
 
## Demo
 
[Live Demo](https://your-demo-link.com) (if available)
 
## Screenshots
 
![Screenshot](screenshot.png)
 
## Technologies Used
 
- HTML5
- CSS3
- JavaScript
 
## Getting Started
 
### Prerequisites
 
- A web browser
- Git installed on your machine
 
### Installation
 
1. Clone the repository:
   ```bash
   git clone https://github.com/your-username/project-name.git

2. Open index.html in your browser

What I Learned

• How to structure HTML pages semantically
• CSS Flexbox and Grid layouts
• DOM manipulation with JavaScript

Author

Your Name - GitHub

 
## Common Mistakes and How to Fix Them
 
### Mistake 1: "I committed something I shouldn't have"
 
If you accidentally committed a file (like `.env`):
 
```bash
# Remove the file from Git tracking (keeps the local file)
git rm --cached .env
 
# Add it to .gitignore
echo ".env" >> .gitignore
 
# Commit the fix
git add .gitignore
git commit -m "Remove .env from tracking and add to gitignore"
git push

Warning: If you pushed secrets (API keys, passwords) to a public repo, consider those secrets compromised. Rotate them immediately, even after removing the file.

Mistake 2: "I messed up my last commit message"

# Fix the most recent commit message (only if NOT pushed yet)
git commit --amend -m "Corrected commit message here"

Mistake 3: "I want to undo my last changes"

# Undo changes to a specific file (before staging)
git checkout -- filename.html
 
# Unstage a file (after git add, before commit)
git reset HEAD filename.html

Mistake 4: "Push is rejected"

This usually happens when the remote has changes you don't have locally:

# Pull remote changes first, then push
git pull origin main
git push

Setting Up SSH Authentication (Optional but Recommended)

Tired of entering your username and password every time you push? Set up SSH:

# 1. Generate an SSH key
ssh-keygen -t ed25519 -C "your.email@example.com"
 
# 2. Press Enter for default location, then set a passphrase (or leave empty)
 
# 3. Copy your public key
# On macOS:
cat ~/.ssh/id_ed25519.pub | pbcopy
 
# On Linux:
cat ~/.ssh/id_ed25519.pub
# (copy the output manually)
 
# On Windows (Git Bash):
cat ~/.ssh/id_ed25519.pub | clip

Then add the key to GitHub:

1. Go to Settings → SSH and GPG keys → New SSH key
2. Paste your public key
3. Click Add SSH key

Now use SSH URLs instead of HTTPS:

# Change remote URL to SSH
git remote set-url origin git@github.com:your-username/my-first-website.git

Git Cheat Sheet

Here's a quick reference for the commands you'll use most:

Tips for Organizing Your GitHub Profile

1. Name Repositories Clearly

2. Use Consistent Naming Conventions

Pick one style and stick with it:

• kebab-case: my-first-project (most common on GitHub)
• snake_case: my_first_project

3. Pin Your Best Repositories

On your GitHub profile, you can pin up to 6 repositories. Choose your best work to showcase.

4. Commit Regularly

Don't wait until the entire project is done. Commit small, meaningful changes as you work:

# Morning: Start the header
git add .
git commit -m "Add header with logo and navigation links"
 
# Afternoon: Style the header
git add .
git commit -m "Style header with responsive flexbox layout"
 
# Evening: Add the hero section
git add .
git commit -m "Add hero section with background image"

This creates a detailed history that shows your progress and thought process.

What's Next?

Once you're comfortable with the basics, explore these topics:

1. Branching — Work on features without affecting the main code
2. Pull Requests — Propose changes and get code reviews
3. GitHub Issues — Track bugs and feature requests
4. GitHub Actions — Automate testing and deployment
5. Forking — Contribute to other people's open-source projects

Summary

Here's what we covered:

The key takeaway: Git and GitHub are not complicated once you understand the basic workflow. Start with git add, git commit, and git push — that's all you need for your first project. Everything else you can learn as you go.

Your future self (and future employers) will thank you for starting to use GitHub today.

Resources

• Git Official Documentation
• GitHub Docs — Getting Started
• GitHub Skills — Interactive Courses
• Pro Git Book (Free)
• Git Cheat Sheet by GitHub