Компания
41,31
рейтинг
23 октября 2013 в 16:35

Разработка → HTML Academy, Хабр и краудфандинг

HTML Academy — это интерактивные онлайн-курсы по HTML и CSS. Проект существует уже более года, за который мы создали более 15 курсов, большая часть из которых бесплатна. Всё это время работа велась на чистом энтузиазме, однако, сейчас уже нужно выходить на новый уровень, чтобы делать курсы чаще, круче и полезнее. Для этого есть много путей, и один из них — народное финансирование.

Немного об HTML Academy


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

Практическое задание

Знакомые котики, не правда ли? Это одно из заданий курса про использование фонов. Кстати, огромное спасибо centaurus за отличных котиков.

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

Помимо практических заданий есть и так называемые «испытания». Это одна из фишек проекта, которая выделяет его из ряда аналогов. Задача испытания очень простая — «сверстай как на картинке». Собственно, это одна из типовых задач верстальщика. На картинке ниже вы увидите одно из любимейших испытаний учеников, которое завершает курс про селекторы.



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

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



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



Ну вот, немного познакомились. А вот и ссылка на сайт: htmlacademy.ru

А что краудфандим-то?


Если вкратце, то мы хотим создать новую бесплатную серию курсов.

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

Конечно, намного эффективнее было бы после базовой серии сделать прикладную серию, в которой бы в пошаговом режиме ученик и собирал сайт с нуля. Хочется сделать эту серию бесплатной и доступной для всех. Однако, признаюсь честно, сейчас мы просто не потянем эту задачу. Хотя возможность сделать это есть уже сейчаc: найдены разработчики, готовые взяться за работу, накоплен огромный опыт создания подобных курсов и так далее.

Но, как обычно, всё упирается в финансы. Поэтому мы решили попытать счастья в краудфандинге и запустили проект «Сверстай ВКонтакт!» на Бумстартере.

Если есть вопросы, задавайте их, постараемся ответить максимально подробно.

Небольшой P.S.


Думаю, у многих сразу возникнут аналогии с Codecademy. Конечно, подходы очень похожи: «интерактив+работа с кодом+геймификация». На самом деле, в этом нет ничего страшного, ведь есть море видеокурсов (у которых вообще подход полностью одинаковый). Но есть и более существенные различия:

Во-первых, мы изначально русскоязычный проект и стараемся писать простым и понятным для русскоговорящих людей языком. Все курсы полностью авторские.

Во-вторых, мы более сфокусированы. Берем более узкие темы и прорабатываем их максимально глубоко. Об этом свидетельствуют и комментарии пользователей, которые учились и у нас, и у них:

Отзыв

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

Ну и последнее. Обучающая методика тоже оригинальная. Суть её: «компетентностный подход+испытательность». Благодаря этой методике мы ставим себе достаточно дерзкую цель — массово готовить профессионалов хорошего уровня, а не просто заниматься пропагандой веб-технологий. Цель далека, а двигаться к ней и сложно, и интересно.
Автор: @AlexPershin
HTML Academy
рейтинг 41,31

Комментарии (75)

  • +7
    Удачи Вам!
    Очень полезное дело!
  • +5
    Хорошее дело. А есть что-то подобное по джаваскрипту на руском?

    ПС. Бумстартер — это, похоже, «Сверстай Кикстартер!».
    • +2
      Мы со временем до JS дорастём, а пока мониторим, и на русском похожих проектов по JS не видим. Есть интересный проект по Python русский acodemy.ru/ У них достаточно наглядно получилось сделать, в том числе там есть курс по управлению 3D роботом на питоне.
      • 0
        Независимо от присутствия или отсутствия уроков на конкретную тему в рунете, уроки всегда будут в цене. Вы все равно не сможете обучить всех людей одинаково успешно по всем вашим направлениям. Кому-то будет удобнее выучить что-то у вас, что-то в другом месте, что-то освоить самостоятельно. Я одновременно (с подписками) штудирую Codecademy, Tuts+, Egghead, Codeschool и других, и вы не поверите, но некоторые аспекты программирования я не могу освоить ни по одному из этих ресурсов. Не потому, что их там нет, а по тому что до меня им не достучаться. В результате приходится искать-искать-искать, и где-нибудь на Lynda я нахожу доходчивый курс, который «кликает» и все становится понятно.
        А некоторые моменты чтобы окончательно закрепить необходимо посмотреть на двух-трех ресурсах.

        Так что просто делайте курс, спрос будет. Все равно после вас их (ресурсов) появятся еще десятки.
        • 0
          Согласен с вами. И всё-таки подозреваю, что на тех ресурсах, где много тематик, страдает глубина проработки и наоборот. Если закапываться, то много тем не раскрыть. Заметил еще, что на многих ресурсах не сделаны крутые итоговые испытания, когда надо что-то большое и сложное написать, а вас бы проверили. Мы в эту сторону стараемся копать, потом поведаем, что получается.
          • 0
            Это уже вопрос количества и качества преподавателей. Понятно что один препод не сможет одинаково хорошо владеть пятью языками программирования и быть при этом виртуозом виолончели.
          • 0
            Полностью с вами согласен.
            Проходил несколько курсов для забавы на CodeAcademy и нескольких подобных ресурсах.
            Был всегда один вопрос: вот научился человек делать вот такое окошечко, вставлять картинку и пару ссылочек, а дальше что?
            Или вот вам страничка, сверстаем ее в 10 шагов. И шаг влево, шаг вправо — непонятно.
            • 0
              Ну нельзя думать, что на СС вселенная клином сошлась. У Codecademy задача заинтриговать и заинтересовать. Делаешь Codeyear и все — ты выпускник, дальше тебе на Pluralsight, например
    • +1
      Можно попробовать прикрутить к учебнику Ильи Кантора редактор (на базе CodeMirror, например) и фрейм для запуска.

      Технически не сложно, но времени потребует много. Вероятно не спроста Илья не стал так делать сам.
      • 0
        Да, технически несложно. Но очень трудоёмко переделывать учебный материал в новый формат, придумывать сценарии курсов, оформлять и так далее. И, насколько я понимаю, Илья Кантор больше предпочитает готовить js-супергероев на суровых тренингах. А такие курсы — более массовые и расчитаны на более низкий уровень должны быть.
        • 0
          Вроде у Ильи несколько вариаций курсов, в том числе и «для самы маленьких».
      • +1
        Я не стал делать такие курсы по одной простой причине — такой подход ограничен.
        Никакой автотест не сравнится с code review грамотного человека.

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

        … А редактор и фрейм для запуска прикрутить ей-богу, проще пареной репы. В новом учебнике я сделаю автотесты для несложных задач ;)

        — С наилучшими пожеланиями,
        Илья Кантор
        • 0
          Вы правы. Но в тоже самое время, я считаю, что интерактивные курсы отлично дополняют учебники. Очевидно это хуже code review грамотного человека, но для всех тысяч учеников, что проходят разные курсы, это (code review) невозможно.
        • 0
          Программированию, конечно, сложнее научить, чем вёрстке. Но у нас задумка следующая — максимально автоматизировать проверку финального испытания, чтобы до человеческого code review доходило уже действительно что-то более-менее рабочее.

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

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

          Мы сейчас как раз будем тестировать подобный формат — интенсив. А потом, возможно, запустим индивидуальные программы в похожем формате.
          • 0
            Да, конечно компьютер подключать можно и нужно. В конце концов, один раз написал программу — обучил миллион человек. Не то, что преподаватель, ресурс которого всегда ограничен.

            Может быть, вам также имеет смысл ориентироваться на зарубежный рынок? Проект на русском — это здорово, но, может быть, лучше «в том числе на русском»? Там совсем другие ресурсы, в том числе и финансовые, которые можно привлечь для развития проекта.
            • 0
              Про запад мы думаем. Но пока, конечно, идея такая: «проект преимущественно русский, а на запад отправляем более старые курсы за более высокую цену». В общем, чтобы они спонсировали обучение крутых российских девелоперов. Идея слегка утопична, но почему бы и не попробовать =)
    • 0
      javarush.ru/course.html

      Похоже на то, что нужно?
      • +1
        нет, там Java, а не Javascript
        • +1
          Понял, прошу прощения.
  • +1
    Полезный проект и спасибо, что добавили «P.S.» где заранее разъяснили отличия от Codecademy(пишется без А).

    Отправился по ссылке на Бумстартер и не совсем понял, что за вознаграждение такое «годовая» подписка? Планируете добавить платный контент?

    • +1
      Да, сейчас у нас 14 бесплатных курсов (из планируемых 16) — это базовый цикл. А также постепенно добавляем продвинутые курсы, их уже 2 — по box-shadow и продвинутым структурным селекторам (:nth-last-child и т.д.). И эти курсы доступны по подписке — 100 рублей в месяц.
  • 0
    Знакомые котики на первом скрине =^_^=
    А за проект огромное спасибо, давно искал нечто похожее, а на Codecademy мало русифицированного материала (по крайней мере было, когда я заходил туда последний раз)
  • +2
    Здорово. Отличный проект.
  • +1
    Доработали бы то, что имеется.
    Сохранения прогресса нет. В итоговых заданиях дается три попытки и толком не объясняется, что надо сделать до 100%, а потом нам предлагают оплатить VIP. Нехорошо как-то, «либо плати, либо каждый раз пиши код заново».
    Функция сравнения работает тоже ни к черту.
    Проект достоин внимания и приятно, что отечественный. Но сырой как пре-пре-альфа. В этом свете наивным видится желание собрать деньги «на новые курсы». Успехов Вам старые доделать.
    И да, честно сказать Codecacademy много лучше.
    • +4
      Сохранение прогресса есть после регистрации, платная подписка нужна для доступа к продвинутым курсам. То, что есть сырые места — согласен, правим, но медленно. По поводу codeacademy — тут у каждого своё мнение, конечно, но с точки зрения глубины проработки материала он более слаб. Сравните наш курс по селекторам и их, или наш курс по формам/таблицам и их. И, кстати, в итоговых заданиях надо только 90%, т.к. мы против пиксельхантинга.
      • 0
        У меня нет сохранения прогресса. А ведь я зарегистрирован.
        Платная подписка для продвинутых курсов — это хорошо. Тем более что цена «народная». Но я о другом, я про то, что за три попытки (я в частности про курс «Оформление текста с помощью CSS») сложно самостоятельно догадаться, что нужно сделать для 100%. И да, я за пиксель хантинг, в том плане что если можно достичь 100% — почему бы просто взять и достичь?
        • +2
          Вы, наверное, про сохранение кода — в этом каюсь, всё не можем сделать. Но уже скоро появятся деньги на отдельного программиста и он займется этим делом одним из первых.
          С испытаниями, да, бывают проблемы. Но, если вы проходите курс последовательно, то к испытанию должно быть более-менее понятно, что и как делать, т.к. мы стараемся очень плавно подводить. А вообще, мы испытания периодически упрощаем, и сейчас есть несколько испытаний, которые мы будем переделывать. Пока что самый удачный формат испытания получился в селекторах.
          • +1
            Очень долго мучался с этим заданием htmlacademy.ru/courses/50/run/9, точнее очень долго не мог здесь достичь результата 100%.
            С остальными проблем не возникало в плане 100 процентного результата.

            Спасибо вам огромное за интересные курсы. Буду ждать обучение javascript :)
        • 0
          Тоже очень странно. Вхожу, в профиле есть прогресс, тыкаю курсы, вновь активны кнопки Войти и регистрация.
          • 0
            Это был жёсткий кэш некоторых страниц для борьбы с нагрузкой. 250-300 человек было онлайн в эти два дня. сейча его отключили.
  • +2
    Вопрос — на кикстартере вы хотите собрать 174 тысячи рублей на создание одного курса. А у суммы есть обоснование или она взята «с потолка»?
    • +2
      Прошу прощения, опечатка — на Бумстартере.
    • +2
      Нет, не с потолка. Мы хотим собрать 150 т.р. на серию из 3х курсов. Т.е. на каждый курс плюс видео по 50 т.р. (оценка разработчика плюс стоимость видеопродакшна). Оставшиеся 24 — это комиссия бумстартера плюс налоги, т.к. мы юрлицо. Боюсь, даже, что общая стоимость будет чуть выше, но сейчас благодаря интенсиву появляется немного свободных средств и их можно будет использовать.
      • +2
        Да, не сразу нашел что у вас на три этапа разбито. Что ж удачи — начинание хорошее но вот найдет ли оно достаточную поддержку — тут, скажу честно, сомнения. Специалистам уже нет необходимости, а начинающие часто больше хватаются за яркие обертки и обещания «за три часа вы станете верстальщиком, а за день научитесь РНР».
      • 0
        А в сторону господдержки или гигантов (yandex, mail-group, тот же вконтакте) не смотрели? Мне кажется они должны быть заинтересованы в развитии айти?
        • +1
          Скажем так, пока что чувствовали себя не доказавшими полезность. Но сейчас вроде дошли до этапа, когда есть критическая масса курсов и положительные отзывы от учеников. Поэтому можно идти к большим. А так, конечно, пробовали. Сейчас, например, работаем с ИТМО (это просто, т.к. я там работаю), будем интегрировать академию с их курсами. В SF подавали заявку. Господдержку пока не пробовали искать, что-то подсказывает, что это очень долго и трудоёмко.
    • +1
      del
      • +1
        Я ниже исправился.
  • +4
    Несколько оффтопик, но всё же — Краудфандинг без платного аккаунта на Хабре под запретом?

    Минус две статьи и два пользователя в RO:
    Статья товарища Fet, Про кукольный игровой проект на кикстартере, который не успевает набрать нужную сумму #198742
    И товарища sardarbinyan Про новости борьбы за свободу Сети, со ссылкой на краудфандинг социального ролика о блокировках #198714
  • +3
    Среди ваших конкурентов есть еще наш проект CleverBear.ru. Правда мы только начали с курса по html и скоро переключимся на другие области веб-разработки.
    • 0
      А где редактирование формы регистрации прямо под видео, как сказано в видео на главной?
      • +1
        Прямо под надписью "Тренируйтесь прямо в браузере" можно отредактировать форму регистрации справа по своему вкусу.
      • 0
        не туда
  • 0
    Спасибо, классный ресурс. Здорово, если будет продолжение и расширение уроков.
    Скромно, но поддержал на бумстартере.
  • 0
    Извеняюсь, очепятка в тексте
    «сверстай как на карТинке»
    • 0
      Спасибо, исправил. хотя опечатка была интересная.
  • 0
    Поддержал. Удачи вам, хороший проект!
  • 0
    Редактор глючит в Safari 7.
    Мигающий курсор не совпадает с настоящим положением.
    • 0
      Да, знаем об этом. К сожалению, нам пока с этим не справиться, т.к. редактор не наш, а один из опенсорсных и достаточно неплохих. Вообще, редакторов не так уж и много. Один из них CodeMirror, второй Ace (http://ace.c9.io/). Мы используем Ace и периодически его обновляем. Надеемся, что они пофиксят проблему в Safari.
  • 0
    Спасибо за статью. Все никак не соберусь пройти что-то подобное! Увидев эту статью точно зарегистрируюсь на вашем сайте. Есть свой проект, но он выглядит не очень современно. То, что увидел на картинках из поста выглядит намного более современно)
  • 0
    еще бы zen coding добавить в редактор, а то вручную долго как-то набирать :)
    • 0
      Думаю, для Ace Editor можно такой плагин дописать. Если проект пойдет хорошо, то посадим за это дело отдельного js-разработчика.
      • 0
        Вы можете воспользоваться готовым: ace.c9.io/demo/emmet.html

        — С наилучшими пожеланиями,
        Илья Кантор
        • 0
          Спасибо! Вот что значит закопаться в разработку и не следить за внешним миром.
  • 0
    Идея супер! После того, как я увидел комментарии внизу — я понял что это гениально!
  • 0
    А у вас нельзя случайно включить более серьёзный уровень сложности, чтобы требовалась обязательная валидность кода и соответствие доктайпу?

    Лично мне кажется, что лучше сразу учить людей без каких-либо упрощений. Ну, по крайней мере в случае с HTML.
    • 0
      Про валидность думаем с самого начала. Но есть загвоздка: пока не нашли инструмент для быстрой валидации кода, тот же W3C Validator явно не выдержит такого количества проверок. Если подскажете, что можно использовать, будем очень благодарны.
      • +1
        А зачем вам использовать для этого их онлайн-сервис? Установите валидатор у себя.

        См. исходники и документацию по установке.
        • +1
          Вот это замечательно, до этого я как-то и не докопался. Спасибо за инструмент!
  • 0
    также, как заметили в комментариях на самом сайте, последний этап в курсе невозможно пройти. Требует регистрацию, хотя я уже зарегистрирован и авторизован. Письма не приходят.
    • +1
      Возможно, это связано с большим наплывом писем от нас на разные почтовые сервера. Мы используем отдельный сервис для отправки писем, настроили там хитрую валидацию и так далее, но всё равно письма попадают в спам. Напишите в личку ваш email, поищу письмо с кодом.
      • 0
        Письмо действительно оказалось в спаме. Что-то даже не подумал туда посмотреть.
  • +1
    +300 рублей. Удачи.
    • +1
      Как интересно. Два раза сняли сумму. Что же, пусть будет 300х2 :)
      • 0
        Двойное спасибо! Может это бумстартет так накручивает поддержку? =)
  • +1
    Великолепный проект! :)
  • 0
    Проходя курс, возникла идея. В блоке с кратким описанием задачи сделать кнопку или ссылку показывающую связанную информацию. Например в задании «Что такое ссылка?» есть краткое описание что это и с чем едят. Почему бы не показывать возможные атрибуты для ссылки (id, href, title, name, rel, etc)? Т.е. выводить более широкую информацию.
    • +1
      Да, отличная задумка. Уже в планах у нас давно. Сделаем что-то типа быстрого справочника или дерева скиллов.
  • 0
    Почему бы не сделать бар с информацией о сборе средств непосредственно на сайте, чтобы ваши пользователи сразу шли и скидывались?
    Или я не заметил его просто? :)
  • 0
    он скромненько висит на странице курсов справа, чередуясь с баннером диджитале. Особо больше некуда вешать его. В интерфейс заданий не хотим, чтобы не отвлекал, мы там только короткие текстовые анонсы делаем.
    • 0
      Ну я имел в виду такую узенькую полоску сверху на весь экран. Ее все увидят, и ее можно закрыть, если прочитал и больше не нужна. Как про закон о блокировке сайтов было на хабре.
      image
  • 0
    Спасибо за полезный сервис! Наткнулся на него ещё летом, был приятно удивлён, что есть русскоязычные аналоги codeschool и codecademy.

    И небольшой фидбэк — не планируется ли подключение к системе Open Badges? Для подобных образовательных сайтов она подходит идеально, тем более у вас уже есть своя геймификация процесса обучения.
    • +1
      Да, думали про неё, но только пока руки не доходят.
  • 0
    Пожалуйста, включите сглаживание в Фотошопе или в браузере, уж не знаю, откуда у вас скриншоты. Не смог прочитать текст — вскрикнул и схватился за глаза.
    • 0
      Из браузера сглаживание, точнее, его отсутствие. В следующих публикациях учту. В принципе, всё, что на скриншотах, можно и на сайте прочитать.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка