Complete Beginner Tutorial for Using GitHub

GitHub is a platform used to:

Store code
Host websites
Collaborate with developers
Track changes
Build portfolios
Deploy projects online

For your case, GitHub will help you:

Host websites for free
Store HTML/CSS/JS projects
Build your digital portfolio
Share projects professionally

1. What Is GitHub?

Think of GitHub as:


Google Drive for developers

But smarter.

It tracks:

Every file change
Project versions
Collaborations
Website deployments

2. Important GitHub Terms

Term	Meaning
Repository (Repo)	A project folder
Commit	Saving changes
Push	Uploading changes
Branch	A separate version of a project
Main Branch	Primary version of your project
Clone	Download a repository
Pull	Get latest updates
GitHub Pages	Free website hosting

3. Create a GitHub Account

Go to:

GitHub Signup

Create:

Username
Email
Password

Example:


creativelynigerian

4. Understanding the GitHub Dashboard

After login, you’ll see:

Section	Purpose
Repositories	Your projects
Profile	Your portfolio
Explore	Discover projects
Pull Requests	Collaboration requests
Issues	Project problems/tasks

5. Create Your First Repository

Click:


New Repository

OR go to:

Create Repository

Recommended Settings


Repository Name: my-website

Visibility: Public

README: ON

.gitignore: None

License: MIT

Click:


Create Repository

6. Upload Files to GitHub

Inside your repository:

Click:


Add file
→ Upload files

Upload:

HTML
CSS
JavaScript
Images

Then click:


Commit changes

7. GitHub Pages (Free Website Hosting)

GitHub can host websites free.

Go to:


Settings
→ Pages

Under:


Build and deployment

Choose:


Deploy from a branch

Then:


Branch → main
Folder → /(root)

Click:


Save

Your website becomes live at:


https://username.github.io/repository-name/

Example:


https://creativelynigerian.github.io/kay_jdaniels/

8. File Structure Best Practice

Organize your repository like this:


my-website/
│
├── index.html
├── style.css
├── script.js
├── images/
├── assets/

9. Understanding index.html

This is the homepage.

GitHub Pages automatically loads:


index.html

first.

Without it, your website will not open properly.

10. Editing Files Online

You can edit directly on GitHub.

Open a file.

Click:


✏ Edit

Modify code.

Click:


Commit changes

11. Commits

A commit means:


Save project changes

Example commit messages:


Added homepage

Fixed navbar

Updated contact section

12. Branches

Branches help you test features safely.

Example:


main

and:


new-design

You can experiment without breaking the main website.

13. Pull Requests

Used for collaboration.

Example:

Someone edits your project
They request approval
You review and merge changes

14. Forking Projects

Fork means:


Copy another repository to your account

Useful for:

Learning
Modifying templates
Open-source contributions

15. GitHub Desktop (Recommended)

Instead of browser uploads, you can use:

GitHub Desktop

Benefits:

Drag-and-drop uploads
Easier commits
Sync local files
Better project management

16. VS Code + GitHub (Professional Workflow)

Install:

Visual Studio Code

Then connect GitHub.

Benefits:

Live coding
Instant sync
Better editing
Extensions

17. Essential Git Commands

If you later use terminal/command line:

Clone Repository


git clone https://github.com/username/repository.git

Check Status


git status

Add Files


git add .

Commit Changes


git commit -m "Updated homepage"

Push Changes


git push

18. Hosting More Than One Website

You can host unlimited websites.

Example:

Repository	Website
kay_jdaniels	creativelynigerian.github.io/kay_jdaniels
wordspiration	creativelynigerian.github.io/wordspiration
portfolio	creativelynigerian.github.io/portfolio

19. Custom Domains

Later, you can connect:

.com
.org
.com.ng

Example:


www.kaydaniels.com

through:

20. GitHub Best Practices

DO:

✅ Use clear repository names
✅ Organize files properly
✅ Commit regularly
✅ Keep backups
✅ Use README files

DON'T:

❌ Upload passwords
❌ Upload sensitive keys
❌ Delete repositories carelessly

21. README.md

README is your project description.

Example:


# Kay Daniels Website

Official website for Kay Daniels.

Built with:
- HTML
- CSS
- JavaScript

Hosted on GitHub Pages.

22. Learning Resources

Official GitHub Docs

GitHub Docs

GitHub Skills

Git Handbook

23. What You Can Build With GitHub

You can host:

Portfolios
Ministry websites
School portals
Landing pages
Blogs
Course platforms
Documentation
Event pages
Analytics dashboards

24. Your Current GitHub Website

Your current project URL:

Kay Daniels GitHub Site

25. Recommended Next Steps for You

Since you already:

Build websites
Work with Blogger
Teach tech
Build LMS platforms

You should learn:

GitHub Pages
GitHub Desktop
VS Code Git integration
Markdown
Git basics
Netlify deployment
Firebase hosting

These will massively improve your web development workflow.

Monday, May 18, 2026