Из чего состоит твой проект

Сначала — что должно происходить

Для нашей работы удобно смотреть на архитектуру с трёх сторон. Первая — замысел: что делает проект и какой путь проходит участник. Вторая — техническая: что выполняется в браузере, а что требует серверной части. Третья — организация кода: какие файлы будут в проекте и за что каждый отвечает.

Фронт — в браузере. Бэкенд — на серверной стороне

Так же можно устроить общую доску рефлексии: один участник оставляет стикер, а следующие видят его и добавляют свои. Или статистику ответов: после выбора участник узнаёт, сколько людей выбрали тот же вариант.

Вопрос для выбора: достаточно ли, чтобы результат был доступен здесь, в этом браузере, или он нужен на другом устройстве, преподавателю и другим участникам?

Что есть, как выглядит и как работает

<div class="card">
  <h3>Твой первый проект</h3>
  <p>Начни с одной идеи…</p>
  <button>Открыть подсказку</button>
</div>

.card {
  background: #fff;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 12px 28px #00000014;
}

button.addEventListener('click', () => {
  popup.showModal();
});

В «Песочнице» мы сначала собираем прототип и проверяем механику, затем наполняем его контентом и дорабатываем оформление. Так проще увидеть, работает ли сама идея, прежде чем тратить силы на её внешний вид.

Один файл или папочная структура?

Это способ организовать проект. Количество файлов не определяет, есть ли в нём бэкенд: и одна HTML-страница, и большая папка с фронтендом могут обращаться к серверу.

index.html
├─ HTML: содержание
├─ <style>: оформление
└─ <script>: поведение

project/
├─ index.html
├─ style.css
├─ script.js
└─ assets/

Для Тильды можно подготовить HTML-фрагмент со стилями и скриптом и вставить его в блок T123 «HTML-код». Если проект размещён отдельно, его можно встроить через iframe, когда площадка разрешает такое встраивание. Ещё один вариант — подготовить сборку или подключить внешние файлы.

Редактор помогает видеть структуру

Блокнота хватает, чтобы сохранить первый файл. В редакторе кода удобнее открыть всю папку, видеть подсветку синтаксиса и переключаться между разметкой, стилями и логикой. В демонстрации используется VS Code: меняем текст, сохраняем файл и смотрим результат в браузере.

Механика одна — контент меняется

Представь серию курсов: расположение блоков, кнопки и проверка ответов одинаковые, а темы, вопросы и примеры разные. Можно вынести данные в отдельный файл и обновлять его, сохраняя общую механику.

В воркшопе это показано на мини-проекте «Фраза дня». Страница загружает список фраз, а кнопка выводит случайную. Чтобы пополнить список, меняем файл с данными.

quotes.json
[
  { "id": 1, "text": "Начни с маленького шага." },
  { "id": 2, "text": "Путь осилит идущий." }
]

JSON — текстовый формат структурированных данных. Такой файл может содержать вопросы, ответы, подписи и настройки. Сам по себе он не является полноценной базой данных: в этом примере это подготовленный список, который читает страница.

При добавлении фразы важно сохранить структуру JSON: между элементами нужна запятая, после последнего элемента её нет. Имена полей должны совпадать с теми, которые ожидает скрипт.

Что поручить ИИ

Можно попросить ИИ структурировать контент, затем создать страницу, которая его читает. Укажи имена файлов, поля данных, ожидаемое поведение и способ запуска. Например:

У меня есть quotes.json — массив объектов с полями id и text. Создай index.html, style.css и script.js. Страница должна загрузить список фраз и по нажатию кнопки «Дать знак» показывать случайную фразу. Предусмотри состояния загрузки, пустого списка и ошибки. Объясни, как запустить проект через локальный HTTP-сервер.

Работать можно в чате с ИИ, редакторе кода с ИИ или генераторе приложений. При выборе учитывай, в каком виде нужен результат: один фрагмент для Тильды или проект из нескольких файлов.

Опиши архитектуру в пяти строках

1. Мой проект делает… Какую задачу решает участник?
2. В браузере происходит… Какие действия, проверки и расчёты нужны?
3. Сохранять нужно… Какие данные, для кого и на каких устройствах?
4. Код будет организован… Один файл или несколько — и почему?
5. Контент будет обновляться… Внутри страницы или в отдельном файле?

Например: «Делаю тренажёр на пять вопросов. Ответы проверяются в браузере, результат показывается сразу. Общую статистику не собираю. Для первой версии достаточно одного файла для Тильды. Если появится серия тренажёров, вынесу вопросы в отдельный источник данных».

Проверь, что разобралась

Дополнительные вопросы для самопроверки.