Пошук уроків, статей та іншого контенту
Встановите Visual Studio Code, налаштуєте його для веброзробки та створите робочу папку.
Visual Studio Code, або VS Code, — редактор коду від Microsoft. У ньому можна створювати HTML-, CSS- і JavaScript-файли, переглядати структуру проєкту та встановлювати додаткові розширення.
Не плутайте Visual Studio Code з Visual Studio. Для початку веброзробки потрібен саме VS Code.
Відкрийте офіційний сайт Visual Studio Code.
Завантажте версію для Windows.
Запустіть інсталяційний файл.
Прочитайте ліцензійну угоду та прийміть її.
Залиште стандартну папку встановлення.
На кроці з додатковими параметрами бажано увімкнути:
додавання команди code до змінної PATH;
пункт Open with Code у контекстному меню;
створення ярлика на робочому столі.
Натисніть Install і дочекайтеся завершення встановлення.
Завантажте версію VS Code для macOS.
Відкрийте завантажений файл.
Перетягніть Visual Studio Code до папки Applications
Запустіть VS Code через Applications або Spotlight.
Якщо macOS показує попередження про запуск програми, підтвердьте відкриття.
Спосіб встановлення залежить від дистрибутива Linux. Завантажте відповідний пакет на офіційному сайті VS Code:
.deb — для Debian, Ubuntu та сумісних систем;
.rpm — для Fedora, CentOS та сумісних систем;
пакет для інших дистрибутивів — відповідно до їхнього менеджера пакетів.
Після встановлення запустіть VS Code через меню програм.
Після запуску VS Code ви побачите кілька основних областей:
Activity Bar — вертикальна панель зліва для переходу між розділами;
Explorer — список файлів і папок проєкту;
Editor — область редагування файлів;
Terminal — вбудований термінал;
Extensions — розділ для встановлення розширень.
Для відкриття або приховування бічної панелі використовуйте комбінацію:
Windows і Linux — Ctrl + B;
macOS — Cmd + B.
За замовчуванням інтерфейс VS Code англійською мовою. Це не заважає навчанню, адже назви команд часто використовують саме англійською.
Якщо потрібен український інтерфейс:
Відкрийте розділ Extensions.
У пошуку введіть Ukrainian Language Pack.
Встановіть розширення Ukrainian Language Pack for Visual Studio Code.
Перезапустіть VS Code, якщо програма запропонує це зробити.
Назви кнопок можуть змінитися після перемикання мови, але розташування основних елементів залишиться тим самим.
Розширення додають до VS Code нові можливості. Щоб установити розширення:
Відкрийте Extensions на бічній панелі.
Введіть назву розширення в поле пошуку.
Переконайтеся, що вказаний правильний автор.
Натисніть Install.
Для початку достатньо таких розширень:
Live Server від Ritwick Dey запускає локальний вебсервер і автоматично оновлює сторінку після змін у файлах.
Після встановлення HTML-файл можна відкрити в браузері через кнопку Go Live у нижній частині вікна VS Code.
Prettier - Code formatter автоматично форматує HTML, CSS та інші файли в єдиному стилі.
Після встановлення розширення можна відформатувати відкритий файл:
Windows і Linux — Shift + Alt + F;
macOS — Shift + Option + F.
Відкрийте налаштування через:
Windows і Linux — Ctrl + ,;
macOS — Cmd + ,.
Скористайтеся пошуком у верхній частині вікна налаштувань.
Знайдіть параметр Files: Auto Save і встановіть значення afterDelay.
Тепер VS Code автоматично зберігатиме зміни через короткий проміжок часу після редагування.
Знайдіть параметр Editor: Format On Save і ввімкніть його.
Якщо встановлено Prettier, VS Code форматуватиме файл під час збереження.
Знайдіть параметр Editor: Font Size і встановіть зручне значення, наприклад 16.
Змінити масштаб усього інтерфейсу можна комбінаціями:
Windows і Linux — Ctrl + або Ctrl -;
macOS — Cmd + або Cmd -.
Папка проєкту містить усі файли однієї вебсторінки або вебсайту.
Створимо папку my-first-page.
Створіть папку в зручному місці, наприклад у Documents.
Назвіть її my-first-page.
Запустіть VS Code.
Виберіть File → Open Folder.
Вкажіть папку my-first-page.
Підтвердьте відкриття папки, якщо VS Code покаже повідомлення про довіру до файлів.
Після цього назва папки з’явиться в розділі Explorer.
Якщо папка ще не створена:
Виберіть File → Open Folder.
У вікні вибору папки натисніть кнопку створення нової папки.
Назвіть папку my-first-page.
Відкрийте її у VS Code.
Важливо відкривати саме папку проєкту, а не окремий файл. Так VS Code правильно показує всі файли та застосовує налаштування до всього проєкту.
У папці my-first-page створіть два файли:
my-first-page/
├── index.html
└── styles.cssindex.htmlУ розділі Explorer натисніть кнопку створення нового файлу та назвіть його index.html.
Додайте такий код:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя перша сторінка</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="card">
<h1>Моя перша вебсторінка</h1>
<p>Я налаштував або налаштувала VS Code для веброзробки.</p>
</main>
</body>
</html>styles.cssСтворіть файл styles.css і додайте стилі:
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
background-color: #f2f4f8;
}
.card {
max-width: 520px;
padding: 32px;
border-radius: 12px;
background-color: white;
box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
text-align: center;
}
h1 {
margin-top: 0;
color: #1f2937;
}
p {
color: #4b5563;
}Збережіть файли:
Windows і Linux — Ctrl + S;
macOS — Cmd + S.
Якщо встановлено Live Server:
Відкрийте файл index.html.
Натисніть Go Live у нижній частині вікна VS Code.
Сторінка відкриється в браузері.
Змініть текст або CSS-стиль і збережіть файл.
Перейдіть у браузер — сторінка оновиться автоматично.
Щоб зупинити локальний сервер, натисніть на напис із номером порту в нижній частині VS Code або закрийте вкладку браузера та виконайте команду зупинки сервера.
Без Live Server файл також можна відкрити у браузері вручну: знайдіть index.html у файловому менеджері та відкрийте його подвійним клацанням.
VS Code має вбудований термінал, але для створення першої HTML-сторінки він не обов’язковий.
Відкрити або закрити термінал можна через меню Terminal → New Terminal.
Термінал відкривається в робочій папці проєкту, тому з ним зручно виконувати команди, пов’язані саме з цим проєктом.
Visual Studio — інше середовище розробки, переважно для великих програмних проєктів. Для цього курсу потрібен Visual Studio Code.
Якщо відкрити тільки index.html, у провіднику може не бути всієї структури проєкту. Використовуйте File → Open Folder і відкривайте папку my-first-page.
Перевірте, що файли називаються саме:
index.html
styles.cssНаприклад, index.html.txt — це текстовий файл, а не HTML-файл.
У index.html має бути такий рядок:
<link rel="stylesheet" href="styles.css">Файли index.html і styles.css повинні лежати в одній папці.
Перевірте, що:
відкрито папку проєкту;
відкрито файл index.html;
розширення Live Server встановлено;
у VS Code немає незбережених змін.
Як альтернативу можна відкрити index.html безпосередньо у браузері.
У цьому уроці ви:
встановили Visual Studio Code;
ознайомилися з його основними областями;
встановили розширення для веброзробки;
увімкнули автоматичне збереження та форматування;
створили робочу папку my-first-page;
створили файли index.html і styles.css;
відкрили першу вебсторінку в браузері.