Підготувати робоче місце розробника та опанувати консоль (термінал) як основний інструмент взаємодії з ОС. Зрозуміти і застосувати на практиці базовий робочий цикл (Workflow) системи контролю версій Git та навчитися синхронізувати локальний код із хмарним репозиторієм (GitHub).
Перед початком роботи студент має розгорнути на своєму комп’ютері сучасне середовище веб-розробника.
Live Server — для автоматичного оновлення сторінки у браузері під час збереження файлу.Prettier — форматувальник коду (робить код охайним та вирівняним).ESLint — лінтер, який аналізує код на помилки ще до його запуску.Auto Rename Tag — автоматично перейменовує закриваючий HTML-тег, якщо ви змінили відкриваючий.Error Lens — підсвічує помилки прямо в рядку коду.npm (встановлювати бібліотеки, запускати збірку React-проектів тощо).Сучасний розробник мінімізує використання “мишки” і працює з файловою системою через текстові команди у терміналі (CLI). Завдання: Виконати серію операцій виключно через консоль.
Навігація:
pwd (або echo %cd% для старого CMD).ls -la (або dir у Windows).cd D:\projectName. Щоб повернутися на рівень вище: cd ..Маніпуляція файлами:
Створення директорій (папок) командою mkdir (Make Directory):
mkdir assets
mkdir assets/img
mkdir assets/css
Створення порожніх файлів (команда відрізняється залежно від вашої ОС та терміналу): Для UNIX (Linux/Mac) або Git Bash:
touch index.html
touch assets/css/style.css
Для Windows (PowerShell):
New-Item -Path "index.html" -ItemType "File"
"" > index.html
Виклик редактора:
Відкрити створений щойно проєкт у VS Code можна прямо з терміналу командою: code . (де крапка означає “відкрити поточну папку”).
Самостійна вправа «Термінальний квест»:
Студент повинен за 5 хвилин відтворити дерево каталогів для умовного сайту-візитки (створити папки css, js, images та відповідні файли .css, .js, .html), використовуючи лише консольні команди cd, mkdir, touch/New-Item.
Git має знати, “хто” саме вносить зміни в код, щоб потім у командній роботі було видно автора кожного рядка. Налаштуйте глобальні параметри ідентифікації у терміналі:
git config --global user.name "Ваше Ім'я та Прізвище"
git config --global user.email "ваш@email.com"
Порада: Використовуйте той самий email, на який зареєстровано ваш акаунт у GitHub.
Завдання: Пройти повний базовий цикл збереження змін (“зліпка” коду) у папці проєкту.
git init перетворює звичайну папку на Git-репозиторій (створюється прихована папка .git, яка буде стежити за змінами).git status показує, які файли були змінені, створені або видалені з моменту останнього збереження.git add . (крапка означає “всі файли”) додає всі змінені файли до індексу, готуючи їх до коміту.git commit -m "Initial commit: project structure" робить фотографію стану ваших файлів. Прапорець -m дозволяє написати коротке і зрозуміле повідомлення про те, що саме ви зробили.index.html, цикл повторюється: збереження файлу -> git add . -> git commit -m "Add base HTML structure".На даному етапі ваш код зафіксовано в git, але він існує лише на вашому жорсткому диску. Щоб він був у безпеці та доступний іншим, його треба відправити на сервер.
Завдання: Опублікувати проєкт у мережі на платформі GitHub.
git remote add origin <url_вашого_репозиторію>git push -u origin main (або master, в залежності від імені вашої головної гілки).Settings -> Pages. Оберіть гілку main і натисніть Save. Через 1-2 хвилини GitHub безкоштовно опублікує ваш HTML-файл в інтернеті та дасть публічне посилання (домен github.io).Коли над одним проєктом працює кілька людей, або ви хочете поекспериментувати з новою функцією, не зламавши робочий сайт, використовуються Гілки (Branches).
Основна гілка (main або master) — це стабільна версія проекту (продакшен).
Завдання:
git checkout -b feature/content (прапорець -b створює гілку і одразу перемикається на неї).git add . та git commit -m "Add new paragraph".git checkout main.git merge feature/content. Тепер зміни з дочірньої гілки перейшли у main.git branch -d feature/contentgit push origin --delete feature/contentКожен студент до кінця пари повинен:
git add . та git commit -m "message".