Как оформить уроки в GetCourse один раз и сократить сборку до 15 минут

Ученик открывает урок и видит стену текста: два экрана абзацев, между ними картинка, в конце ссылка. Он листает вниз, ищет, что нужно сделать, не находит — и закрывает «вернуться позже».
Технический специалист онлайн-школ Влад Пурвиньш собрал курс из 28 уроков целиком внутри GetCourse: один раз подключил свой CSS — файл, который задаёт вид сразу всем урокам, — сделал систему из восьми блоков и сократил оформление урока с часа до 10–15 минут.
В статье вы узнаете:
Куда в GetCourse кладут свой CSS и куда его класть не надо.

Из каких восьми блоков собирается урок и как перевести их на нетехнический курс.

Что проверить, если такую систему собирает техспец:

Разница не только в том, что приятнее смотреть.

Полотно текста плохо не тем, что некрасиво. Ученик просто не видит, где шаг, где предупреждение, а где то, что надо скопировать.

1. Первый способ — штатный конструктор GetCourse. Блоки «Заголовок и текст», колонки, плитки, у каждого настраивается вид. Всё нужное тут есть, вопрос только в том, сколько раз это делать.
   Настройки живут на самом блоке: в следующем уроке его либо собираешь заново, либо копируешь и правишь. И так двадцать восемь раз. Плюс вид выходит тот же, что у всех, кто взял тот же набор.
2. Второй — уехать верстать на свой сайт. Оформление станет каким угодно, но уйдут статистика прохождения, домашние задания и связка с заказами.
3. Третий обсуждают реже всех, хотя он быстрее обоих — остаться на платформе и один раз подключить свои стили.

Урок в GetCourse — обычная веб-страница: текст с пометками, где заголовок, где картинка, где рамка. Такие пометки называют HTML. А раз так, всё решается через CSS: файл, где написано «заголовки такого размера, рамки такого цвета». Платформа читает его и применяет ко всем урокам сразу — оформление задаётся один раз, а не в каждом уроке заново.

В GetCourse есть темы оформления — Сайт → Страницы → Темы. Внутри темы вкладка «CSS», куда один раз кладётся весь стиль курса. Тема назначается тренингу и действует на все его уроки, код добавляют без тегов

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

Стили можно положить и прямо в урок — там же, в «Вставке», есть блок «CSS-код». Так делают чаще всего, и это работает. Но живёт такой стиль в одном уроке: я так и начинал, а потом захотел поменять отступ — и полез по урокам руками.

Урок собирается обычным HTML, где куски помечены своими названиями — классами. Написали vc-note, значит «это заметка»:

А вот строки во вкладке «CSS», которые делают заметку заметкой:

Разметку, как и стили, необязательно набирать руками — нейросеть соберёт её по описанию. А кладут её в самом уроке: в конструкторе есть раздел «Вставка», в нём блок «HTML».

Вставьте оба куска — и через минуту у вас будет свой первый блок.

«!important» здесь не для красоты: без него тема платформы перебьёт ваши правила.

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

Ещё деталь, которая потом спасает время: цвета и размеры выносятся в переменные. Переменная — ячейка с именем: записали «фирменный цвет — такой», и все блоки ссылаются на неё. У меня их 26, и задумано было, что смена цвета — правка четырёх строк.

По факту я сам себе это сломал: в тридцати четырёх местах вписал цвет прямо в правило, мимо переменной. То есть переменные у меня наполовину декоративные — захочу сменить цвет, править придётся не четыре строки, а тридцать восемь.

За 28 уроков набор устоялся.

Набор технический — у меня в уроках команды и терминалы. Но каркас переносится. У курса по маникюру блок с командой станет составом и пропорциями, имитация терминала — фото ногтя после шага, а предупреждение зазвучит как «передержите — пойдут пузыри».

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

Самый полезный блок мне подсказали ученики. Регулярно и разными словами спрашивали одно — куда вводить команду: в чат нейросети (у меня это Claude) или уже в терминал.

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

Я приделал над чёрными блоками цветную шапку — куда это вводить. Ученик видит её раньше, чем успевает спросить. В том уроке шапку получили все 18 блоков.

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

Что было дальше — вопроса «куда вводить» я в чате больше не встречал. Но цифру назвать не могу: считать начал позже, чем следовало. Будете повторять — выгрузите обращения за месяц ДО.

Блок, придуманный за столом, видно по счётчику. У меня заметка стоит в курсе 56 раз, предупреждение 44, блок с командой 163. А «скриншот с подписью», которым я гордился, — два раза за 28 уроков.

А кто это всё напишет? Так спрашивают и коллеги, и ученики. Я не программист: весь файл со стилями, 1 624 строки, написан с нейросетью.

Что она делает хорошо. Вы описываете блок словами — «серая рамка, слева жёлтая полоса, заголовок жирным» — и получаете готовые стили.

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

Уберёте две последние строки — она полезет красить общий кабинет. Я убирал.

И ещё: нейросеть ни разу не смогла ответить, чем у меня заметка должна отличаться от предупреждения. Это я понял месяца через два, и не из запроса к ней, а из вопросов учеников.

1. Своя приставка у всех названий

У меня это vc-, от названия курса: перепутать с классами платформы невозможно.

2. Платформу трогать можно, но только внутри своей области

Двести с лишним моих правил начинаются с проверки «на странице есть мой урок». А боковое меню аккаунта я такой проверкой не закрыл — теперь оно перекрашено везде, а не только в уроке.

3. Всё в одном месте

Стили живут в теме, а не внутри уроков. У меня в четырёх уроках оформление до сих пор прописано прямо в самом уроке — писал «на один раз». Теперь их не перекрасить оттуда, откуда красятся остальные 24.

4. Телефон проверять первым

Мой первый блок с командой переносил длинные строки по ширине экрана — люди копировали команду вместе с переносом, и она не работала. Пришлось запретить перенос и дать листать строку пальцем.

5. Блоков должно быть меньше, чем хочется

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

• Время на сборку

Секундомером не засекал, оценка по памяти: около часа на урок вручную против 10–15 минут с готовыми блоками. На 28 уроках это больше двадцати сэкономленных часов, и то на одной первой сборке. Дальше поправить урок — открыть, переписать абзац, закрыть.

• Меньше вопросов в поддержку

Единственное, что тут вообще считается в деньгах. И то не мной.
Считать так: обращения за месяц × минуты на ответ ÷ 60 = часы; часы × (оклад ÷ 160) = деньги. 150 обращений по 4 минуты — это 10 часов, при окладе 40 000 ₽ выходит 2 500 ₽ в месяц. Цифры иллюстративные, подставьте свои.

Час. Открыть три своих урока и выписать, какие куски повторяются — предупреждения, примеры, шаги, итоги. Это и есть будущие блоки.

Вечер. Написать под них CSS с нейросетью и положить в тему. Есть техспец — задача для него, нет — справитесь сами.

Пятнадцать минут. Пересобрать один урок и дать нескольким ученикам с одним вопросом — «что здесь надо сделать первым действием?» Отвечают сразу — переносите на остальные. Мнутся — дело не в оформлении, а в тексте.

Эти пять правил работают и как чек-лист, когда проверяете результат — свой или подрядчика. Шестым добавьте поиск по файлу: код фирменного цвета должен встречаться только вверху, в переменных.