«HTML Academy» — интерактивные онлайн-курсы по изучению вёрстки

Интерфейс сайта HTML Academy
Интерфейс сайта HTML Academy
HTML Academy – это интерактивные онлайн-курсы по HTML и CSS, с помощью которых любой новичок может научиться создавать веб-интерфейсы и работать с кодом. Мы поговорили с автором проекта Александром Першиным.

Е.И.: Расскажите, как появилась идея создать такой проект?

А.П.: Я преподавал в ИТМО у меня был факультатив по информационным технологиям. Мне сказали: Преподавай, что хочешь. Я решил, что буду рассказывать на факультативе про верстку. Взял макет, который был сверстан когда-то, но был хороший. И вот некоторые ребята оказались хитрыми – они по макету нагуглили уже готовый сайт и его использовали. Понятно, что кто-то использовал просто как базу, кто-то решил посмотреть, как оно сделано, но получилось, что сами они ничему не научились, потому что просто поправили чужой код.

Как показать готовый макет, продемонстрировать как он себя ведет, но не открывать при этом код? Такая была задумка в начале как показать поведение сайта, не показывая при этом его код.

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

Е.И.: А давно вы начали заниматься проектом?

А.П.: В начале 2011 я его придумал. Тогда я учился в аспирантуре, писал статьи на конференции. Уже в конце 2011 я нашел технологии, которые можно было использовать, чтобы реализовать проект, и чтобы это не было очень трудоемко. Потому что еще в начала 2011 было не очень хорошо с технологиями – не было редакторов кода, не было браузерных движков. Поэтому я ждал, потихоньку искал, и вот в конце 2011 года нашел их. И уже можно было создать первый прототип и начать что-то делать.

С 2012 года, собственно, проект и начался. Прямо с января.

Е.И.: А какие инструменты вы использовали для создания первого прототипа?

А.П.: Редактор CodeMirror назывался, он и сейчас существует. Движок был WebKit, а какая библиотека я сейчас уже не помню. В общем, штука, которая генерит из кода картинку, нужна была.

Е.И.: Вы, получается, занимались проектом один?

А.П.: По большей части, да. Т.е. разработка, создание курсов я занимался этим сам. Мне помогал Алексей Симоненко, технический директор Serenity. Я дома что-то делал, в студии что-то делал – Алексей мне подсказывал и рассказывал, если я чего-то не знал. Еще он смотрел курсы – проверял контент на адекватность, чтобы ничего не забыли и не было никаких ошибок. Т.е. был таким ментором.

Е.И.: И автор курсов – тоже вы?

А.П.: Я, потому что было особо некому. Была, правда, попытка привлечь к этому моих студентов-должников. Я им сказал: Ребята, пишите курсы, а я вам поставлю баллы. Они курсов 10-12 создали, но они получились такие страшные и непонятные, что в итоге из них как-то использовать получилось только один, и то я его очень сильно переделал.

Е.И.: А у вас не было желания привлечь в команду разработчиков или людей, которые помогли бы с составлением курсов?

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

Е.И.: А какое у вас соотношение платных и бесплатных курсов?

А.П.: Сейчас 2 платных и 14 бесплатных. У платных курсов платность такая, условная, 100 рублей в месяц.

Е.И.: На кого рассчитаны курсы? Кто ваша аудитория?

А.П.: Школьники старших классов, студенты технических вузов и просто те, кому интересна или нужна верстка. Когда у нас было 1 500 подписчиков, мы провели опрос на нашей странице Вконтакте, и получилось, что школьников 10%, студентов 30%, а все остальные это ни то, ни то. Т.е. 60% не студенты. Я почему-то думал, что больше студентов будет. Им больше всего то нужно, их заставляют это учить, вроде как. А оказалось, что все по-другому.

Е.И.: Были ли какие-то платформы онлайн-образования, на которые вы ориентировались?

А.П.: Да нет, не особо. В конце 2011 года появилась Codecademy, у них интересная механика они маленькими шажками все делают. Мне она понравилась, я частично ее применил. Но у них была работа с консолью – ты в консоли что-то писал. У нас изначально интерфейс был немножко другой. Я делал что-то больше похожее на квесты в Warcraft ты что-то делаешь, у тебя подсвечиваются на экране пункты заданий, что ты выполнил.

Я особо не смотрел по сторонам даже, просто делал, что нравилось. Вот Codecademy, но у них в самом начале другой формат был только с консолью работа. На Coursera был видеоформат, это тоже не наше. Более-менее похожи были так называемые песочницы HTML/CSS, которые тогда стали появляться. Например, JSFiddle там в онлайне можно было писать код, сохранять его и смотреть, что получается. Вот больше я, наверное, на эти песочницы ориентировался, на сам принцип ты пишешь код и он в режиме реального времени отображается рядом. Но мы к этому еще добавили составляющую, которая дает задания и проверяет их.

E.И.: А Вы сами когда-нибудь проходили онлайн-курсы?

А.П.: Я в 2003 начал обучаться, когда таких курсов еще не было, Интернет-то не у всех был. По книжкам и по статьям учился.

Е.И.: С какими сложностями Вы столкнулись во время создания проекта?

А.П.: Вначале, конечно, были технические сложности просто создать платформу, которая заработает и не упадет. Если мы делаем сервис в Интернете придет туда 50 человек, и все. Поэтому были сложности с тем, как это заставить вообще работать. Вот так это все выглядело в начале:

Первый вариант интерефейса HTML Academy
Первый вариант интерефейса HTML Academy

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

Потом еще была проблема курсы писать. Потому что это вещь очень трудоемкая.

Е.И.: Как вы планируете развивать проект дальше?

А.П.: Вообще, идея глобальная была, как метафора, в том, что мы строим конвейер по подготовке верстальщиков. Такой хороший, широкий, мощный конвейер. Потом конвейер делаем шире и готовим уже не только верстальщиков, но и front-end разработчиков, программистов. В общем, делаем конвейер по подготовке технарей, который доставляет новичка до специалиста, с какими-то уже наработанными навыками. И не просто учим, но и помогаем с трудоустройством. Т.е. вот такая глобальная концепция проекта.

Е.И.: Сейчас вы готовите верстальщиков с нуля до какого уровня?

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

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

Сейчас вот после интенсива уровень достаточно хороший получается.

Е.И.: Расскажите про интенсив.

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

Он отличается от курсов тем, что имеет сроки начала и конца. Во-вторых, там есть теория и есть преподаватель, который рассказывает больше, чем есть в маленьких кусочках текста в курсах. В-третьих, все обучение идет с наставником, и это, наверное, самая важная составляющая интенсива. Т.е. на месяц к каждому человеку прикрепляется наставник, который является опытным верстальщиком. Формат интенсива больше похож на обычный оффлайновый курс, но отличие в том, что мы работаем полностью в онлайне.

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

Е.И.: Много тех, кто все успешно выполнил?

А.П.: 36 участников в первом интенсиве было, 22 закончило.

Е.И.: А в целом по проекту у вас есть статистика сколько человек начали курсы, сколько закончили?

А.П.: Всю статистику на текущий момент можно посмотреть на этой страничке. Тех, кто начал что-то делать 12 200, кто хотя бы один курс прошел 7 300. Больше 2 000 человек выполнили 100 заданий, это уже достаточно серьезно. Самые суровые, наверное, это те, у кого 20 испытаний. 20 испытаний это курсов 10. Вот таких людей почти 500.

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

Е.И.: Что вы думаете о будущем онлайн-образования?

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

Тут много тонкостей есть, конечно. Кто курс прошел? Кто тест сдавал? Ты или не ты? Видимо, будет какая-нибудь гибридная схема, когда ты основную часть обучения проходишь онлайн, но в вуз приезжаешь сдавать экзамены. Т.е. подтверждать, что ты действительно чему-то научился. Будет чем-то похоже на заочное обучение, и я думаю, это будет самым логичным, к чему все придет. Либо как-то очень хитро будут подтверждать в онлайне, например, собеседованием по Skype, чтобы не было возможности как-то отвертеться и вместо себя кого-то подставить. Вот так.

Интерфейс сайта HTML Academy
Интерфейс сайта HTML Academy

Интерфейс сайта HTML Academy
Интерфейс сайта HTML Academy