• совет тем, кто планирует всерьёз заниматься кастомизацией платформы Геткурс (и других платформ)
рассказываю о том:
рассказываю о том:
Вступительная информация
Страх работы с кодом. Можно ли сломать страницу на GetCourse?
  • актуальна ли услуга по оформлению платформы GetCourse
  • можно ли случайно сломать страницу на GetCourse кодом
  • как этого избежать
  • совет от разработчиков платформы GetCourse перед написанием скриптов на платформе
  • какие вопросы поможет решить закрытый телеграм-канал со скриптами для GetCourse
  • что нужно знать, чтобы уметь изменять страницы на Геткурс (и других платформах) до неузнаваемости
  • что нужно знать, чтобы уметь добавлять дополнительный функционал
рассказываю о том:
Как сделать боковое меню в GetCourse красивым. Стандартные настройки + готовые иконки
  • как при помощи стандартных настроек платформы GetCourse сделать красивое боковое меню, а также поделюсь готовыми иконками, которые вы можете использовать на ваше усмотрение, в том числе и в своём проекте
В этом уроке:
Как добавить эффекты при наведении в боковом меню в GetCourse
  • добавим код, который позволит оживить боковое меню в Геткурсе
рассказываю о том:
Как добавить дополнительную кнопку в боковое меню в GetCourse
  • как можно добавить дополнительную кнопку в боковое меню на платформе GetCourse. Функционалом платформы такая возможность не предусмотрена, для этого есть специальный скрипт
Список уроков
из закрытого телеграм-канала
рассказываю о том:
КАК СДЕЛАТЬ ТАК, ЧТОБЫ GETCOURSE БЫЛ КРАСИВЫМ НЕ ТОЛЬКО В ДЕСКТОПЕ, НО И В МОБИЛЬНОЙ ВЕРСИИ И В ПРИЛОЖЕНИИ. СТАНДАРТНЫЕ НАСТРОЙКИ ПЛАТФОРМЫ GETCOURSE И ОСОБЕННОСТИ
  • какие настройки необходимо знать, если планируете кастомизировать GetCourse, а также об особенностях приложения GetCourse (ранее «Чатиум»)
В этом уроке:
Как изменить кнопку в боковом меню в мобильной версии, которая не меняется стандартными настройками GetCourse
  • есть в боковом меню в мобильной версии одна проблемка... Дело в том, что вид одной из кнопок не меняется стандартными способами. Применим готовые стили и сделаем её красивой
рассказываю о том:
АЛЬТЕРНАТИВНЫЙ СПОСОБ ИЗМЕНЕНИЯ БОКОВОГО МЕНЮ (СТОРОННИЙ КОД)
  • как при помощи стороннего кода изменить главное (боковое) меню в GetCourse
  • в стороннем коде присутствует интересный эффект при появлении в мобильной версии
В этом уроке:
ТРИ ВИДА ОФОРМЛЕНИЯ ПЛАТФОРМЫ ГЕТКУРС: ПОПРОЩЕ И ПОДЕШЕВЛЕ, СРЕДНИЙ И ДОРОГОЙ СПОСОБ. ОСОБЕННОСТИ
  • каким образом сегодня оформляют платформу GetCourse, особенности каждого способа + примеры
рассказываю о том:
ОФОРМЛЕНИЕ ТРЕНИНГОВ ПРИ ПОМОЩИ CSS. ГОТОВЫЙ КОД-ШАБЛОН ДЛЯ УСТАНОВКИ В ВАШ АККАУНТ
  • даю готовый код-шаблон для оформления списка тренингов. За пару минут список тренингов в Геткурсе преобразится, а вам нужно будет только поменять цвета, фон и т.п. (на ваше усмотрение)
рассказываю о том:
КРОССБРАУЗЕРНОСТЬ. ЧТО ЭТО ТАКОЕ, НУЖНО ЛИ МУДРИТЬ С КРОССБРАУЗЕРНОСТЬЮ И СТОИТ ЛИ БОЯТЬСЯ ВИДОИЗМЕНЯТЬ ЭЛЕМЕНТЫ В ГЕТКУРСЕ ПРИ ПОМОЩИ CSS (В ТРЕНИНГАХ)
  • что это такое и почему об этом важно знать?
В этом уроке:
Способы добавления кода на платформе GetCourse, о которых знают не все
  • об основах работы кода, как работают HTML, CSS и JavaScript + примеры
рассказываю о том:
КОД ДЛЯ ЗАЩИТЫ ОТ НЕДОБРОСОВЕСТНЫХ ЗАКАЗЧИКОВ. ПОЗВОЛЯЕТ ПОВЛИЯТЬ НА ЗАКАЗЧИКА, ДАЖЕ ЕСЛИ ВАС УДАЛИЛИ ИЗ АДМИНИСТРАТОРОВ
  • даю код + инструкцию по установке. Код позволяет управлять отображением списка тренингов в онлайн-школе даже не являясь администратором этой онлайн-школы. Зная этот код, вы на 90% защищены от того, что вас кинут
В этом уроке:
КАКИЕ НАСТРОЙКИ ЗАПРОСИТЬ У ОНЛАЙН-ШКОЛЫ, ЧТОБЫ ПРИСТУПИТЬ К РАБОТЕ ПО ОФОРМЛЕНИЮ GETCOURSE?
  • Бонусный урок. В уроке инструкция для вас и ваших клиентов
В этом уроке:
ГЛАВНАЯ СТРАНИЦА СО СПИСКОМ ТРЕНИНГОВ. КАК ОНА УСТРОЕНА. КАК УБРАТЬ ЛИШНИЕ И ВИДОИЗМЕНИТЬ УЖЕ ИМЕЮЩИЕСЯ ЭЛЕМЕНТЫ
  • в этом уроке разберем главную страницу со списком тренингов
  • о трёх способах добавить стили в HTML-разметку
  • о способах добавить код на платформу GetCourse для оформления тренинга
  • также затронем тему импорта дополнительных CSS-файлов и подключение их к странице на GetCourse
  • в каких случаях стоит заморочиться о правильном отображении элементов во всех браузерах, а когда заморачиваться не стоит?
  • как можно добиться кроссбраузерности и насколько это важно при оформлении платформы GetCourse?
Урок призван избавить вас от страха перед неработающим кодом
  • узнаем, из чего она состоит, как видоизменить её при помощи CSS, научимся скрывать ненужные элементы, узнаем, что такое составные селекторы, научимся подбираться к конкретному элементу на странице и видоизменять его
Рассказываю о том:
КАК ПРАВИЛЬНО РАБОТАТЬ С ФОНОМ В СПИСКЕ ТРЕНИНГОВ
  • как поменять фон в списке тренингов и почему именно такой код применяем
Рассказываю о том:
КАК ОФОРМИТЬ СПИСОК ТРЕНИНГОВ БАННЕРАМИ. ОСОБЕННОСТИ И ПРОЦЕСС ОФОРМЛЕНИЯ
  • как при помощи картинок и кода сделать оформление списка тренингов
  • какие есть цветовые модели и как их использовать
  • как установить на фон однотонный цвет, градиент, картинку и даже несколько картинок
  • как изменить расположение картинки на фоне, растянуть её на весь экран
  • как для различных разрешений экрана устанавливать различный фон
  • о CSS-свойствах для фиксации фона при прокручивании и о других CSS-свойствах
  • как загружать картинки, работать с отступами, работать со старым конструктором
  • как показывать различные баннеры на различных разрешениях
  • как добавлять эффекты при наведении
  • каких размеров баннеры использовать при оформлении
  • особенности оформления таким способом и советы
+ Макет для того, чтобы попробовать оформить самостоятельно и код из урока
рассказываю о том:
КАК ДОБАВИТЬ БЛОК С ДАННЫМИ ПОЛЬЗОВАТЕЛЯ И ФОТОГРАФИЕЙ НА ГЛАВНУЮ СТРАНИЦУ + ГОТОВЫЙ КОД. РАЗБИРАЕМСЯ, КАК ВЫВОДИТЬ НУЖНУЮ ИНФОРМАЦИЮ НА СТРАНИЦЕ СО СПИСКОМ ТРЕНИНГОВ
  • как вставить блок с данными пользователя на главной странице со списком тренингов
Рассказываю о том:
КАК КАСТОМИЗИРОВАТЬ СТАНДАРТНОЕ РАСПИСАНИЕ + ГОТОВЫЙ КОД CSS
  • как при помощи готового кода кастомизировать стандартное расписание на платформе GetCourse, а также подогнать его под стиль онлайн-школы
  • что это за код, как его понимать и что можно с ним сделать
  • какие есть способы вытащить на страницу нужную информацию (основные способы и продвинутый способ)
Важно не только уметь вставить код на страницу, но и знать, каким образом и откуда берется информация.
  • какие настройки выставить, чтобы всё работало корректно
  • как вытащить фотографию из профиля на страницу со списком тренингов
  • как вытащить любую другую информацию
  • рассказываю о классных фишках, которые есть в CSS-коде
даю готовый код, который нужно просто скопировать, вставить и подогнать под проект, а также макет в фигме и готовые иконки для блока с информацией о пользователе.
  • на примере расписания показываю, как Геткурс меняет стилизацию некоторых элементов в зависимости от статуса
+ даю готовый код, который нужно просто скопировать, вставить и подогнать под проект
В этом уроке:
КАК УСТАНОВИТЬ ИНДИКАТОР ЗАГРУЗКИ СТРАНИЦЫ (ПРЕЛОАДЕР) НА СТРАНИЦУ СО СПИСКОМ ТРЕНИНГОВ В GETCOURSE
  • научимся устанавливать прелоадер на страницу со списком тренингов/подтренингов в GetCourse и разберемся, как он работает
  • решим проблему подгружения старых стилей от GetCourse при загрузке кастомизированной страницы
  • решим проблему дергающейся страницы при загрузке
  • дам готовый код, который можно скопировать и вставить в вашем проекте
  • расскажу, как подогнать цвет прелоадера под любой проект
Рассказываю о том:
КАК ИСКАТЬ ОШИБКИ В КОДЕ, ЕСЛИ ГЕТКУРС ЭТИ ОШИБКИ НЕ ПОДСВЕЧИВАЕТ, А КОД РАБОТАЕТ НЕПРАВИЛЬНО?
Иногда в коде может быть допущена одна маленькая ошибочка, и из-за этого едет вся вёрстка. Геткурс не всегда подсвечивает ошибки и их приходится искать самостоятельно. В этом уроке рассказываю, как это сделать быстро.
  • + с 12 минуты (если точно, то с 12:23) рассказываю о том, каким образом браузер отрисовывает нам страницу сайта/платформы/сервиса (для лучшего понимания, как всё работает)
Рассказываю о том:
КАК ПЕРЕКРАСИТЬ ВИДЖЕТ ДЛЯ СВЯЗИ С ПОДДЕРЖКОЙ
  • как правильно перекрасить виджет для связи с поддержкой на главной (да и в принципе, на любой) странице в Геткурсе + даю готовый CSS-код
Рассказываю о том:
ЦЕНООБРАЗОВАНИЕ. КАК ОЦЕНИТЬ РАБОТУ ПРИ КАСТОМИЗАЦИИ ПЛАТФОРМЫ GETCOURSE
  • какую стоимость установить за свои услуги
  • от чего зависит стоимость работы по кастомизации платформы Геткурс
В этом уроке:
КАК СТИЛИЗОВАТЬ СТАНДАРТНУЮ НАВИГАЦИЮ В ГЕТКУРС
  • как при помощи готового кода стилизовать стандартную навигацию от GetCourse
  • как добавить дополнительный элемент в навигационный блок при помощи JS
  • как работает код из урока
  • о своём личном опыте по установлению цен на такие услуги на фрилансе
  • где можно подсмотреть актуальные цены на такие услуги
Также делюсь лайфхаком, как можно продать готовый код клиенту (сделать доппродажу)
Рассказываю о том:
НЕСТАНДАРТНЫЕ ШРИФТЫ НА GETCOURSE. КАК ПОДКЛЮЧИТЬ И ИСПОЛЬЗОВАТЬ ЛЮБОЙ СТОРОННИЙ ШРИФТ ИЗ ИНТЕРНЕТА
  • для чего подключать сторонние шрифты и почему вообще они требуют подключения
  • что такое веб-безопасные шрифты и для чего они нужны
рассказываю о том:
НАХОДИМ НУЖНЫЕ НАМ СТАНДАРТНЫЕ ЭЛЕМЕНТЫ В GETCOURSE В ПОДТРЕНИНГЕ И ПОДГОНЯЕМ ПОД СТИЛЬ ОНЛАЙН-ШКОЛЫ
  • как найти нужные элементы в подтренинге и их стилизовать при помощи CSS
  • как убрать ненужные элементы в подтренинге на GetCourse
  • как стилизовать стандартное меню для админов и подогнать под цвет любого проекта
  • какие форматы файлов со шрифтами существуют и какие лучше всего подключать к GetCourse
  • какие есть способы подключения шрифтов к платформе GetCourse
Подключим сторонние шрифты к Геткурсу из макета и применим их к любым элементам на GetCourse
  • что нужно сделать обязательно, когда подключаете сторонние шрифты к GetCourse
  • затронем тему приоритетов стилей в CSS
+ весь код из урока
Рассказываю о том:
УСТАНАВЛИВАЕМ АНИМИРОВАННЫЙ ЛИНЕЙНЫЙ ПРОГРЕСС-БАР ПРОХОЖДЕНИЯ ТРЕНИНГА
  • как при помощи набора готовых кодов установить линейный прогресс-бар
  • как поменять цвета прогресс-бара под стиль любой онлайн-школы
  • как настроить Геткурс, чтобы прогресс-бар работал
  • принципы работы любого прогресс-бара на GetCourse
+ готовый код HTML, CSS и JavaScript для быстрой установки прогресс-бара
  • о нескольких интересных свойствах в CSS-коде для прогресс-бара
В этом уроке:
УСТАНАВЛИВАЕМ БЛОК-ПРИВЕТСТВИЕ И ПОДТЯГИВАЕМ ИМЯ ИЗ ПРОФИЛЯ
  • рассказываю, как за пару минут установить блок с приветствием и подтянуть туда имя пользователя
  • делюсь готовым кодом
  • объясняю, как всё работает
  • подробно разбираю HTML и CSS-код
+ весь код из урока
  • рассказываю, как браузер может подпортить вашу верстку и как это исправить
  • рассказываю об одной из технологий гибкой верстки и как она работает
  • рассказываю о наследуемых и ненаследуемых свойствах CSS
  • рассказываю об относительных и абсолютных величинах в CSS и для чего они нам нужны
В этом уроке:
УСТАНАВЛИВАЕМ БЛОК-ПРИВЕТСТВИЕ С АВАТАРКОЙ ПОЛЬЗОВАТЕЛЯ И ИМЕНЕМ
  • рассказываю, как за пару минут установить блок с приветствием и подтянуть туда имя и аватарку пользователя
  • делюсь готовым кодом
  • объясняю, как всё работает
+ весь код из урока
  • подробно разбираю HTML и CSS-код и рассказываю об интересных свойствах CSS
  • рассказываю об особенностях работы с отступами
  • рассказываю об особенностях работы с шириной и высотой элементов
В этом уроке:
УСТАНАВЛИВАЕМ ШАБЛОН ОФОРМЛЕНИЯ СПИСКА МОДУЛЕЙ №1
  • рассказываю, как за пару минут установить шаблон оформления списка модулей
  • делюсь готовым кодом CSS
  • объясняю, как изменить цвета под стиль любой онлайн-школы
+ весь код из урока
В этом уроке:
УСТАНАВЛИВАЕМ АНИМИРОВАННЫЙ ЛИНЕЙНЫЙ ПРОГРЕСС-БАР ПРОХОЖДЕНИЯ ТРЕНИНГА №2
  • как при помощи набора готовых кодов установить линейный прогресс-бар
  • как поменять цвета прогресс-бара под стиль любой онлайн-школы
  • как настроить Геткурс, чтобы прогресс-бар работал
+ готовый код HTML, CSS и JavaScript для быстрой установки прогресс-бара
  • как изменить окончание в слове (или всё слово сразу) в зависимости от пола пользователя
  • принципы работы любого прогресс-бара на GetCourse
В этом уроке:
УСТАНАВЛИВАЕМ БЛОК С АВАТАРКОЙ, ИМЕНЕМ И ФАМИЛИЕЙ ПОЛЬЗОВАТЕЛЯ
  • рассказываю и показываю, как установить блок с аватаркой пользователя, именем и фамилией
  • рассказываю, как перекрасить блок под цвет любого проекта
+ готовый код HTML и CSS для быстрой установки блока
  • рассказываю принцип работы данного кода
  • разбираем импортируемый код HTML
  • разбираем установленный код CSS
  • рассказываю об интересных и полезных свойствах CSS
В этом уроке:
КАК ПОДОГНАТЬ РАЗМЕРЫ ЭЛЕМЕНТОВ В ТОЧНОСТИ ПО МАКЕТУ
  • об очень удобном инструменте, которым пользуются все, кто кастомизирует Геткурс по макету
  • как пользоваться этим инструментом и как с его помощью подогнать размеры элементов в точности как в макете в Figma
+ HTML и CSS-код подгоняемого блока
В этом уроке:
УСТАНАВЛИВАЕМ БЛОК С КОЛИЧЕСТВОМ ПОЛУЧЕННЫХ БАЛЛОВ/ПРОЙДЕННЫХ УРОКОВ
  • рассказываю и показываю, как установить блок с количеством полученных баллов (можно использовать также для демонстрации количества пройденных уроков)
  • рассказываю, как перекрасить блок под цвет любого проекта
+ готовый код HTML и CSS для быстрой установки и настройки блока
В этом уроке:
КАК РАЗДЕЛИТЬ СПИСОК МОДУЛЕЙ (ТРЕНИНГОВ/ПОДТРЕНИНГОВ) НА РАЗДЕЛЫ/КАТЕГОРИИ
  • рассказываю и показываю, как разделить список тренингов на разделы/категории
  • показываю весь процесс с нуля
  • разбираем установленный код CSS
+ готовый код CSS из урока
  • рассказываю, как всё работает
  • затрагиваем очень нужную тему - псевдоклассы для определения элемента по его порядковому номеру
  • рассказываю принцип работы данного кода
  • разбираем импортируемый код HTML
  • разбираем установленный код CSS
  • разбираем импортируемый код JS
  • рассказываю о полезных свойствах CSS
Иногда нужно разбить подтренинги на различные разделы/категории. Есть способ сделать это при помощи специальных псевдоклассов, которые позволяют стилизовать любой элемент на странице согласно его порядковому номеру, что очень облегчает работу.
В этом уроке:
УСТАНАВЛИВАЕМ РЕЙТИНГОВУЮ ТАБЛИЦУ В ЛЮБОЙ ТРЕНИНГ/ПОДТРЕНИНГ
  • рассказываю и показываю, как быстро и просто установить блок с рейтинговой таблицей
  • рассказываю, как перекрасить блок под цвет любого проекта
  • рассказываю принцип работы данного кода
+ готовый код HTML, CSS и JS для быстрой установки и настройки блока
  • разбираем импортируемый код HTML
  • разбираем установленный код CSS
Блок с рейтинговой таблицей выводит на страницу список учеников согласно их достижениям, количество выводимых учеников можно настроить. В уроке два варианта кода для таблицы - с кнопкой и с кликабельной ссылкой.
  • разбираем импортируемый код JS
  • рассказываю, как произвести необходимые настройки скрипта
В этом уроке:
БЛОК ДЛЯ ОТСЛЕЖИВАНИЯ ПОСЛЕДНЕГО ПОСЕЩЕННОГО УРОКА
  • рассказываю и показываю, как быстро и просто установить блок для отслеживания последнего посещенного урока
  • рассказываю, как перекрасить блок под цвет любого проекта
  • рассказываю принцип работы данного кода
+ готовый код HTML, CSS и JS для быстрой установки и настройки блока
  • разбираем импортируемый код HTML
  • разбираем установленный код CSS
Блок позволяет вывести на страницу ученика информацию о последнем посещенном им уроке, а также кнопку для перехода в этот урок. Также при помощи этого скрипта можно вывести название последнего посещенного модуля и кнопку для перехода в модуль, скрипт заносит все нужные данные в переменные.
В этом уроке:
УСТАНАВЛИВАЕМ ПРЕЛОАДЕР (ИНДИКАТОР ЗАГРУЗКИ СТРАНИЦЫ) В ВИДЕ ШКАЛЫ СО СТРЕЛКОЙ
  • рассказываю и показываю, как быстро и просто установить прелоадер
  • рассказываю, как перекрасить его под цвет любого проекта
  • разбираем код CSS
+ готовый код CSS и JS для быстрой установки и настройки прелоадера
  • разбираем импортируемый код JS
Блок позволяет не показывать страницу до тех пор, пока все CSS-стили не подгрузятся. Вместо дергающейся загружающейся страницы пользователь видит красивый индикатор загрузки, который можно раскрасить по инструкции под стиль любой онлайн-школы.
  • разбираем импортируемый код JS
  • рассказываю, как произвести необходимые настройки скрипта
В этом уроке:
CSS-ШАБЛОН ДЛЯ СПИСКА УРОКОВ №1
  • рассказываю и показываю, как быстро и просто установить CSS-шаблон в вашем аккаунте GetCourse
  • рассказываю, как перекрасить элементы страницы под цвет любого проекта
  • разбираем установленный код CSS
+ готовый код CSS для быстрой установки
CSS-код позволяет буквально за минуту преобразить стандартное оформление списка уроков на Геткурсе. Можно поменять цвет любого элемента по инструкции и подогнать под фирменную цветовую гамму любой онлайн-школы.
В этом уроке:
С НУЛЯ ВЕРСТАЕМ БЛОК С РЕЖИМОМ РАБОТЫ ТЕХПОДДЕРЖКИ
  • рассказываю и показываю, как с нуля сверстать блок по макету в вашем аккаунте GetCourse
  • делюсь лайфхаками и своим опытом по работе с инструментом разработчика в браузере
  • изучаем некоторые свойства CSS и их особенности
+ готовый код HTML и CSS для быстрой установки
Цель записи этого видеоурока - показать и рассказать, как с самого нуля ИЗ НИЧЕГО сверстать блок по макету в Figma. Поэтапно, постепенно, не торопясь.
Контакты
Шапенков Николай Помпиевич
ИНН 432602071108
Политика конфиденциальности
Перейти к уроку могут только участники закрытого канала «КАНАЛ СО СКРИПТАМИ ДЛЯ GETCOURSE».
Почему у меня нет доступа?
О том, как попасть в наш закрытый клуб, вам расскажет бот-помощник
Приобрести видеоуроки и скрипты можно будет по отдельности в нашем интернет-магазине скриптов для GetCourse (пока на стадии разработки)