-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
579 lines (544 loc) · 34 KB
/
index.html
File metadata and controls
579 lines (544 loc) · 34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Training - Basic Material | Learn Git & GitHub Fundamentals</title>
<meta name="description" content="Comprehensive GitHub training materials for beginners. Learn Git basics, branching, merging, pull requests with hands-on exercises. No CLI installation required.">
<meta name="keywords" content="GitHub training, Git tutorial, version control, GitHub basics, Git branching, pull requests, GitHub workshop, Git learning, version control training">
<meta name="author" content="Mohit Mehral">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://copilot-founder.github.io/git-training/">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://copilot-founder.github.io/git-training/">
<meta property="og:title" content="GitHub Training - Basic Material | Interactive Learning">
<meta property="og:description" content="Learn GitHub fundamentals with hands-on exercises. 55-minute training covering Git basics, branching, merging, and pull requests. No installation required.">
<meta property="og:image" content="https://copilot-founder.github.io/git-training/GitHub-event-invitation.jpeg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://copilot-founder.github.io/git-training/">
<meta property="twitter:title" content="GitHub Training - Basic Material | Interactive Learning">
<meta property="twitter:description" content="Learn GitHub fundamentals with hands-on exercises. 55-minute training covering Git basics, branching, merging, and pull requests. No installation required.">
<meta property="twitter:image" content="https://copilot-founder.github.io/git-training/github-event-invitation.jpeg">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Course",
"name": "GitHub Training - Basic Material",
"description": "Comprehensive GitHub training for beginners covering Git basics, branching, merging, pull requests with interactive exercises.",
"provider": {
"@type": "Person",
"name": "Mohit Mehral"
},
"url": "https://copilot-founder.github.io/git-training/",
"courseMode": "online",
"educationalLevel": "Beginner",
"timeRequired": "PT55M",
"inLanguage": "en",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45XH9M6KTH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-45XH9M6KTH');
</script>
<!-- FAQ Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How does branching work in Git?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A branch is your own parallel universe of code. You branch off main, experiment freely, and merge back when ready using git branch, git checkout, and git merge commands."
}
},
{
"@type": "Question",
"name": "What is the difference between SVN and Git?",
"acceptedAnswer": {
"@type": "Answer",
"text": "SVN is centralized — one server, must be online to commit. Git is distributed — every developer has a full copy of the repo and can work offline. Git branching is instant while SVN branching is heavy."
}
},
{
"@type": "Question",
"name": "What is a Git commit?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A commit is like a save point in a video game. You stage files with git add, then save a snapshot with git commit. You can always return to any commit."
}
},
{
"@type": "Question",
"name": "What is a Pull Request?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A Pull Request is how you ask your team to review your code before merging it into the main branch. Push your branch, open a PR on GitHub, get reviews, and merge when approved."
}
},
{
"@type": "Question",
"name": "Do I need to install Git for this training?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No installation needed. Practice everything in your browser at copilot-founder.github.io/gitlearn/ — a browser-based Git simulator with zero setup."
}
}
]
}
</script>
<!-- Google AdSense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5228411604893151"
crossorigin="anonymous"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-50 text-gray-900">
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<h1 class="text-xl md:text-2xl font-bold text-gray-800">
<i class="fab fa-github text-gray-800 mr-2"></i>
GitHub Training
</h1>
<div class="flex space-x-2 md:space-x-4 text-sm md:text-base">
<a href="#agenda" class="text-gray-600 hover:text-gray-800">Agenda</a>
<a href="#resources" class="text-gray-600 hover:text-gray-800">Resources</a>
<a href="#practice" class="text-gray-600 hover:text-gray-800">Practice</a>
<a href="#faq" class="text-gray-600 hover:text-gray-800">FAQ</a>
</div>
</div>
</div>
</nav>
<header class="bg-gradient-to-r from-gray-800 to-gray-900 text-white py-12 md:py-20">
<div class="container mx-auto px-4 text-center">
<i class="fab fa-github text-4xl md:text-6xl mb-4 md:mb-6"></i>
<h1 class="text-3xl md:text-5xl font-bold mb-4 md:mb-6">GitHub Training - Basic Material</h1>
<p class="text-lg md:text-xl mb-6 md:mb-8">Learn GitHub fundamentals with hands-on exercises and practical examples</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#practice" class="bg-green-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-green-700 transition">
<i class="fas fa-play mr-2"></i>Start Practice
</a>
<a href="https://github.com/copilot-founder/tree/main/git-training" class="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-gray-800 transition">
<i class="fab fa-github mr-2"></i>View Repository
</a>
</div>
</div>
</header>
<section class="py-12 bg-gradient-to-b from-gray-900 to-gray-800">
<div class="container mx-auto px-4">
<div class="max-w-5xl mx-auto text-center">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-2">
<i class="fas fa-film text-yellow-400 mr-2"></i>
See Git in Action
</h2>
<p class="text-gray-400 mb-6">Watch how Git workflows come together — branching, committing, merging & more</p>
<div class="rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700 inline-block">
<img src="./git-training-presentation-gif.gif" alt="Git Training Presentation Animation - See Git workflows in action" class="max-w-full h-auto" style="max-height: 520px;">
</div>
</div>
</div>
</section>
<section class="py-16">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h2 class="text-3xl font-bold mb-6 text-center">
<i class="fas fa-calendar-alt text-blue-600 mr-3"></i>
Event Invitation
</h2>
<div class="text-center">
<img src="./github-event-invitation.jpeg?v=3" alt="GitHub Training Event Invitation" class="mx-auto rounded-lg shadow-md max-w-full h-auto">
</div>
</div>
</div>
</div>
</section>
<section id="agenda" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-list-ul text-blue-600 mr-3"></i>
Training Agenda
</h2>
<div class="max-w-4xl mx-auto">
<div class="grid gap-6">
<div class="bg-white p-4 md:p-6 rounded-xl shadow-lg flex items-center">
<div class="bg-blue-100 text-blue-600 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center text-lg md:text-xl font-bold mr-4 md:mr-6 shrink-0">
10m
</div>
<div>
<h3 class="text-xl font-bold mb-2">Welcome & Introduction</h3>
<p class="text-gray-600">Getting started with the training session, History, Purpose, Code Versioning Purpose.</p>
</div>
</div>
<div class="bg-white p-4 md:p-6 rounded-xl shadow-lg flex items-center">
<div class="bg-green-100 text-green-600 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center text-lg md:text-xl font-bold mr-4 md:mr-6 shrink-0">
10m
</div>
<div>
<h3 class="text-xl font-bold mb-2">GitHub Basics & Branching</h3>
<p class="text-gray-600">Learn fundamentals: Branching, Merging, Pull Requests</p>
</div>
</div>
<div class="bg-white p-4 md:p-6 rounded-xl shadow-lg flex items-center">
<div class="bg-purple-100 text-purple-600 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center text-lg md:text-xl font-bold mr-4 md:mr-6 shrink-0">
15m
</div>
<div>
<h3 class="text-xl font-bold mb-2">Hands-On Exercises - Live</h3>
<p class="text-gray-600">Interactive practice session with real GitHub workflows</p>
</div>
</div>
<div class="bg-white p-4 md:p-6 rounded-xl shadow-lg flex items-center">
<div class="bg-yellow-100 text-yellow-600 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center text-lg md:text-xl font-bold mr-4 md:mr-6 shrink-0">
5m
</div>
<div>
<h3 class="text-xl font-bold mb-2">Cheat Sheet</h3>
<p class="text-gray-600">Quick reference guide for GitHub commands and workflows</p>
</div>
</div>
<div class="bg-white p-4 md:p-6 rounded-xl shadow-lg flex items-center">
<div class="bg-red-100 text-red-600 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center text-lg md:text-xl font-bold mr-4 md:mr-6 shrink-0">
15m
</div>
<div>
<h3 class="text-xl font-bold mb-2">Q&A and Wrap-Up</h3>
<p class="text-gray-600">Questions, answers, and session conclusion</p>
</div>
</div>
</div>
<div class="text-center mt-8">
<div class="bg-gray-800 text-white px-6 py-3 rounded-lg inline-block">
<i class="fas fa-clock mr-2"></i>
<strong>Total Duration: 55 minutes</strong>
</div>
</div>
</div>
</div>
</section>
<section id="practice" class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-code text-green-600 mr-3"></i>
Practice Without Installing Git CLI
</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="bg-green-600 text-white p-6 text-center">
<i class="fas fa-laptop-code text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Interactive GitHub Learning</h3>
<p class="text-green-100">Practice GitHub workflows directly in your browser</p>
</div>
<div class="p-8 text-center">
<p class="text-gray-600 mb-6">No installation required! Learn GitHub fundamentals through interactive exercises.</p>
<a href="https://copilot-founder.github.io/gitlearn/" target="_blank" class="bg-green-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-green-700 transition text-lg">
<i class="fas fa-external-link-alt mr-2"></i>
Start Interactive Practice →
</a>
</div>
</div>
</div>
</div>
</section>
<section id="resources" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">
<i class="fas fa-book text-blue-600 mr-3"></i>
Additional Resources
</h2>
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
<div class="bg-white p-6 rounded-xl shadow-lg">
<i class="fab fa-github text-4xl text-gray-800 mb-4"></i>
<h3 class="text-xl font-bold mb-4">Repository</h3>
<p class="text-gray-600 mb-4">Access the complete training materials and resources</p>
<a href="https://github.com/copilot-founder/git-training" class="text-blue-600 hover:underline">
<i class="fas fa-arrow-right mr-1"></i>View on GitHub
</a>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg">
<i class="fas fa-file-image text-4xl text-purple-600 mb-4"></i>
<h3 class="text-xl font-bold mb-4">Event Materials</h3>
<p class="text-gray-600 mb-4">Download event invitation and presentation materials</p>
<a href="./github-event-invitation.jpeg" class="text-blue-600 hover:underline">
<i class="fas fa-download mr-1"></i>Download Invitation
</a>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg">
<i class="fas fa-hands-helping text-4xl text-green-600 mb-4"></i>
<h3 class="text-xl font-bold mb-4">Contribute</h3>
<p class="text-gray-600 mb-4">Feel free to fork and contribute to this repository</p>
<a href="https://github.com/mohitmehral/gitlearn/fork" class="text-blue-600 hover:underline">
<i class="fas fa-code-branch mr-1"></i>Fork Repository
</a>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg">
<i class="fas fa-user text-4xl text-blue-600 mb-4"></i>
<h3 class="text-xl font-bold mb-4">Instructor</h3>
<p class="text-gray-600 mb-4">Connect with the training instructor</p>
<a href="https://github.com/mohitmehral" class="text-blue-600 hover:underline">
<i class="fab fa-github mr-1"></i>@mohitmehral
</a>
</div>
</div>
</div>
</section>
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<!-- FAQ Section -->
<section id="faq" class="mb-8">
<h2 class="text-2xl font-bold text-center mb-8">
<i class="fas fa-question-circle text-blue-400 mr-2"></i>
FAQ
</h2>
<div class="max-w-5xl mx-auto space-y-3" id="faq-container">
<!-- FAQ 1: Branching Diagram -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden">
<button onclick="toggleFaq(this)" class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-600 transition">
<span class="font-bold text-white"><i class="fas fa-code-branch text-green-400 mr-2"></i>How does branching work in Git?</span>
<i class="fas fa-chevron-down text-gray-400 faq-icon transition-transform"></i>
</button>
<div class="faq-body hidden px-4 pb-5">
<p class="text-gray-300 text-sm mb-4">A branch = your own parallel universe of code. You branch off, experiment, and merge back when ready.</p>
<!-- Visual Branch Diagram -->
<div class="bg-gray-900 rounded-lg p-4 font-mono text-xs md:text-sm overflow-x-auto">
<pre class="text-gray-200 leading-relaxed">
main ●───●───●───────────────● (stable)
\ /
feature ●───●───●───●──● (your work)
↑ ↑
git branch git merge
feature feature → main
</pre>
</div>
<div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
<div class="bg-gray-800 p-2 rounded text-center">
<code class="text-green-400">git branch feature</code>
<p class="text-gray-400 mt-1">Create branch</p>
</div>
<div class="bg-gray-800 p-2 rounded text-center">
<code class="text-yellow-400">git checkout feature</code>
<p class="text-gray-400 mt-1">Switch to it</p>
</div>
<div class="bg-gray-800 p-2 rounded text-center">
<code class="text-blue-400">git merge feature</code>
<p class="text-gray-400 mt-1">Merge back to main</p>
</div>
</div>
<!-- Real-world Scenarios -->
<div class="mt-5">
<h4 class="text-white font-bold text-sm mb-3"><i class="fas fa-lightbulb text-yellow-400 mr-1"></i> Real-world scenarios — why branching saves your life</h4>
<div class="space-y-3">
<div class="bg-gray-800 rounded-lg p-3 border-l-4 border-green-500">
<p class="text-green-400 font-bold text-xs mb-1">🚀 Scenario 1 — New feature without breaking production</p>
<p class="text-gray-300 text-xs">Your app is live. Boss says "add dark mode". You create <code class="bg-gray-700 px-1 rounded">git branch dark-mode</code>, build it safely. Meanwhile, <code class="text-white">main</code> stays untouched — users never see half-done work.</p>
</div>
<div class="bg-gray-800 rounded-lg p-3 border-l-4 border-red-500">
<p class="text-red-400 font-bold text-xs mb-1">🔥 Scenario 2 — Emergency hotfix while feature is in progress</p>
<p class="text-gray-300 text-xs">You're halfway through building a payment page on <code class="bg-gray-700 px-1 rounded">feature/payments</code>. Suddenly — critical bug in production! You switch to <code class="bg-gray-700 px-1 rounded">git checkout main</code>, create <code class="bg-gray-700 px-1 rounded">hotfix/login-crash</code>, fix it, merge, deploy. Then go right back to your payments branch. No code mixed up.</p>
</div>
<div class="bg-gray-800 rounded-lg p-3 border-l-4 border-blue-500">
<p class="text-blue-400 font-bold text-xs mb-1">👥 Scenario 3 — Two devs, same project, zero conflicts</p>
<p class="text-gray-300 text-xs">Dev A works on <code class="bg-gray-700 px-1 rounded">feature/navbar</code>, Dev B works on <code class="bg-gray-700 px-1 rounded">feature/footer</code>. Both branch from <code class="text-white">main</code>. They never step on each other's code. When done, both merge back — clean and independent.</p>
</div>
<div class="bg-gray-800 rounded-lg p-3 border-l-4 border-yellow-500">
<p class="text-yellow-400 font-bold text-xs mb-1">🧪 Scenario 4 — "Let me try something crazy"</p>
<p class="text-gray-300 text-xs">Want to rewrite the entire auth system? Create <code class="bg-gray-700 px-1 rounded">experiment/new-auth</code>. If it works — merge it. If it's a disaster — just delete the branch. Main is still perfect. Zero risk.</p>
</div>
</div>
</div>
</div>
</div>
<!-- FAQ 2: SVN vs Git -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden">
<button onclick="toggleFaq(this)" class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-600 transition">
<span class="font-bold text-white"><i class="fas fa-exchange-alt text-orange-400 mr-2"></i>SVN vs Git — What's the difference?</span>
<i class="fas fa-chevron-down text-gray-400 faq-icon transition-transform"></i>
</button>
<div class="faq-body hidden px-4 pb-5">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div class="bg-gray-900 rounded-lg p-4">
<h4 class="text-red-400 font-bold text-sm mb-2"><i class="fas fa-server mr-1"></i>SVN (Centralized)</h4>
<pre class="text-gray-300 text-xs leading-relaxed">
┌──────────┐
│ SERVER │ ← single source
└────┬─────┘
┌────┴─────┐
│ checkout │
▼ ▼
👤 Dev A 👤 Dev B
(must be online to commit)
</pre>
</div>
<div class="bg-gray-900 rounded-lg p-4">
<h4 class="text-green-400 font-bold text-sm mb-2"><i class="fab fa-git-alt mr-1"></i>Git (Distributed)</h4>
<pre class="text-gray-300 text-xs leading-relaxed">
👤 Dev A 👤 Dev B
┌──────┐ ┌──────┐
│ FULL │ │ FULL │
│ REPO │◄────►│ REPO │
└──┬───┘ └──┬───┘
└──────┬───────┘
┌────┴─────┐
│ REMOTE │ (GitHub)
└──────────┘
</pre>
</div>
</div>
<!-- Command Comparison Table -->
<div class="overflow-x-auto">
<table class="w-full text-xs md:text-sm">
<thead>
<tr class="border-b border-gray-600">
<th class="text-left p-2 text-gray-400">Action</th>
<th class="text-left p-2 text-red-400">SVN</th>
<th class="text-left p-2 text-green-400">Git</th>
</tr>
</thead>
<tbody class="text-gray-300">
<tr class="border-b border-gray-700"><td class="p-2">Get repo</td><td class="p-2"><code>svn checkout</code></td><td class="p-2"><code>git clone</code></td></tr>
<tr class="border-b border-gray-700"><td class="p-2">Save changes</td><td class="p-2"><code>svn commit</code> → server</td><td class="p-2"><code>git commit</code> → local</td></tr>
<tr class="border-b border-gray-700"><td class="p-2">Upload</td><td class="p-2"><em>same as commit</em></td><td class="p-2"><code>git push</code></td></tr>
<tr class="border-b border-gray-700"><td class="p-2">Download</td><td class="p-2"><code>svn update</code></td><td class="p-2"><code>git pull</code></td></tr>
<tr class="border-b border-gray-700"><td class="p-2">Branch</td><td class="p-2"><code>svn copy</code> (heavy)</td><td class="p-2"><code>git branch</code> (instant)</td></tr>
<tr><td class="p-2">Offline work?</td><td class="p-2">❌ No</td><td class="p-2">✅ Yes</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- FAQ 3: Commit -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden">
<button onclick="toggleFaq(this)" class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-600 transition">
<span class="font-bold text-white"><i class="fas fa-save text-blue-400 mr-2"></i>What is a commit?</span>
<i class="fas fa-chevron-down text-gray-400 faq-icon transition-transform"></i>
</button>
<div class="faq-body hidden px-4 pb-5">
<p class="text-gray-300 text-sm mb-3">Think of it as a <strong class="text-white">save point in a video game</strong> — you can always go back to it.</p>
<div class="bg-gray-900 rounded-lg p-4 font-mono text-xs md:text-sm">
<pre class="text-gray-200 leading-relaxed">
Working Dir Staging Area Repository
┌────────┐ ┌────────┐ ┌────────┐
│ edit │────►│ staged │─────►│ saved! │
│ files │ │ files │ │ forever│
└────────┘ └────────┘ └────────┘
<span class="text-yellow-400">git add .</span> <span class="text-green-400">git commit -m "msg"</span>
</pre>
</div>
</div>
</div>
<!-- FAQ 4: Pull Request -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden">
<button onclick="toggleFaq(this)" class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-600 transition">
<span class="font-bold text-white"><i class="fas fa-code-pull-request text-purple-400 mr-2"></i>What is a Pull Request?</span>
<i class="fas fa-chevron-down text-gray-400 faq-icon transition-transform"></i>
</button>
<div class="faq-body hidden px-4 pb-5">
<p class="text-gray-300 text-sm mb-3">It's like raising your hand and saying <strong class="text-white">"Hey team, I'm done — please review before I merge."</strong></p>
<div class="bg-gray-900 rounded-lg p-4 font-mono text-xs md:text-sm">
<pre class="text-gray-200 leading-relaxed">
You (feature branch)
│
├── code, code, code...
├── <span class="text-yellow-400">git push origin feature</span>
│
▼
<span class="text-blue-400">Open Pull Request on GitHub</span>
│
├── 👀 Team reviews your code
├── 💬 Comments & suggestions
├── ✅ Approved!
│
▼
<span class="text-green-400">Merge → main branch updated</span>
</pre>
</div>
</div>
</div>
<!-- FAQ 5: Daily Workflow -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden">
<button onclick="toggleFaq(this)" class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-600 transition">
<span class="font-bold text-white"><i class="fas fa-sync-alt text-cyan-400 mr-2"></i>What does a daily Git workflow look like?</span>
<i class="fas fa-chevron-down text-gray-400 faq-icon transition-transform"></i>
</button>
<div class="faq-body hidden px-4 pb-5">
<div class="bg-gray-900 rounded-lg p-4 font-mono text-xs md:text-sm">
<pre class="text-gray-200 leading-relaxed">
☀️ Morning
<span class="text-yellow-400">git pull origin main</span> ← get latest changes
<span class="text-yellow-400">git checkout -b my-task</span> ← create your branch
💻 During the day
<span class="text-green-400">git add .</span> ← stage your work
<span class="text-green-400">git commit -m "built feature"</span> ← save locally
🌙 End of day
<span class="text-blue-400">git push origin my-task</span> ← push to GitHub
<span class="text-blue-400">Open a Pull Request</span> ← request review
</pre>
</div>
</div>
</div>
<!-- FAQ 6: Install -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden">
<button onclick="toggleFaq(this)" class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-600 transition">
<span class="font-bold text-white"><i class="fas fa-laptop text-yellow-400 mr-2"></i>Do I need to install anything?</span>
<i class="fas fa-chevron-down text-gray-400 faq-icon transition-transform"></i>
</button>
<div class="faq-body hidden px-4 pb-5">
<p class="text-gray-300 text-sm">Nope! Practice everything in your browser → <a href="https://copilot-founder.github.io/gitlearn/" class="text-blue-400 hover:underline font-bold">gitlearn</a>. Zero setup, just open and start.</p>
</div>
</div>
</div>
</section>
<!-- Footer Content -->
<div class="text-center">
<i class="fab fa-github text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-4">GitHub Training - Basic Material</h3>
<p class="text-gray-400 mb-6">Thank you for reaching this repository. Feel free to fork and contribute!</p>
<p class="text-xl font-semibold mb-4">H a p p y L e a r n i n g</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="https://github.com/mohitmehral/gitlearn" class="text-gray-400 hover:text-white">
<i class="fab fa-github mr-1"></i>Repository
</a>
<a href="https://copilot-founder.github.io/gitlearn/" class="text-gray-400 hover:text-white">
<i class="fas fa-external-link-alt mr-1"></i>Practice
</a>
<a href="https://github.com/mohitmehral" class="text-gray-400 hover:text-white">
<i class="fas fa-user mr-1"></i>@mohitmehral
</a>
</div>
</div>
</div>
</footer>
<style>
.faq-icon.open { transform: rotate(180deg); }
</style>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
});
});
function toggleFaq(btn) {
const body = btn.nextElementSibling;
const icon = btn.querySelector('.faq-icon');
body.classList.toggle('hidden');
icon.classList.toggle('open');
}
</script>
</body>
</html>