HTML Academy: верстальный станок

Саша Першин дал студентам ИТМО настоящий макет сайта. Хотел, чтобы они попробовали работу верстальщика: разобрались с задачей и собрали страницу. Студенты нашли готовый сайт в интернете, скопировали код, немного его поправили и принесли на проверку.

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

Так появилась идея испытаний, вокруг которых мы построили HTML Academy. В июне 2014 года у нас уже готов базовый цикл интерактивных курсов и прошло несколько интенсивов с наставниками. С Михаилом Боде в программе «Точка зрения» мы говорили о том, чему человек может научиться в браузере и где ему всё-таки понадобится помощь другого человека.

Проверять то, что человек умеет делать

Саша пришёл к этому из преподавания. Он окончил кафедру компьютерных образовательных технологий, несколько лет занимался веб-разработкой, а затем начал вести факультатив в ИТМО. Для него было важно, чтобы итоговая проверка воспроизводила профессиональную задачу. Если учишься вёрстке, нужно сверстать страницу.

В испытании мы сравниваем изображения. Человек видит образец, пишет свой HTML и CSS, а система проверяет, насколько результат похож на исходную картинку. Условия можно выполнить разными способами. Готовый код образца при этом не нужен.

Оставалось придумать, как постепенно подвести человека к такой работе. Веб-песочницы уже показывали результат прямо во время редактирования кода. Саша увидел, что к редактору можно добавить проверку заданий: написал свойство, увидел изменение страницы, узнал, получилось ли то, что требовалось.

Появление Codecademy подтвердило, что интерактивное обучение людям интересно. Тогда там в основном работали с JavaScript и консолью. Нам хотелось учить вёрстке наглядно, сразу показывая страницу. В оформлении мы смотрели на Treehouse, а некоторые решения для обратной связи пришли совсем из другой области.

Мы с Сашей играли в World of Warcraft. Когда выполняешь часть задания, она тут же отмечается в интерфейсе. Этот способ показывать продвижение мы перенесли в Академию: человек видит, какую часть задачи уже сделал, и может продолжать.

Базовые знания доступны всем

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

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

Это похоже на расширение компьютерной грамотности. Когда-то почти всем понадобились Word и Excel. Теперь веб-технологии постепенно становятся частью повседневной работы разных специалистов. Нам хотелось, чтобы базовые знания можно было получить независимо от возможности заплатить за курс.

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

С дизайнерами у нас отдельный разговор. Есть люди, которые считают знание технологий необходимой частью веб-дизайна, а есть те, кто видит свою работу почти исключительно в создании картинки. Мы читаем для дизайнеров лекции и пытаемся объяснять, почему устройство будущего сайта относится и к их задаче. Саша формулирует это через различие между «красиво» и «функционально»: дизайн должен помогать решать задачу.

От стажировки в агентстве к интенсиву

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

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

Например, работу с Photoshop удобнее показывать в видео. Качество вёрстки трудно оценить только по совпадению картинки с образцом. Человеку нужен профессионал, который посмотрит код и объяснит, почему решение стоит изменить.

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

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

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

Есть и то, что университет даёт благодаря самому устройству учёбы: человек попадает в среду, где значительная часть жизни подчинена занятиям. Онлайн-курс не может убрать домашние дела и другие отвлечения. Эту границу мы тоже видим.

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

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

Курсы приходится придумывать самим

Самая трудная часть Академии для нас сейчас связана с учебными материалами. Мы создаём их сами, и найти человека, который хорошо сделает интерактивный курс, непросто. Недостаточно знать вёрстку: нужно придумать последовательность задач, объяснения и проверки, которые проведут студента через тему.

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

Постепенно собирается команда авторов. С кем-то уже попробовали поработать, посмотрели на результат и хотим продолжать. Часть людей делает курсы сдельно. Саша ориентируется примерно на месяц работы автора и ещё одну-две недели совместной доводки, если всё идёт удачно. Это пока желаемый предсказуемый ритм, а не срок, который удаётся выдержать всегда.

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

Почему хочется пройти испытание на сто процентов

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

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

У испытаний есть ещё одна особенность. Для зачёта нам достаточно совпадения с образцом на 90%, однако многие хотят получить все сто. В комментариях постоянно появляется радостное «Ура, 100%!». Человек продолжает работать, хотя система уже разрешила ему идти дальше.

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

К этому добавляются истории, персонажи и Кексик. Они делают учёбу приятнее, но сами по себе не заменяют задачи. Удовольствие от того, что получилось, возникает потому, что человек действительно научился делать что-то новое.

Картинка совпала, а код ещё можно улучшить

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

Саша приводит небольшой опыт со своими первокурсниками. В декабре 2013 года он дал им макет и записи вебинара о Photoshop. Одна часть студентов занималась по обычным лабораторным работам, другая проходила HTML Academy. Идеального результата не было у всех, но код второй группы ему показался более логичным и удобным для чтения.

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

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

Сколько внимания достаётся студенту

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

Саша предлагает посчитать личное время. В группе из 15 человек преподаватель после лекции помогает всем сразу. Даже если распределить его внимание поровну, на отдельного студента остаётся немного. На нашем интенсиве наставник может целый час разбирать работу одного человека: открыть код, показать экран, написать что-то вместе, ответить на вопросы. Такое взаимодействие по Skype способно оказаться глубже коротких консультаций в общей аудитории.

В вебе много самоучек, которые освоили профессию по статьям и руководствам. Им потребовалось больше времени на поиск ответов и собственные ошибки. Если к такому обучению добавить наставника, я не вижу основания считать его неполноценным.

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

Дальше вглубь фронтенда

Останавливаться на базовой вёрстке мы не хотим. Следом нужны JavaScript и инструменты, которыми пользуется фронтенд-разработчик. Мы сами работаем с этими технологиями и видим, какие знания стоит добавлять в программу.

Уже сейчас код, с которым человек работает во время разработки, заметно отличается от того, что в итоге получает пользователь. Между ними появляется сборка: файлы обрабатываются, сжимаются, превращаются в готовый проект. Этому тоже нужно учить.

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

На что живёт проект

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

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

У нас уже есть платная подписка на дополнительные курсы, но её вклад пока невелик. Базовый бесплатный цикл только что завершён, продвинутые материалы ещё начинают появляться. Особой причины платить за подписку раньше у человека и не было. Основные средства на жизнь проекта приносят интенсивы.

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

Есть и планы на связь с работодателями. У студента мог бы появиться профиль, который он захочет показать другим: с выполненными заданиями и результатами обучения. Для компании это возможность увидеть человека, готового заниматься вёрсткой, а для выпускника ещё один способ предъявить свою работу.

Саша допускает и выход на зарубежный рынок. Но прежде нужно продолжать делать материалы, за которыми люди приходят к нам сейчас. Бесплатные курсы позволяют познакомиться с Академией и понять, подходит ли человеку наше обучение; дальше он уже может осознанно выбрать интенсив или дополнительные темы.