GitHub Desktop: Interface for Beginners 🎨

Opened GitHub Desktop for the first time and not sure where to start? Let’s walk through the interface section by section!

Main Window: 4 Zones

┌──────────────────────────────────────────────┐
│ 1. Top panel (repository and branch)        │
├──────────────────────────────────────────────┤
│ 2. Tabs         │ 3. Right panel            │
│ Changes (3)     │ Diff (changes)            │
│ History         │                            │
│                 │                            │
│ File list       │ Change details            │
│ -------------   │ ---------------------------│
│ 4. Commit zone (Summary, Description)       │
└──────────────────────────────────────────────┘

Zone 1: Top Panel

Current Repository ▼

Shows the active repository.

Click to open the list of all your repositories:
- Recently Used
- All repositories
- Add button to add a new one

Current Branch ▼

Shows the current branch (usually main or master).

Click to see:
- List of branches
- New Branch button (create a branch)
- Pull Requests (if any)

Buttons on the right

1. Fetch origin — check for updates from GitHub
2. Pull origin — download changes
3. Push origin — upload your commits

Zone 2: Tabs (Changes & History)

Changes

Shows what you’ve changed:

✓ new_file.py          +45 lines
✓ edited_file.js       ~12 lines
✓ deleted_file.txt     -30 lines

Symbols:
- + green — file added
- ~ yellow — file modified
- - red — file deleted

Checkboxes — files that will be included in the commit.

History

Shows all commits:

Apr 10 | Add tests          (Vasya Petrov)
Apr 9  | Fix critical bug   (Masha Ivanova)
Apr 8  | Initial commit     (You)

Click a commit to see what was changed.

Zone 3: Right Panel (Diff)

Shows details of the changes:

In Changes mode:

function calculatePrice(quantity) {
-  return quantity * 100;
+  return quantity * 120;  // Price increase
}

• Red lines (- minus) — removed
• Green lines (+ plus) — added
• White lines — no changes (context)

In History mode:

Shows which files were modified in the selected commit.

Zone 4: Commit (Creating a Commit)

Two text fields:

Summary (required)

Short description of what was done:

✅ Good examples:
- Add login form
- Fix navbar on mobile
- Update dependencies

❌ Bad examples:
- fix (what fix?)
- asdfsdf (gibberish)
- stuff (unclear)

Description (optional)

Detailed description of why and how:

Add login form

- Email validation
- Password strength check
- Remember me checkbox
- Forgot password link

Fixes #123

Commit Button

Commit to main — create a commit with the selected files.

Repository Menu

Useful commands:

Open in…

• Open in Visual Studio Code — open in the editor
• Open in Terminal — open terminal
• Show in Explorer (Windows) / Show in Finder (Mac)

View on GitHub

Opens the repository on GitHub.com in the browser.

Repository Settings

Settings:
- Path to the repository
- Remote (where it was cloned from)
- Ignored Files (.gitignore)

Create Pull Request

Create a Pull Request on GitHub.

Branch Menu

New Branch

Create a new branch from the current one:

1. Click Branch → New Branch
2. Enter a name: feature/login-form
3. Click Create Branch

Merge into Current Branch

Merge another branch into the current one:

1. Branch → Merge into Current Branch
2. Choose the branch to merge
3. Click Merge

Rename

Rename the current branch.

Delete

Delete the branch (only if merged or no longer needed).

Keyboard Shortcuts

Windows

• Ctrl+N — New Repository
• Ctrl+O — Add Local Repository
• Ctrl+Shift+F — Show in Explorer
• Ctrl+Shift+A — Open in Editor
• Ctrl+Shift+C — Open in Terminal
• Ctrl+1 — Changes tab
• Ctrl+2 — History tab
• Ctrl+Enter — Commit
• Ctrl+P — Push
• Ctrl+Shift+P — Pull

macOS

Same, but Cmd instead of Ctrl.

Useful Indicators

Sync icon

In the top right corner:

• ↑ 3 — you have 3 unpushed commits
• ↓ 5 — there are 5 new commits on GitHub
• ↑ 2 ↓ 1 — 2 yours, 1 remote

Number next to Changes

Changes (15) — you have 15 modified files.

Branch status

• Up to date — everything is current
• Publish branch — branch is local only
• Pull 3 — need to pull 3 commits

Visual Cues

File colors

• 🟢 Green — new file
• 🟡 Yellow — modified file
• 🔴 Red — deleted file
• ⚪ Gray — ignored (.gitignore)

Branch icons

• ✓ with checkmark — branch is on GitHub
• without checkmark — local only

Setting Up an External Editor

1. File → Options (Windows) / Preferences (Mac)
2. Integrations → External Editor
3. Choose from the list:
   - Visual Studio Code
   - Atom
   - Sublime Text
   - VS Code Insiders
   - And others

Now Repository → Open in Editor will launch the chosen editor!

Tips for Beginners

✅ Fetch often — check for updates
✅ Make small commits — easier to understand the history
✅ Write clear Summaries — you’ll thank yourself later
✅ Use branches — don’t be afraid to experiment
✅ Review the Diff — understand what you’re committing

Practice is the best teacher! Open projects and experiment! 🚀