Настраиваем рабочую среду: получаем доступ к ИИ и учимся ориентироваться в DevTools браузера.
0.1
Где купить ИИ в России
Обзор сервисов-посредников (Playerok, API-shop) и способов получить доступ к ChatGPT, Claude и другим нейросетям без VPN и иностранной карты. Настраиваем первый рабочий промт.
0.2
Знакомство с DevTools Tilda
Как открыть инструменты разработчика в браузере, найти нужный блок в DOM, прочитать CSS-классы и скопировать ID элемента. DevTools — ваш главный инструмент на всём курсе.
💡
Модуль 1 · Промты и цикл3 урока
Понимаем архитектуру Tilda, учимся составлять точные промты и отрабатываем полный цикл работы с ИИ.
1.1
Как Tilda устроена изнутри
Структура страниц Tilda: блоки, секции, T123-блок для кастомного кода. Куда вставлять JS и CSS, как они исполняются, почему важен порядок загрузки скриптов.
1.2
Формула промта
Структура эффективного промта: контекст, задача, формат вывода, ограничения. Почему «напиши код» не работает, а конкретный запрос с примером — работает. Шаблоны для разных задач.
1.3
Полный цикл генерация → ошибка → исправление
Как правильно читать ошибки консоли и формулировать промт для исправления. Итеративный подход: не боимся ошибок, учимся их скармливать обратно ИИ.
🔧
Модуль 2 · Базовый DOM5 уроков
Манипулируем DOM: классы, атрибуты, перемещение блоков, создание и поиск элементов.
2.1
Классы и атрибуты
querySelector, classList.add/remove/toggle, setAttribute/getAttribute. Как найти элемент по классу и изменить его внешний вид или поведение через JS без правки HTML.
2.2
Перемещение блоков
appendChild, insertBefore, prepend, append. Как перемещать существующие DOM-элементы без их пересоздания — например вынести кнопку в другое место страницы.
2.3
Обёртка элементов
Как программно обернуть элемент в новый контейнер через createElement + insertBefore + appendChild. Практический кейс: автообёртка изображений для ленивой загрузки или кастомного лайтбокса.
2.4
Создание новых элементов
createElement, textContent, innerHTML. Динамическое добавление контента на страницу: теги, карточки, бейджи. Разница между textContent и innerHTML и когда использовать каждый.
2.5
Поиск по содержимому
querySelectorAll + Array.from + filter + includes. Как найти элементы по тексту внутри, а не только по классу или ID. Практика: подсветка ключевых слов, фильтрация карточек по содержимому.
⚡️
Модуль 3 · Скролл и интерактив4 урока
IntersectionObserver, sticky-элементы, обработка кликов и сохранение данных в браузере.
3.1
IntersectionObserver
API для отслеживания видимости элементов без нагрузки на процессор. Анимации при скролле: fade-in, stagger-эффект (появление по очереди), rootMargin и threshold. Чище и быстрее чем scroll event.
3.2
Клонирование + sticky-навигация
cloneNode(true) для создания sticky-копии меню Tilda. Логика показа/скрытия при скролле, hide-on-scroll-down паттерн, requestAnimationFrame для оптимизации. Обработка z-index в Tilda.
3.3
Взаимодействие по клику
classList.toggle для переключателей и фильтров, navigator.clipboard для копирования промокодов и реквизитов, делегирование событий через event.target.closest — один обработчик вместо сотни.
3.4
localStorage
Сохранение предпочтений пользователя между визитами: вид каталога, тёмная тема, позиция скролла. JSON.stringify/parse для объектов, обработка ошибок, учёт системных предпочтений ОС.
📦
Модуль 4 · Данные и текст3 урока
Читаем URL-параметры, работаем с data-атрибутами и управляем текстовыми данными на странице.
4.1
URL-параметры
URLSearchParams для чтения GET-параметров из адреса страницы. Персонализация контента по utm_source, предзаполнение форм данными из ссылки, аналитика источников трафика прямо на клиенте.
4.2
data-атрибуты
dataset API для хранения данных прямо в HTML без лишнего JS. Управление фильтрами, каталогами, конфигурацией компонентов через data-атрибуты. Чище чем classList-хаки и id-поиски.
4.3
Работа с текстом и шаблонами
Template literals для генерации HTML-строк, textContent vs innerHTML, динамические шаблоны для карточек и списков. Как ИИ помогает генерировать структуры данных и рендерить их на странице.
🔌
Модуль 5 · Tilda API4 урока
Подключаемся к событиям форм, работаем с магазином, попапами и отслеживаем изменения DOM.
5.1
События форм
tildaform:aftersuccess — аналитика, редиректы, кастомные сообщения после отправки. tildaform:beforesend — добавление UTM-меток, дополнительная валидация, чтение данных до отправки.
5.2
Магазин и корзина
tStoreRendered для работы с каталогом после асинхронной загрузки, tStoreVariantChange для отслеживания выбора вариантов. API корзины: tcart__openCart/closeCart, window.tcart с данными заказа.
5.3
Попапы и слайдеры
t_popup__showPopup/closePopup для программного управления попапами. Exit-intent техника удержания, автопоказ по таймеру через sessionStorage. События slideChangeStart/End для кастомизации слайдеров.
5.4
MutationObserver
API для отслеживания изменений DOM в реальном времени. Функция waitForElement для ожидания асинхронно рендеримых блоков Tilda — вместо ненадёжного setTimeout. Когда использовать Observer, а когда события Tilda.
✨
Модуль 6 · Визуальные эффекты4 урока
GSAP, Lottie-анимации, частицы tsParticles и 3D-сцены на Three.js прямо в Tilda.
6.1
GSAP + ScrollTrigger
Профессиональная библиотека анимаций. Подключение через CDN в Tilda, gsap.to/from/timeline, ScrollTrigger для анимаций привязанных к позиции скролла. Плавнее и мощнее чем CSS transitions.
6.2
Lottie-анимации
After Effects-анимации в JSON-формате прямо в браузере. Подключение lottie-player в Tilda, управление воспроизведением через JS (play/pause/stop), интеграция в блоки как иконки и иллюстрации.
6.3
tsParticles
Анимированные частицы как фоновый эффект для героев и обложек. Конфигурация через JSON-объект, управление интерактивностью, оптимизация производительности для слабых устройств.
6.4
Three.js
3D-сцены в браузере без плагинов. Базовая сцена: рендерер, меш, освещение, анимационный цикл requestAnimationFrame. Встраивание в фоновый canvas Tilda-блока.
🏆
Модуль 7 · Финальный проект1 урок
Собираем финальную страницу с нуля, применяя все техники курса в одном проекте.
7.1
Финальная страница с нуля
Сборка полноценного лендинга с применением всех техник курса: анимации при скролле, интерактивные элементы, события Tilda, визуальные эффекты. Полный цикл работы с ИИ от концепции до финального результата.