Створюємо проект і запускаємо в браузері — DevGuide
0:00 / 0:00Створюємо проект і запускаємо в браузері
Безкоштовно
Створюємо проект і запускаємо в браузері
Відео
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 та налаштування зручного запуску сторінки під час розробки.