Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Школа интернет-технологий в Санкт-Петербурге
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
39
Битрикс24

Битрикс24

www.bitrix24.ru

30
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Flowlu

Flowlu

flowlu.ru

10
GIFTD

GIFTD

giftd.tech

9
Aword

Aword

Приложение для изучения английских слов

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Как мы создаем учебные задания: отрисовка, теория, примеры, интерактивная среда

1 867 3 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Обучение разработчиков – это решение огромного количества маленьких задач. Эта статья – ответы на десятки вопросов о том, как мы создаем практические задания, почему настолько внимательно к ним подходим и к чему нужно готовиться, если вы хотите у нас учиться. Давайте посмотрим изнутри, как все устроено. Добро пожаловать на небольшую экскурсию по методической лаборатории ES!

b_55630cf421759.jpg

Как создается структура курса?

Обычно мы не знаем, сколько будет занятий в курсе, так что мы просто составляем список тем и предполагаем, что 2-3 темы поместятся в 4 часа. Иногда курсы становятся на несколько занятий длиннее, иногда немного короче. Для каждой темы мы готовим от 10 до 20 практических заданий для отработки навыков и лучшего запоминания. Для каждой темы создается презентация, придумывается тест и разрабатывается схема-шпаргалка.

Как создаются задания?

В отличие от большинства школ, мы уделяем огромное внимание дизайну и метафорам в заданиях, ведь на 40-50 часов для десятков студентов эти задания станут буквально смыслом жизни. Для лучшей вовлеченности мы стараемся создать сквозную тему заданий для каждой учебной темы. Например, для работы с DOM в курсе по JS мы выбрали примеры с железной дорогой.

j8zubJFV1bXsj23S4dsmy5FpyPH_qFA4MSoxm4Nw

1NGsC0Us5Y4HvGpOV2HkrvOsr-OkET66610PkoOp

LI4N9bjQvAa4LuuyBAT1SVtFC4e583MOIoWTk-nl

Как студенты решают задания?

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

hMYCKDKYP6B0quN3XRAcc16hw0vW8EE2LwsgCvDD

Каждое отдельное задание имеет редактор кода с несколькими вкладками, образец, мгновенно обновляющийся результат (если речь идет о php, less или sass, есть небольшая задержка из-за выполнения на специальном сервере), а пунктики справа внизу – автоматическая проверка. Сперва мы делали ее с помощью условий на jQuery, но теперь подросли и используем Jasmine. Также в задании есть инструмент для измерения времени, но мы пока не придумали, как использовать данные оттуда. В перспективе могут добавиться нормативное время для каждого задания, соревнования по скорости и рейтинги. Основа для этого уже есть.

OHwmRzIUlL_o_hmRnDgsMv12lv91JK7mW6B7VNbE

Почти в каждом задании есть вкладка с теорией. Это сокращенная версия, более полная версия может быть найдена в презентациях и на занятиях. Тем не менее, ее должно быть достаточно, чтобы разобраться и решить задание.

YOegyLz5UnxwnpwPXuYC1Fnt00-UdlBUpmCKxkty

Кроме теории, в каждой теме есть свои материалы, которые можно открыть в соседней вкладке, на планшете или распечатать. Это презентации, схемы, ссылки или сервисы, которые мы используем.

Onxy4MJM3dHH0_wtBiz5J_FLx4661we3QOvbVK-T

А еще мы постепенно добавляем ответы на часто задаваемые вопросы.

LhS_DXk_2f16mcW6LoCfMFKNdq6ehbUEk6LcIqlB

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

Z2pNs_dPcwY6K-aW95i43MMhL2yUi812wZca97XE

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

Сколько нужно времени, чтобы сделать новый курс?

Первые два года мы старались не думать об этом. Мы просто делали, что успеваем и старались делать курсы лучше, чем все существующие. Теперь мы немножко выросли и рассчитали трудозатраты на примере свежего курса по JavaScript, который мы активно готовим последний месяц и у нас получилось около 600 часов. Это цифра без учета тестовых занятий, обсуждений, оформления и продвижения курса. Это цифра без учета времени на обучение преподавателей и без учета тестирования заданий. Это большая цифра. Если бы при основании школы мы увидели бы такую цифру, наверно, мы пошли бы в переход продавать 3D принтеры.

Z2OKXgdpm1wZRXcfixAyfXoFLv1Bnk5HekqhRRdn

Но сейчас команда одного только курса по JS выросла до шести человек (три преподавателя плюс сочувствующие разработчики материалов), а мы продолжаем привлекать стажеров к верстке заданий, размещению их в системе, тестированию и написанию автопроверок. Вот, кстати, примерный расчет временных затрат на подготовку курса, если считать 8 занятий по 4 темы в каждом.

3EaU6UOVn8CcR1kb3LM4apiABx_KoUsX3am3_6Og

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

А сейчас, если вы еще не устали читать и если первые 4 задания в статье вам понравились, вот черновик с несколькими заданиями, которые еще только добавляются в систему.

b_5562fcbce6ece.jpg

b_5562fd4a64b58.jpg

Пришло время прощаться. Сегодня было много скриншотов и описания технологий. В следующий раз мы расскажем, как устроена HR-служба в Epic Skills (целых 3 человека!), как попасть в команду и почему это стоит сделать. Есть вопросы? Задайте их в "Вопросы команде" или приходите в гости!

+10
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Ян
Такая хорошая визуализация учебного процесса — это очень круто!
Ответить
codebra - онлайн-курсы
Интерактивные и увлекательные онлайн-курсы
Ярослав Никитин
Класс, для меня статья была полезной. Уже 8 месяцев занимаюсь созданием интерактивных курсов по HTML и CSS. И вот недавно начал редизайнить сайт и добавлять геймификацию.
Ответить
Edspace
Детские компьютерные курсы
mashaplotkina
Спасибо, почитала. Теперь делать свои курсы стало ещё страшнее)
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать