Содержание

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.

Инфраструктура

  • Учимся вставлять свой код в Тильду и Редимаг.
  • Основы Git. Как удобнее работать над проектом самому и в команде и иметь полный контроль над его версиями.

11.

Датавиз-практика

  • Делаем интерактивный таймлайн, который автоматически строится из данных с помощью JS.
  • Отвечаем на вопросы.

12.

Веб-практика

  • Делаем навигационное меню для сайта, которое автоматически строится из заголовков.
  • Отвечаем на вопросы.
  • Рассказываем, чему учиться дальше.

Мы учим фундаментально и последовательно, поэтому после прохождения курса появится понимание, как сделать не только примеры выше, а в принципе всё, что пришло в голову.

А ещё

Иметь базовые навыки кодинга полезно, даже если не собираешься программировать:

  • Начинаешь понимать, как примерно устроено внутри всё, чем пользуешься каждый день: сайты, веб-приложения и информационные системы.
  • Это помогает делать макеты, к которым у команды разработки нет вопросов. Начинаешь разговаривать с программистами на одном языке и понимать, что пишется за полчаса, а что за месяц. Это особенно ценно для продуктовых дизайнеров — опыт программирования помогает верстать более логически корректные и целостные макеты.
  • Это хорошая инвестиция в будущее. Зная основы Джаваскрипта, будет значительно легче выучить любой другой язык программирования. А ещё будет легче переквалифицироваться во фронтендера — курс станет хорошей базой для любого фреймворка.
  • Это весело и иногда похоже на магию.

Подготовка

Мы ожидаем, что вы знакомы с основами HTML и CSS. Не нужно быть профессиональным верстальщиком — будет достаточно прочитать две статьи: Основы HTML и Основы CSS. Или можно пройти базовый курс по вёрстке — например, от Интуиции.

FAQ

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

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

Формат

Курс предзаписан — он состоит из двенадцати видеолекций по полтора часа и представлен в виде в виде двенадцати телеграм-каналов. В каждом из каналов лежит запись занятия, домашнее задание, дополнительные материалы, приёмы, тесты и опросы.

Доступ к каналам остаётся навсегда.

Преподаватели

Преподаватель дата-арта в ВШЭ, амбассадор генеративного дизайна в России, основатель Генклуба.
Разработчик в сфере автоматизации дизайна. Написал Потокус и Фокус в Студии Лебедева, делал Таймстрайп, работал с Додо-пиццей.

На курсе Адам рассказывает материал, ведёт теорию и практику, а Иван помогает, задаёт вопросы и разбавляет занятия своим бархатным басом.

Выглядит это примерно так:

Отзывы

Артем Река, дизайнер

Я как-то сидел на сайте «Интуиции» и тупо водил мышкой по картинкам, проговаривая про себя: «Ебать кайф». То же самое повторилось у «Петрика».

А потом на курсе мне показали, как делать такие эффекты. Меня восхитило, насколько это просто и при этом волшебно. До курса я не делал ничего серьёзнее калькулятора с возведением в степень, поэтому для меня всё, что выходило за рамки базового CSS, казалось магией.

Теперь я могу использовать магию и превращать её в фокусы.

Пропало ощущение, что мир волшебства — для избранных. Сорри за абстракции, реально так ощущается.

Адам не зря читал рэп в школе — фристайл получается достойный. Мне очень нравится такой стиль преподавания. Спасибо за ответы на вопросы и классные проекты.

Ване тоже респект за атмосферу и слежку за тем, чтобы Адам не вводил новые термины без объяснений. Привет из Школы Бюро, кстати.

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

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

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

Нателла, дизайнер

Пока прошла половину курса.

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

Одна из сложностей — продержаться весь курс и пройти его, делать и смотреть регулярно, у меня вот не получилось.

А ожидания от курса превзошли все мои... ожидания). Курс суперполезный. Ребята, вы классно всё рассказали. Мне понравилось, как взаимодействуют Адам и Иван на лекциях. Всё, что узнала, можно пробовать, делать, применять или просто поиграться.

Ирина Коломина, разработчик, консультант

У меня случилась революция.

Шла на курс попрактиковать JS через визуализацию, чтобы развить свои навыки и работать быстрее, но по ходу обучения поняла, что новые знания позволяют перейти на совсем другой уровень.

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

Самое полезное на курсе — живой код от Адама с вопросами и предложениями от Вани.

На занятиях не просто слушаешь теорию и практикуешь на домашках, а погружаешься в процесс разработки и понимаешь, как надо подходить к решениям.

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

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

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

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

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

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

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

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

Купить курс

Курс доступен полностью сразу после оплаты. Цена будет постепенно повышаться:

14 900 ₽
−6 %
Сейчас
15 900 ₽
1 апреля

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

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

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