Как создаются интерактивные курсы. Разбираем поэтапно

HTML Academy — специализированная онлайн-школа веб-разработки. С 2013 года мы делаем курсы для начинающих и продолжающих, и один из наших продуктов — интерактивные курсы, они же — тренажёры. Когда Академия только появилась, браузеры были грустными и маленькими, а стандарты не такими необъятными. Поэтому пределом возможностей для интерактивных курсов были испытания по CSS. Постепенно появились главы по JavaScript, а в 2019, как только появилась возможность запустить сервер PHP прямо в браузере, мы сразу же сделали онлайн-тренажёры по PHP.

О том, как мы делаем курсы, расскажем на примере обновлённого курса «Знакомство с JavaScript». Там мы делаем новостной сайт с переключением тем, раскладкой новостей, фильтрами и подпиской на обновления.

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

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

Плюс нужны базовые вещи из программирования — условия, циклы, логические операторы, без них вообще сейчас никуда. Всё это мы объясняем.

Для этого курса мы, среди прочего, выбрали валидацию формы и паролей, фильтрацию новостей и смену темы на сайте.Критерии выбора задач для конкретной главы простые: задачи должны быстро решаться, результат должен быть видимым, чтобы человек написал пару строчек, и на странице появилась интерактивная магия (для JavaScript). Для вёрстки тоже есть критерий магии — достаточно изменить разметку или CSS и сразу увидеть, что что-то поменялось, и случилась магия, сделанная своими руками.

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

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

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

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

Испытание — это задание в конце главы. Его цель — закрепить и проверить все полученные знания и навыки.

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

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

В основном ребята смотрят, насколько понятно написан текст, интересно ли вообще проходить задания, или задача просто скучная. Ну и вдруг закрались ошибки — они могут быть на всех этапах, поэтому все проверяют очень внимательно.

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

В конце мы анализируем всё, что написали тестировщики, и вносим в главу финальные правочки.

Когда всё готово, глава появляется на сайте. Звучат фанфары, а в метрики добавляется новая строчка.

Сначала глава закрыта от всех, кроме команды, и мы всё тщательно проверяем — перечитываем, пересматриваем, перетыкиваем и вообще стараемся ничего не забыть. Когда все проверки пройдены, мы открываем главу и анонсируем её всем пользователям.

Последняя глава по JavaScript с нуля делалась три недели — это наш рекорд.

Конечно, как и многие разработчики, мы с течением времени смотрим на старые главы и думаем «Что это был? !».

Тогда мы собираемся в кружочек, смотрим отзывы, статистику прохождения и понимаем, что где-то рассказываем слишком сложно, а можно проще и лучше. И переделываем.

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

А теперь сделайте джаваскриптовую магию своими руками.

«Знакомство с JavaScript» — бесплатно.