Створюємо проект і запускаємо в браузері
- Відео
- 1 відео
Перший проєкт починається не з великої кількості коду, а зі створення окремої папки та правильного відкриття її в редакторі. У цьому матеріалі покроково показано, як підготувати робоче місце для невеликого HTML-проєкту.
Ви створите папку, відкриєте її у VS Code, додасте перший файл і підготуєте сторінку до запуску в браузері. Окрема увага приділяється діям, які можуть бути незрозумілими людині, що вперше користується редактором коду.
Що буде у відео
- як створити окрему папку для навчального проєкту;
- чому не варто відкривати у VS Code одразу всю папку з усіма проєктами;
- як перетягнути потрібну папку у вікно редактора;
- як відкрити проєкт через
File → Open Folder; - як створити перший файл
index.html; - як додавати нові файли та папки через панель VS Code;
- як виправити структуру, якщо файл або папка випадково опинилися не в тому місці.
Для кого цей матеріал
Матеріал підходить початківцям, які вже встановили VS Code, але ще не впевнено створюють проєкти, відкривають папки в редакторі та працюють із файлами через його панель.
Що зробити після перегляду
- Створіть загальну папку для навчальних проєктів.
- Усередині неї створіть окрему папку для першого проєкту.
- Відкрийте саме цю папку у VS Code.
- Спробуйте обидва способи відкриття: перетягування та
Open Folder. - Створіть файл
index.html. - Додайте окрему папку для CSS.
- Перевірте, чи всі файли й папки знаходяться на правильному рівні.
- Відкрийте створену HTML-сторінку в браузері.
Наступний крок
Коли ви навчитеся впевнено створювати й відкривати проєкти, можна переходити до написання першої HTML-розмітки, підключення CSS та налаштування зручного запуску сторінки під час розробки.