Как собрать веб-проект
Как создать веб-сайт в KVIBE#
Веб-проект — это ваш сайт на языках HTML, CSS и JavaScript. Вы пишете код, а платформа сразу показывает, как сайт выглядит.
Создание нового проекта#
- На главном экране нажмите «Новый проект».
- В списке типов проекта выберите «Веб-проект».
- Дайте проекту имя и нажмите «Создать».
Платформа автоматически создаст базовую структуру сайта: главную страницу, файл стилей и файл для кода.
Из чего состоит веб-проект#
Все видимые части сайта — картинки, стили, программный код — лежат в одной папке. Это позволяет опубликовать сайт в интернете одним нажатием.
Если вы хотите сохранить данные (например, результаты игры или ответы в опроснике), можно подключить базу данных — она работает во время тестирования в студии, но не видна на опубликованном сайте.
Как устроена студия#
После создания проекта вы попадаете в студию. Основные элементы:
- Панель файлов слева — здесь видны все файлы вашего проекта.
- Редактор кода в центре — место, где вы пишете код страницы, стилей и скриптов.
- Вкладка «Просмотр» — здесь вы видите готовый сайт.
Вкладка «Просмотр»#
В этой вкладке отображается ваш сайт. Сверху есть панель инструментов:
| Кнопка | Что делает |
|---|---|
| Иконки устройств | Показывает сайт как на компьютере, планшете или телефоне |
| Назад / Вперёд | Переход по истории просмотра |
| Обновить | Перезагружает страницу |
| Адресная строка | Показывает текущий адрес страницы |
| Дизайн | Включает режим выбора элементов |
| Консоль | Показывает ошибки и сообщения из кода |
Режим «Дизайн»#
Нажмите кнопку «Дизайн», затем кликните на любой элемент на странице. Платформа запомнит, какой элемент вы выбрали, и покажет его в чате — это помогает обсуждать дизайн с ассистентом.
Чтобы выбрать несколько элементов, удерживайте Shift при клике.
Консоль#
Если в вашем коде есть ошибка или вы выводите отладочное сообщение, оно появится здесь. Красный значок с числом означает количество новых проблем.
Как запустить сайт#
- Откройте файл с расширением
.htmlв редакторе. - Нажмите кнопку «Запустить» в верхней части редактора.
- Студия автоматически переключится на вкладку «Просмотр» с готовым сайтом.
Как опубликовать сайт#
- Нажмите на три точки в правом верхнем углу студии.
- Выберите «Опубликовать».
- Придумайте короткий адрес для сайта.
- Нажмите «Опубликовать».
Через несколько секунд ваш сайт будет доступен в интернете по адресу название.kvibe.ws.
Важно: на опубликованном сайте не работают базы данных — только то, что написано в файлах.
Полезные советы#
- Картинки и другие файлы кладите в ту же папку, что и главную страницу — тогда они будут работать и на опубликованном сайте.
- Если хотите сделать игру на холсте — это тоже часть веб-проекта.
- Для мультфильмов, 3D-игр или досок объявлений создавайте отдельные типы проектов — они устроены иначе.