Вивчай
Домашнє завдання #3 · Командний рядок, Git та GitHub
100 балів+30 бонусbeginner

Домашнє завдання #3: Структура проєкту + Git + GitHub

Тема: Створення проєкту через термінал, відстеження в Git, публікація на GitHub

Мета завдання

Застосувати на практиці все з перших трьох уроків: термінал, Git та GitHub. Ти створиш структуру реального веб-проєкту, зробиш серію комітів та зіллєш свій перший Pull Request.

Що ти вже маєш

Репозиторій курсу my-web-course з ДЗ #1-2. Якщо ти досі працював через веб-інтерфейс GitHub — саме час перейти на термінал: склонуй репозиторій командою git clone (адресу візьми з зеленої кнопки Code на сторінці репозиторію).

Що потрібно зробити

Подивись, як виглядає весь процес від створення структури до push на GitHub:

Повний робочий процес: mkdir, git init, коміти, push, feature branchПовний робочий процес: mkdir, git init, коміти, push, feature branch

1. Створити структуру проєкту через термінал

У репозиторії my-web-course створи папку hw-03/ з такою структурою:

hw-03/
├── index.html
├── about.html
├── projects.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
│   └── (порожня папка — для фото пізніше)
└── README.md

Спробуй зробити це тільки командами терміналу, без графічного інтерфейсу — чекер цього не побачить, але тренуєшся тут саме ти. Це той навик, який щодня використовує кожен розробник.

Порада

Підказка: тобі знадобляться команди mkdir, touch та cd. Згадай урок 1.1!

2. Додати вміст у файли

Відкрий файли у будь-якому редакторі та додай:

  • README.md — напиши 2-3 речення про що цей проєкт (це твоє майбутнє портфоліо!)
  • index.html — мінімальний HTML-шаблон (DOCTYPE, html, head, body, заголовок h1)
  • about.html — теж базовий HTML з заголовком "Про мене"
  • projects.html — базовий HTML з заголовком "Мої проєкти"

3. Зробити серію комітів

Важливо — не один великий коміт, а кілька маленьких з осмисленими повідомленнями:

КомітЩо додати
1-йREADME.md та .gitignore
2-йindex.html
3-йabout.html та projects.html
4-йCSS та JS файли

Після комітів запуш зміни на GitHub (git push).

Увага

Якщо в корені репозиторію ще немає файлу .gitignore — створи його з рядком node_modules/. Звичка, яка збереже тебе від проблем у майбутньому.

4. Створити гілку та Pull Request

  1. Створи гілку feature/add-navigation
  2. У кожному HTML-файлі додай посилання на інші дві сторінки
  3. Зроби коміт у цій гілці
  4. Запуш гілку на GitHub
  5. Створи Pull Request з гілки feature/add-navigation у main
  6. Злий (merge) Pull Request на GitHub

Як здати

  1. Робота — в публічному GitHub-репозиторії курсу my-web-course, у папці hw-03/
  2. У папці ДЗ — README.md: 2-3 речення що зроблено
  3. Мінімум 5 комітів з осмисленими повідомленнями (не "fix"/"update") — чекер бачить git-історію
  4. Переконайся, що на GitHub є закритий (merged) Pull Request
  5. Надішли посилання на репозиторій (можна одразу на папку hw-03)

Критерії оцінювання

КритерійТипБали
Структура папок у hw-03/ відповідає завданню[код]20
Є .gitignore з node_modules/[код]10
README.md заповнений (2-3 речення про проєкт)[код]10
HTML-файли мають базову структуру (DOCTYPE, html, head, body, h1)[код]15
Навігаційні посилання між сторінками додані через гілку feature/add-navigation[код]10
Git-історія: 5+ комітів, осмислені повідомлення, merged Pull Request[код]25
Якість коду[код]10
Разом100

Бонусні завдання

БонусТипБали
Увімкни GitHub Pages (Settings → Pages → Deploy from branch main) і додай посилання на живий сайт у README.md[код]+10
Зроби другий Pull Request feature/add-content — додай більше тексту на сторінки (абзаци, списки)[код]+10
Додай файл CHANGELOG.md, де коротко опишеш що було зроблено в кожному коміті[код]+10

Що далі

У ДЗ #4 ти налаштуєш у цьому ж репозиторії npm та Prettier — і твоє робоче середовище стане по-справжньому професійним.

Пов'язані уроки