Spaces:
Running
Running
| <html lang="uk"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Git для новачків - Навчальний дашборд</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <h1>📚 Git для новачків</h1> | |
| <p class="subtitle">Вивчайте основні команди Git крок за кроком</p> | |
| </div> | |
| </header> | |
| <!-- Navigation Tabs --> | |
| <nav class="tabs"> | |
| <button class="tab-button active" data-tab="basic">Базові команди</button> | |
| <button class="tab-button" data-tab="workflow">Типовий workflow</button> | |
| <button class="tab-button" data-tab="tips">Поради</button> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="content"> | |
| <!-- Tab 1: Basic Commands --> | |
| <section id="basic" class="tab-content active"> | |
| <h2>Базові команди Git</h2> | |
| <div class="commands-grid"> | |
| <!-- git init --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git init</code> | |
| <span class="badge setup">Setup</span> | |
| </div> | |
| <p class="description">Ініціалізація нового репозиторію Git</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git init</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Створює нову папку .git у вашій директорії. Це робить вашу папку "Git репозиторієм". Після цього Git почне відстежувати зміни ваших файлів.</p> | |
| </div> | |
| </div> | |
| <!-- git clone --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git clone</code> | |
| <span class="badge setup">Setup</span> | |
| </div> | |
| <p class="description">Завантажити проект з сервера</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git clone https://github.com/user/repo.git</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Копіює весь проект з GitHub (або іншого сервера) на ваш комп'ютер. Включає всю історію змін. Краще за завантаження ZIP файлу!</p> | |
| </div> | |
| </div> | |
| <!-- git status --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git status</code> | |
| <span class="badge info">Info</span> | |
| </div> | |
| <p class="description">Дізнатися, що змінилось</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git status</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Показує список файлів, які ви змінили, але ще не збереглили. Назвіть цю команду своїм "другом" - використовуйте її часто!</p> | |
| </div> | |
| </div> | |
| <!-- git add --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git add</code> | |
| <span class="badge staging">Staging</span> | |
| </div> | |
| <p class="description">Підготувати файли до збереження</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git add файл.txt | |
| git add . | |
| git add -A</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p><code>git add .</code> - додає ВСІ змінені файли до staging area (чекальня перед коммітом). <code>git add файл.txt</code> - додає конкретний файл.</p> | |
| </div> | |
| </div> | |
| <!-- git commit --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git commit</code> | |
| <span class="badge commit">Commit</span> | |
| </div> | |
| <p class="description">Зберегти зміни із описом</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git commit -m "Додав нову функцію"</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Створює "знімок" вашого коду з описом. Збереження в Git! Напишіть зрозумілий текст у лапках, щоб пізніше зрозуміти, що ви робили.</p> | |
| </div> | |
| </div> | |
| <!-- git push --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git push</code> | |
| <span class="badge remote">Remote</span> | |
| </div> | |
| <p class="description">Відправити зміни на сервер</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git push | |
| git push origin main</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Відправляє ваші коміти на GitHub. Тепер інші можуть побачити ваші зміни. Спочатку потрібен commit!</p> | |
| </div> | |
| </div> | |
| <!-- git pull --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git pull</code> | |
| <span class="badge remote">Remote</span> | |
| </div> | |
| <p class="description">Завантажити зміни з сервера</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git pull | |
| git pull origin main</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Завантажує найновіші зміни з GitHub. Якщо колеги щось змінили, ви отримаєте їхні оновлення. Виконайте це перед тим, як почати роботу!</p> | |
| </div> | |
| </div> | |
| <!-- git branch --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git branch</code> | |
| <span class="badge branch">Branch</span> | |
| </div> | |
| <p class="description">Створення окремої лінії розробки</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git branch | |
| git branch my-feature</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Показує список гілок. <code>git branch my-feature</code> - створює нову гілку. Гілки дозволяють працювати над функціями окремо від основного коду.</p> | |
| </div> | |
| </div> | |
| <!-- git checkout --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git checkout</code> | |
| <span class="badge branch">Branch</span> | |
| </div> | |
| <p class="description">Переключитися на іншу гілку</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git checkout my-feature | |
| git checkout -b new-feature</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Переходить на іншу гілку. <code>-b</code> флаг створює нову гілку ТА переходить на неї. Зручно!</p> | |
| </div> | |
| </div> | |
| <!-- git merge --> | |
| <div class="command-card"> | |
| <div class="command-header"> | |
| <code class="command-name">git merge</code> | |
| <span class="badge branch">Branch</span> | |
| </div> | |
| <p class="description">Об'єднати дві гілки</p> | |
| <div class="usage"> | |
| <strong>Як використовувати:</strong> | |
| <pre><code>git merge my-feature</code></pre> | |
| </div> | |
| <div class="explanation"> | |
| <strong>Що робить:</strong> | |
| <p>Об'єднує зміни з однієї гілки в іншу. Зазвичай на GitHub це робиться через Pull Request, але команда також працює локально.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tab 2: Workflow --> | |
| <section id="workflow" class="tab-content"> | |
| <h2>Типовий workflow новачка</h2> | |
| <div class="workflow-steps"> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-content"> | |
| <h3>Клонування проекту</h3> | |
| <pre><code>git clone https://github.com/user/repo.git</code></pre> | |
| <p>Завантажуєте проект з GitHub на ваш комп'ютер</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-content"> | |
| <h3>Перейти в папку проекту</h3> | |
| <pre><code>cd repo</code></pre> | |
| <p>Не Git команда, але важлива :)</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-content"> | |
| <h3>Перевірити статус</h3> | |
| <pre><code>git status</code></pre> | |
| <p>Дізнатися, на якій ви гілці та чи змінилось щось</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">4</div> | |
| <div class="step-content"> | |
| <h3>Створити гілку для нової функції</h3> | |
| <pre><code>git checkout -b add-login-page</code></pre> | |
| <p>Робиться на окремій гілці, щоб не зламати основний код</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">5</div> | |
| <div class="step-content"> | |
| <h3>Редагувати файли</h3> | |
| <pre><code>📝 Редагуйте свій улюблений редактор кодом</code></pre> | |
| <p>Робіть свою роботу - додавайте функції, виправляйте помилки</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">6</div> | |
| <div class="step-content"> | |
| <h3>Перевірити змінені файли</h3> | |
| <pre><code>git status</code></pre> | |
| <p>Побачити, які файли ви змінили</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">7</div> | |
| <div class="step-content"> | |
| <h3>Додати файли до staging</h3> | |
| <pre><code>git add .</code></pre> | |
| <p>Підготувати всі змінені файли до збереження</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">8</div> | |
| <div class="step-content"> | |
| <h3>Зберегти зміни (commit)</h3> | |
| <pre><code>git commit -m "Add login page with validation"</code></pre> | |
| <p>Зберегти в Git з описом того, що ви зробили</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">9</div> | |
| <div class="step-content"> | |
| <h3>Відправити на GitHub</h3> | |
| <pre><code>git push origin add-login-page</code></pre> | |
| <p>Відправити вашу гілку на сервер</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">10</div> | |
| <div class="step-content"> | |
| <h3>Створити Pull Request</h3> | |
| <pre><code>📝 На GitHub натисніть "Compare & pull request"</code></pre> | |
| <p>Попросити інших переглянути ваш код і об'єднати його</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tab 3: Tips --> | |
| <section id="tips" class="tab-content"> | |
| <h2>💡 Корисні поради</h2> | |
| <div class="tips-grid"> | |
| <div class="tip-card"> | |
| <div class="tip-icon">📝</div> | |
| <h3>Пишіть зрозумілі commit messages</h3> | |
| <p><strong>❌ Не так:</strong> "зміни"<br><strong>✅ Так:</strong> "Add user authentication with JWT"</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-icon">🔄</div> | |
| <h3>Завжди pull перед push</h3> | |
| <p>Перед тим як відправляти свій код: <code>git pull</code>. Так ви отримаєте оновлення від колег.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-icon">🌿</div> | |
| <h3>Використовуйте гілки для нових функцій</h3> | |
| <p>Не редагуйте основну гілку (main/master) напряму. Робіть окремі гілки для кожної функції!</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-icon">✅</div> | |
| <h3>Робіть часті, маленькі commits</h3> | |
| <p>Краще 10 дрібних комітів, ніж один величезний. Легше розуміти історію та знаходити баги.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-icon">🔍</div> | |
| <h3>Використовуйте git status часто</h3> | |
| <p>Сумніваєтеся? Введіть <code>git status</code>. Це команда допоможе вам завжди знати, що відбувається.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-icon">⚠️</div> | |
| <h3>Будьте обережні з git push --force</h3> | |
| <p>Ніколи не використовуйте на спільних гілках! Це може вилучити роботу колег.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-icon">📚</div> | |
| <h3>Вивчайте git log</h3> | |
| <p><code>git log --oneline --graph</code> - чудовий спосіб побачити історію вашого проекту.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-icon">🛡️</div> | |
| <h3>Налаштуйте .gitignore</h3> | |
| <p>Файли типу node_modules/, .env не повинні бути в Git. Використовуйте .gitignore!</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <p>💚 Git для новачків | Вивчайте з задоволенням</p> | |
| </footer> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |