Створюємо проект і запускаємо в браузері

Перший проєкт починається не з великої кількості коду, а зі створення окремої папки та правильного відкриття її в редакторі. У цьому матеріалі покроково показано, як підготувати робоче місце для невеликого HTML-проєкту.

Ви створите папку, відкриєте її у VS Code, додасте перший файл і підготуєте сторінку до запуску в браузері. Окрема увага приділяється діям, які можуть бути незрозумілими людині, що вперше користується редактором коду.

Що буде у відео

• як створити окрему папку для навчального проєкту;
• чому не варто відкривати у VS Code одразу всю папку з усіма проєктами;
• як перетягнути потрібну папку у вікно редактора;
• як відкрити проєкт через File → Open Folder;
• як створити перший файл index.html;
• як додавати нові файли та папки через панель VS Code;
• як виправити структуру, якщо файл або папка випадково опинилися не в тому місці.

Для кого цей матеріал

Матеріал підходить початківцям, які вже встановили VS Code, але ще не впевнено створюють проєкти, відкривають папки в редакторі та працюють із файлами через його панель.

Що зробити після перегляду

1. Створіть загальну папку для навчальних проєктів.
2. Усередині неї створіть окрему папку для першого проєкту.
3. Відкрийте саме цю папку у VS Code.
4. Спробуйте обидва способи відкриття: перетягування та Open Folder.
5. Створіть файл index.html.
6. Додайте окрему папку для CSS.
7. Перевірте, чи всі файли й папки знаходяться на правильному рівні.
8. Відкрийте створену HTML-сторінку в браузері.

Наступний крок

Коли ви навчитеся впевнено створювати й відкривати проєкти, можна переходити до написання першої HTML-розмітки, підключення CSS та налаштування зручного запуску сторінки під час розробки.