Программа

1—3.

Основы JavaScript

  • Отладка и консоль. Типы данных и арифметические операции. Переменные.
  • Ветвления и логические операции. Циклы. Делаем ёлочку.
  • Массивы. Функции, параметры и аргументы.
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0

4.

Основы программирования сайта

  • Управляем содержимым страницы из кода.
  • Динамически задаём классы и стили.
  • Обрабатываем действия пользователя.

5.

Отслеживание мыши

  • Обрабатываем движение мыши или тачпада и отслеживаем позицию курсора.
  • Пишем скрипт для следования объектов за мышью.
  • Эффект «просвечивания» при наведении мышки.
  • Генерируем новые объекты за курсором.

6.

Отслеживание скролла: часть 1

  • Учимся отслеживать скролл и определять положение страницы.
  • Эффект «пробуждения»: меняем классы и стили при появлении элемента в зоне видимости.
  • Определяем фазу проскролливания и создаём многоступеньчатую анимацию.

7.

Отслеживание скролла: часть 2

  • Учимся делать плавные непрерывные анимации при проскроллировании страницы.
  • Эффект параллакса: добавляем на сайт иллюзию объёмности.
  • Покадровая анимация из видео при скролле сайта.

8.

Стоп-моушен

  • Делаем покадровую анимацию из набора картинок.
  • Привязываем ход анимации к движению мыши, скроллу или ко времени.
  • Добавляем дополнительные трансформации для придания динамики.
Кассета фантастической красоты взята из проекта «Настоящее зерно»
Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · СеткаСетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка · Сетка

9.

Типографика

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

10.

Вставляем в конструктор

Учимся вставлять свой код в Тильду и Редимаг.

11—12.

Делаем что-то вместе

  • Отвечаем на вопросы и помогаем запрограммировать примеры веб-штуковин, принесённые с собой и из интернета.
  • А как закодить это? А это? А какие ещё есть разные штуки? А что делать дальше?
  • И другие разные вопросы всякие.

FAQ

— Я ещё не умею программировать. Мне подойдёт курс?

Да, курс рассчитан на новичков. Мы обучаем программированию с нуля и начинаем с самых-самых основ.

Курс ведут

Иван Дианов
Преподаватель дата-арта в ВШЭ, амбассадор генеративного дизайна в России, основатель Генклуба. Задаёт вопросы, помогает всем в чате и разбавляет занятие своим бархатным басом.
Адам Арутюнов
Разработчик в сфере автоматизации дизайна. Делал Потокус, Фокус и Иронова в Студии Артемия Лебедева. Ведёт занятия.

Отзывы

Софья Келемзина, дизайнер в nikitakozin.com

Вёрстка — ван лав, JS — целый новый мир.

У меня теперь есть новая игрушка! Вместо того, чтоб вечером залипнуть в какую-нибудь компьютерную игру, я теперь сажусь ковырять вёрстку и JS :-) Так же увлекательно! И гайды есть: теперь я всегда знаю куда подсмотреть, если что-то не получается.

Антонина Печерская, начинающий UI/UX-дизайнер

Очень большие плюсы, которые мне помогали: объяснение HTML сразу в паре с CSS и уточняющие вопросы Ивана во время лекций. И само собой, разжёвывание даже самых простых вещей от Адама.

Узнал, что всё не так сложно, как казалось всегда. Пока что пробую играться с инструментом и прощупать возможности дальше. Готовлю обновление портфолио.

Самое полезное на курсе — принципы и живость. Это не туториалы, а именно обучение.

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

Готовился, что местами будет муторно и скучно. Ожидания не оправдались. Ожидал, что месяц 3 раза в неделю — это много. Пролетело незаметно.

Иван Дианов, преподаватель

Классно, что можно перебивать Адама и мне за это ничего не будет.

Формат

  • Курс длится 4 недели, с 19 августа по 13 сентября;
  • Три занятия в неделю: в понедельник, среду и пятницу;
  • Занятия проходят в Зуме, начинаются в 17:00 по Москве и длятся полтора часа;
  • Общий чат в Телеграме, где можно задать вопрос или поделиться чем угодно;
  • Доступ к записям занятий и к чату сохраняется навсегда.

Записаться на курс

Набор закрыт. Подпишитесь на наш телеграм-канал, чтобы не пропустить начало следующего набора.

Оплата через телеграм-бота, платёж обрабатывает ЮКасса. После оплаты бот пришлёт ссылку на телеграм-чат.

Принимаются российские карты. Если такой нет — пишите, что-нибудь придумаем. Можно оплатить по реквизитам ИП. Принимаем оплату по безналу от юрлиц.

При покупке действует публичная оферта и политика обработки персональных данных.

СеткаСетка