Hugging Face's logo

Spaces:
alexdatamed
/
GitBasics
Running

App Files Community
alexdatamed commited on
Commit
b8cdb4a
·
verified ·
1 Parent(s): 8a88528

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +369 -18
index.html CHANGED
@@ -1,19 +1,370 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="uk">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Git для новачків - Навчальний дашборд</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <!-- Header -->
12
+ <header class="header">
13
+ <div class="header-content">
14
+ <h1>📚 Git для новачків</h1>
15
+ <p class="subtitle">Вивчайте основні команди Git крок за кроком</p>
16
+ </div>
17
+ </header>
18
+
19
+ <!-- Navigation Tabs -->
20
+ <nav class="tabs">
21
+ <button class="tab-button active" data-tab="basic">Базові команди</button>
22
+ <button class="tab-button" data-tab="workflow">Типовий workflow</button>
23
+ <button class="tab-button" data-tab="tips">Поради</button>
24
+ </nav>
25
+
26
+ <!-- Main Content -->
27
+ <main class="content">
28
+ <!-- Tab 1: Basic Commands -->
29
+ <section id="basic" class="tab-content active">
30
+ <h2>Базові команди Git</h2>
31
+ <div class="commands-grid">
32
+ <!-- git init -->
33
+ <div class="command-card">
34
+ <div class="command-header">
35
+ <code class="command-name">git init</code>
36
+ <span class="badge setup">Setup</span>
37
+ </div>
38
+ <p class="description">Ініціалізація нового репозиторію Git</p>
39
+ <div class="usage">
40
+ <strong>Як використовувати:</strong>
41
+ <pre><code>git init</code></pre>
42
+ </div>
43
+ <div class="explanation">
44
+ <strong>Що робить:</strong>
45
+ <p>Створює нову папку .git у вашій директорії. Це робить вашу папку "Git репозиторієм". Після цього Git почне відстежувати зміни ваших файлів.</p>
46
+ </div>
47
+ </div>
48
+
49
+ <!-- git clone -->
50
+ <div class="command-card">
51
+ <div class="command-header">
52
+ <code class="command-name">git clone</code>
53
+ <span class="badge setup">Setup</span>
54
+ </div>
55
+ <p class="description">Завантажити проект з сервера</p>
56
+ <div class="usage">
57
+ <strong>Як використовувати:</strong>
58
+ <pre><code>git clone https://github.com/user/repo.git</code></pre>
59
+ </div>
60
+ <div class="explanation">
61
+ <strong>Що робить:</strong>
62
+ <p>Копіює весь проект з GitHub (або іншого сервера) на ваш комп'ютер. Включає всю історію змін. Краще за завантаження ZIP файлу!</p>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- git status -->
67
+ <div class="command-card">
68
+ <div class="command-header">
69
+ <code class="command-name">git status</code>
70
+ <span class="badge info">Info</span>
71
+ </div>
72
+ <p class="description">Дізнатися, що змінилось</p>
73
+ <div class="usage">
74
+ <strong>Як використовувати:</strong>
75
+ <pre><code>git status</code></pre>
76
+ </div>
77
+ <div class="explanation">
78
+ <strong>Що робить:</strong>
79
+ <p>Показує список файлів, які ви змінили, але ще не збереглили. Назвіть цю команду своїм "другом" - використовуйте її часто!</p>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- git add -->
84
+ <div class="command-card">
85
+ <div class="command-header">
86
+ <code class="command-name">git add</code>
87
+ <span class="badge staging">Staging</span>
88
+ </div>
89
+ <p class="description">Підготувати файли до збереження</p>
90
+ <div class="usage">
91
+ <strong>Як використовувати:</strong>
92
+ <pre><code>git add файл.txt
93
+ git add .
94
+ git add -A</code></pre>
95
+ </div>
96
+ <div class="explanation">
97
+ <strong>Що робить:</strong>
98
+ <p><code>git add .</code> - додає ВСІ змінені файли до staging area (чекальня перед коммітом). <code>git add файл.txt</code> - додає конкретний файл.</p>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- git commit -->
103
+ <div class="command-card">
104
+ <div class="command-header">
105
+ <code class="command-name">git commit</code>
106
+ <span class="badge commit">Commit</span>
107
+ </div>
108
+ <p class="description">Зберегти зміни із описом</p>
109
+ <div class="usage">
110
+ <strong>Як використовувати:</strong>
111
+ <pre><code>git commit -m "Додав нову функцію"</code></pre>
112
+ </div>
113
+ <div class="explanation">
114
+ <strong>Що робить:</strong>
115
+ <p>Створює "знімок" вашого коду з описом. Збереження в Git! Напишіть зрозумілий текст у лапках, щоб пізніше зрозуміти, що ви робили.</p>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- git push -->
120
+ <div class="command-card">
121
+ <div class="command-header">
122
+ <code class="command-name">git push</code>
123
+ <span class="badge remote">Remote</span>
124
+ </div>
125
+ <p class="description">Відправити зміни на сервер</p>
126
+ <div class="usage">
127
+ <strong>Як використовувати:</strong>
128
+ <pre><code>git push
129
+ git push origin main</code></pre>
130
+ </div>
131
+ <div class="explanation">
132
+ <strong>Що робить:</strong>
133
+ <p>Відправляє ваші коміти на GitHub. Тепер інші можуть побачити ваші зміни. Спочатку потрібен commit!</p>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- git pull -->
138
+ <div class="command-card">
139
+ <div class="command-header">
140
+ <code class="command-name">git pull</code>
141
+ <span class="badge remote">Remote</span>
142
+ </div>
143
+ <p class="description">Завантажити зміни з сервера</p>
144
+ <div class="usage">
145
+ <strong>Як використовувати:</strong>
146
+ <pre><code>git pull
147
+ git pull origin main</code></pre>
148
+ </div>
149
+ <div class="explanation">
150
+ <strong>Що робить:</strong>
151
+ <p>Завантажує найновіші зміни з GitHub. Якщо колеги щось змінили, ви отримаєте їхні оновлення. Виконайте це перед тим, як почати роботу!</p>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- git branch -->
156
+ <div class="command-card">
157
+ <div class="command-header">
158
+ <code class="command-name">git branch</code>
159
+ <span class="badge branch">Branch</span>
160
+ </div>
161
+ <p class="description">Створення окремої лінії розробки</p>
162
+ <div class="usage">
163
+ <strong>Як використовувати:</strong>
164
+ <pre><code>git branch
165
+ git branch my-feature</code></pre>
166
+ </div>
167
+ <div class="explanation">
168
+ <strong>Що робить:</strong>
169
+ <p>Показує список гілок. <code>git branch my-feature</code> - створює нову гілку. Гілки дозволяють працювати над функціями окремо від основного коду.</p>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- git checkout -->
174
+ <div class="command-card">
175
+ <div class="command-header">
176
+ <code class="command-name">git checkout</code>
177
+ <span class="badge branch">Branch</span>
178
+ </div>
179
+ <p class="description">Переключитися на іншу гілку</p>
180
+ <div class="usage">
181
+ <strong>Як використовувати:</strong>
182
+ <pre><code>git checkout my-feature
183
+ git checkout -b new-feature</code></pre>
184
+ </div>
185
+ <div class="explanation">
186
+ <strong>Що робить:</strong>
187
+ <p>Переходить на іншу гілку. <code>-b</code> флаг створює нову гілку ТА переходить на неї. Зручно!</p>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- git merge -->
192
+ <div class="command-card">
193
+ <div class="command-header">
194
+ <code class="command-name">git merge</code>
195
+ <span class="badge branch">Branch</span>
196
+ </div>
197
+ <p class="description">Об'єднати дві гілки</p>
198
+ <div class="usage">
199
+ <strong>Як використовувати:</strong>
200
+ <pre><code>git merge my-feature</code></pre>
201
+ </div>
202
+ <div class="explanation">
203
+ <strong>Що робить:</strong>
204
+ <p>Об'єднує зміни з однієї гілки в іншу. Зазвичай на GitHub це робиться через Pull Request, але команда також працює локально.</p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </section>
209
+
210
+ <!-- Tab 2: Workflow -->
211
+ <section id="workflow" class="tab-content">
212
+ <h2>Типовий workflow новачка</h2>
213
+ <div class="workflow-steps">
214
+ <div class="step">
215
+ <div class="step-number">1</div>
216
+ <div class="step-content">
217
+ <h3>Клонування проекту</h3>
218
+ <pre><code>git clone https://github.com/user/repo.git</code></pre>
219
+ <p>Завантажуєте проект з GitHub на ваш комп'ютер</p>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="step">
224
+ <div class="step-number">2</div>
225
+ <div class="step-content">
226
+ <h3>Перейти в папку проекту</h3>
227
+ <pre><code>cd repo</code></pre>
228
+ <p>Не Git команда, але важлива :)</p>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="step">
233
+ <div class="step-number">3</div>
234
+ <div class="step-content">
235
+ <h3>Перевірити статус</h3>
236
+ <pre><code>git status</code></pre>
237
+ <p>Дізнатися, на якій ви гілці та чи змінилось щось</p>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="step">
242
+ <div class="step-number">4</div>
243
+ <div class="step-content">
244
+ <h3>Створити гілку для нової функції</h3>
245
+ <pre><code>git checkout -b add-login-page</code></pre>
246
+ <p>Робиться на окремій гілці, щоб не зламати основний код</p>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="step">
251
+ <div class="step-number">5</div>
252
+ <div class="step-content">
253
+ <h3>Редагувати файли</h3>
254
+ <pre><code>📝 Редагуйте свій улюблений редактор кодом</code></pre>
255
+ <p>Робіть свою роботу - додавайте функції, виправляйте помилки</p>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="step">
260
+ <div class="step-number">6</div>
261
+ <div class="step-content">
262
+ <h3>Перевірити змінені файли</h3>
263
+ <pre><code>git status</code></pre>
264
+ <p>Побачити, які файли ви змінили</p>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="step">
269
+ <div class="step-number">7</div>
270
+ <div class="step-content">
271
+ <h3>Додати файли до staging</h3>
272
+ <pre><code>git add .</code></pre>
273
+ <p>Підготувати всі змінені файли до збереження</p>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="step">
278
+ <div class="step-number">8</div>
279
+ <div class="step-content">
280
+ <h3>Зберегти зміни (commit)</h3>
281
+ <pre><code>git commit -m "Add login page with validation"</code></pre>
282
+ <p>Зберегти в Git з описом того, що ви зробили</p>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="step">
287
+ <div class="step-number">9</div>
288
+ <div class="step-content">
289
+ <h3>Відправити на GitHub</h3>
290
+ <pre><code>git push origin add-login-page</code></pre>
291
+ <p>Відправити вашу гілку на сервер</p>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="step">
296
+ <div class="step-number">10</div>
297
+ <div class="step-content">
298
+ <h3>Створити Pull Request</h3>
299
+ <pre><code>📝 На GitHub натисніть "Compare & pull request"</code></pre>
300
+ <p>Попросити інших переглянути ваш код і об'єднати його</p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </section>
305
+
306
+ <!-- Tab 3: Tips -->
307
+ <section id="tips" class="tab-content">
308
+ <h2>💡 Корисні поради</h2>
309
+ <div class="tips-grid">
310
+ <div class="tip-card">
311
+ <div class="tip-icon">📝</div>
312
+ <h3>Пишіть зрозумілі commit messages</h3>
313
+ <p><strong>❌ Не так:</strong> "зміни"<br><strong>✅ Так:</strong> "Add user authentication with JWT"</p>
314
+ </div>
315
+
316
+ <div class="tip-card">
317
+ <div class="tip-icon">🔄</div>
318
+ <h3>Завжди pull перед push</h3>
319
+ <p>Перед тим як відправляти свій код: <code>git pull</code>. Так ви отримаєте оновлення від колег.</p>
320
+ </div>
321
+
322
+ <div class="tip-card">
323
+ <div class="tip-icon">🌿</div>
324
+ <h3>Використовуйте гілки для нових функцій</h3>
325
+ <p>Не редагуйте основну гілку (main/master) напряму. Робіть окремі гілки для кожної функції!</p>
326
+ </div>
327
+
328
+ <div class="tip-card">
329
+ <div class="tip-icon">✅</div>
330
+ <h3>Робіть часті, маленькі commits</h3>
331
+ <p>Краще 10 дрібних комітів, ніж один величезний. Легше розуміти історію та знаходити баги.</p>
332
+ </div>
333
+
334
+ <div class="tip-card">
335
+ <div class="tip-icon">🔍</div>
336
+ <h3>Використовуйте git status часто</h3>
337
+ <p>Сумніваєтеся? Введіть <code>git status</code>. Це команда допоможе вам завжди знати, що відбувається.</p>
338
+ </div>
339
+
340
+ <div class="tip-card">
341
+ <div class="tip-icon">⚠️</div>
342
+ <h3>Будьте обережні з git push --force</h3>
343
+ <p>Ніколи не використовуйте на спільних гілках! Це може вилучити роботу колег.</p>
344
+ </div>
345
+
346
+ <div class="tip-card">
347
+ <div class="tip-icon">📚</div>
348
+ <h3>Вивчайте git log</h3>
349
+ <p><code>git log --oneline --graph</code> - чудовий спосіб побачити історію вашого проекту.</p>
350
+ </div>
351
+
352
+ <div class="tip-card">
353
+ <div class="tip-icon">🛡️</div>
354
+ <h3>Налаштуйте .gitignore</h3>
355
+ <p>Файли типу node_modules/, .env не повинні бути в Git. Використовуйте .gitignore!</p>
356
+ </div>
357
+ </div>
358
+ </section>
359
+ </main>
360
+
361
+ <!-- Footer -->
362
+ <footer class="footer">
363
+ <p>💚 Git для новачків | Вивчайте з задоволенням</p>
364
+ </footer>
365
+ </div>
366
+
367
+ <script src="script.js"></script>
368
+ </body>
369
  </html>
370
+