Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Як ми робили благодійний онлайн-курс для початківців. GitHub, граблі та 3000 грн

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

«Всім привіт, вітаю вас на курсі React для Початківців від компанії Ітера. Мене звати Віталій Рубан і сьогодні ми будемо говорити про ...»

Саме таку фразу я повторив щонайменше 14 разів в прямому ефірі для 350 потім для 200, а наприкінці лише для 50 онлайн-глядачів. Якщо вам цікаво, як це відбулося і які помилки привели до такого падіння — беріть каву і давайте читати.

Трішки про мене: я працюю в компанії Itera, маю 7 років комерційного досвіду, фулл-стек .NET + React/Angular.

Ідея нічого не коштує

Одного не дуже гарного дня, а після 24.02. багато з них були дуже і дуже «не дуже», я подумав, що користі з мене в цій війні якось небагато. Я щось донатив, щось допомагав профільно, щось постив. Але внутрішньо цього було замало. І з цим щось треба було робити.

Так народилася «проста» ідея: зробити благодійні, безкоштовні курси для тих, хто бажає навчатися React. Логіка проста — якщо в тебе є робота ти і про себе подбаєш, і економіку підтримаєш, і в ЗСУ копійочку занесеш. Тим паче досвід викладання у нас є, Itera багато років читає лекції студентам НАУ і я був одним з викладачів.

Що тут складного, подумав я. І почалася наша двомісячна Одіссея.

Підготовка

Для зберігання матеріалів курсу я обрав GitHub. Оскільки головна ідея була саме про безкоштовне навчання, публічний репозиторій з усіма матеріалами став чудовою ідеєю. Це дало нам змогу безкоштовно хостити всі презентації на GitHub Pages, та підключити спонсорство у вигляді OpenCollective.

До речі, про OpenCollective. Вони автоматично апрувлять open-source проєкти, які мають хоча б 100 зірок, але також допускають перевірку в ручному режимі тих, хто цього показника ще не досяг. Ми проходили саме ручну перевірку і це зайняло приблизно тиждень. Загалом досвід з ними був позитивний, єдиний недолік — вони беруть 20% комісії. Але все прозоро та публічно.

Програму курсу я оформив у вигляді простого JSON файлу і налаштував автоматичну генерацію документації на git push. Виявилося дуже зручно: просто пушиш код, а husky автоматично все оновлює.

Для створення презентацій було обрано Reveal.JS в зв’язці з Parcel.JS.

Reveal — фреймворк, який дає змогу робити достатньо непогані презентації за допомогою дуже простого HTML. Він підтримує і підсвітку синтаксису (так собі), і анімації, і підсвічування рядків коду, і експорт в PDF, і навіть mobile friendly. А результат можна викласти на GitHub Pages як звичайний статичний сайт.

Parcel.JS — універсальний бандлер, який майже не потребує налаштування. А з автоматичним паблішем за допомогою GitHub Аctions питання, як викладати матеріали курсу просто зникло з горизонту.

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

Взагалі канал оперативної комунікації дуже важливий. Це не офлайн, де ви бачите обличчя студентів і можете відкоригуватися прямо під час лекції. Тут у вас мінімум зворотнього зв’язку і люди губляться тихесенько, наче нічого й не було.

На моє здивування, на курси записалося більше 1500 людей. Після прибирання дублів їх залишилося більше 1300 осіб і це зруйнувало мої плани використовувати Zoom як платформу для курсів.

Що робити я сам не знав, та, на щастя, друзі і тут підказали: YouTube як платформа та StreamYard як інструмент для організації трансляції.

Ми зробили тестовий запис і це рішення показало себе напрочуд гарно. StreamYard дозволяє накладати прості ефекти (банери, заглушки, музику) та запрошувати гостей на трансляцію. Він має достатньо простий та зручний інтерфейс і його єдиний недолік в тому, що він платний —$25 на місяць. Але враховуючи, що ні студії, ні досвіду монтажу у нас не було, — це було ОК. Тож ми створили свій канал і почали виходити в ефір.

Виходимо в ефір

Вийти в ефір зараз дуже просто. А от не накоїти при цьому дурниць вже трохи важче. Ми, звичайно, помилок наробили достатньо.

І першою помилкою був TypeScript. Ні, сама мова чудова, я дуже люблю TypeScript. Але чомусь, можливо через втому, я подумав, що подужаю його пояснювати прямо під час лекцій. І якийсь час мені здавалося, що все йшло добре, але насправді люди просто тихесенько собі йшли через зайву складність.

Що гірше, ніхто не скаржився, люди щезали мовчки. На превелике щастя, десь на першій третині курсу ми все ж таки зробили лекцію про TypeScript і це трохи виправило ситуацію. Але частину аудторії ми вже втратили.

Другою помилкою було планування. Від початку я планував робити по дві лекції двічі на тиждень, кожна тривалістю година. Перша лекція — теорія, друга лекція — практика. План здавався логічним, але, як виявилося вести дві години підряд прямого ефіру надзвичайно складно. Я не знаю, як з цим справляються викладачі, але після першого ж такого подвійного ефіру я був абсолютно ніякий.

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

Ще однією помилкою стало намагання за всяку ціну триматися графіка. Буквально перед першим ефіром я захворів і зумів витягнути перший день виключно якимось дивом. А от другий день, на який наклались одночасно і хвороба, і втома, я завалив.

Найгірше — це була до біса важлива лекція. Вже потім я зрозумів, що кожен ефір — це мінус певний відсоток слухачів. І чим гірше ти провів лекцію — тим більша кількість людей не прийде на наступну, і тим менша кількість людей дійде до кінця. Це нормально, люди йдуть навіть з платних курсів, але треба розуміти, що набагато краще перенести лекцію, ніж прочитати її погано.

Наступною проблемою стала практика. З метою спрощення лекції я розробив приклади коду і вставив їх у презентацію у вигляді сніпетів. І, «дивина», виявилося, що новачкам важко читати сніпети коди, навіть коли ти їх пояснюєш. В офлайні у тебе невелика група студентів, вони або перепитають прямо під час лекції, або одразу після, а от з онлайн курсами так не працює.

Щоб виправити цю помилку, ми спочатку зробили повністю практичну лекцію про написання міні-гри на React, як потопити російський корабель (щось на кшталт морського бою), і цей формат зайшов просто чудово. Після цього ми перейшли до змішаної системи демонстрації коду. Сніпети для простих, атомарних речей, live coding — для всього-іншого. Стало краще, але «треба більше практики» — це майже топ-фідбек наших слухачів.

Зараз ми думаємо над тим, щоб додати до курсу серію live-coding сесій, щоб за допомогою практики закріпити теорію, що ми начитуємо, та дати людям уявлення про те, як проєкти (нехай навіть прості) будуються від початку і до кінця.

Були і виключно технічні проблеми: від очевидних — коли шрифт у VSCode виявився замаленьким і людям було важко читати, до курйозних — таких як ефір з блискавкою та бан за шахрайство.

Пригоди наживо

На одну з лекцій ми запросили гостя, Сергія Бабіча, прочитати лекцію про Recoil. Під час трансляції десь поруч з ним вдарила блискавка — і його інтернет накрився. Він швиденько перейшов на мобільний, після чого блискавка вдарила повторно і накрився вже мобільний інтернет. На щастя, основний канал швидко відновився і ми продовжили ефір далі.

З цікавого і незрозумілого: лекцію про React-Router-Dom нам забанив за шахрайство YouTube. В чому саме воно полягало ми так і не дізналися. Лекцію перезалили, а пізніше YouTube її відновив. Але це важливий момент — в будь-який час платформа може захотіти вас позбутися, тому бажано мати запасний варіант. У нас таким був Twitch, куди StreamYard автоматично дублював ефір.

Ще один важливий момент, який я недооцінив — ефір бажано вести в 1080p. В іншому випадку читати код не дуже приємно і реально. Це нам підказали і навіть задонатили на підвищення якості. Скажу відверто — було дуже приємно, цю ж суму ми потім закинули на «Повернись Живим».

Про гроші та інші (не)цікаві цифри

За весь час курсів ми зібрали 2983 грн, які пішли до «Повернись Живим» та «Армія SOS» (до речі не супер публічні, але дуже корисні люди). Сума не велика, але донатили саме студенти і ми їх на це не пушили (їм і самим ці гроші потрібні). Тож і це вже добре.

З 21 квітня по 26 травня ми провели 14 ефірів, тобто відчитали приблизно 14 годин лекцій. Цього, очевидно, не достатньо для повноцінного курсу з React, але як експрес-варіант — може бути. Всього ми залучили 3600 унікальних глядачів, які провели на каналі більше 2_500 тисяч годин. Конверсія виглядає не дуже, але, згрубша, 180 осіб повністю продивилися весь курс, що виглядає вже не так погано.

Ми ще й зібрали відгуки, де попросили слухачів оцінити курс. Середня оцінка — 4.6 з 5. З побажань отримали: дати більше матеріалів про TypeScript та приділяти більше уваги практиці. Окремо просили навести лад з домашніми завданнями.

Очевидно, слухачам не вистачало практики. Тут міг би допомогти проєкт, який ми б вели разом протягом всього курсу, проте цього разу ми виходили без нього (хоча кілька домашніх завдань таки було).

Висновки

Якщо ви вирішили зробити свій курс:

  • Не ускладнюйте. Якщо ускладнення необхідне, спочатку детально його поясніть.
  • Розраховуйте власні сили, не намагайтеся бути героєм. Краще перенести лекцію, ніж зробити її погано.
  • Майте план Б, коли (саме коли, а не якщо!) щось піде не так з технічною частиною. В будь-який момент ви можете втратити інтернет або прилетить страйк на канал.
  • І ще одне — організаційні моменти забирають стільки ж часу, скільки і основна частина. Враховуйте це під час планування графіку.

Велика подяка

Окремо хочу подякувати людям, які допомогли це все довести до кінця. Це BeerJS ZHYTOMYR, NodeJS Receipes,ToiSamiyBabich та ще декілька не публічних людей, які зробили свій внесок в наш спільний курс. Дуже вам дякую.

👍ПодобаєтьсяСподобалось20
До обраногоВ обраному5
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Этим летом планируется проведение Summer School?

Коли будуть наступні курси?Є якась дата?Чому не зробити курси виключно для 122-ої, або іншої computer science. Так буде простіше як викладачам так і студентам.

Наразі дати початку — немає. Слідкуйте за каналом/ДОУ. Щодо того щоб зробити курси для 122 або іншої спеціальності — у нас же інші вимоги для учнів, вони слабо пересікаються з дипломом

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

Я зараз переглядаю другу версію курсів. Мені подобається

Це якийсь підпис у власному непрофесіоналізмі, а не стаття.

Так ми і не робимо курси професійно. А онлайн курси робили взагалі вперше. Якщо пан бажає професійності — є багато платних курсів, прошу.

не робимо курси професійно.

Скільки людей прийде дивитись курс якщо цей вираз зробити його слоганом/тайтлом?

Дуже цікаво було прочитати вашу історію. Ви робите корисну справу!

Воу, коли проходив курс, навіть не підозрював, що за кулісами стільки подій відбувається.) Дякую Віталію та команді за чудову роботу! Курс то дійсно важкуватим получився, але впевнений, що усі нюанси будуть враховані в майбутньому.

Дякую за курс. Проходжу його офлайн зараз.

Підписатись на коментарі