- совет тем, кто планирует всерьёз заниматься кастомизацией платформы Геткурс (и других платформ)
рассказываю о том:
рассказываю о том:
1. Вступительная информация
2. Страх работы с кодом. Можно ли сломать страницу на GetCourse?
- актуальна ли услуга по оформлению платформы GetCourse
- можно ли случайно сломать страницу на GetCourse кодом
- как этого избежать
- совет от разработчиков платформы GetCourse перед написанием скриптов на платформе
- какие вопросы поможет решить закрытый телеграм-канал со скриптами для GetCourse
- что нужно знать, чтобы уметь изменять страницы на Геткурс (и других платформах) до неузнаваемости
- что нужно знать, чтобы уметь добавлять дополнительный функционал
рассказываю о том:
3. Как сделать боковое меню в GetCourse красивым. Стандартные настройки + готовые иконки
- как при помощи стандартных настроек платформы GetCourse сделать красивое боковое меню, а также поделюсь готовыми иконками, которые вы можете использовать на ваше усмотрение, в том числе и в своём проекте
В этом уроке:
4. Как добавить эффекты при наведении в боковом меню в GetCourse
- добавим код, который позволит оживить боковое меню в Геткурсе
рассказываю о том:
5. Как добавить дополнительную кнопку в боковое меню в GetCourse
- как можно добавить дополнительную кнопку в боковое меню на платформе GetCourse. Функционалом платформы такая возможность не предусмотрена, для этого есть специальный скрипт
Список уроков
из закрытого телеграм-канала
На этой странице размещен полный список уроков, которые доступны в закрытом канале со скриптами для GetCourse. Скоро многие из них можно будет приобрести отдельно
рассказываю о том:
8. КАК СДЕЛАТЬ ТАК, ЧТОБЫ GETCOURSE БЫЛ КРАСИВЫМ НЕ ТОЛЬКО В ДЕСКТОПЕ, НО И В МОБИЛЬНОЙ ВЕРСИИ И В ПРИЛОЖЕНИИ. СТАНДАРТНЫЕ НАСТРОЙКИ ПЛАТФОРМЫ GETCOURSE И ОСОБЕННОСТИ
- какие настройки необходимо знать, если планируете кастомизировать GetCourse, а также об особенностях приложения GetCourse (ранее «Чатиум»)
В этом уроке:
6. Как изменить кнопку в боковом меню в мобильной версии, которая не меняется стандартными настройками GetCourse
- есть в боковом меню в мобильной версии одна проблемка... Дело в том, что вид одной из кнопок не меняется стандартными способами. Применим готовые стили и сделаем её красивой
рассказываю о том:
7. АЛЬТЕРНАТИВНЫЙ СПОСОБ ИЗМЕНЕНИЯ БОКОВОГО МЕНЮ (СТОРОННИЙ КОД)
- как при помощи стороннего кода изменить главное (боковое) меню в GetCourse
- в стороннем коде присутствует интересный эффект при появлении в мобильной версии
В этом уроке:
9. ТРИ ВИДА ОФОРМЛЕНИЯ ПЛАТФОРМЫ ГЕТКУРС: ПОПРОЩЕ И ПОДЕШЕВЛЕ, СРЕДНИЙ И ДОРОГОЙ СПОСОБ. ОСОБЕННОСТИ
- каким образом сегодня оформляют платформу GetCourse, особенности каждого способа + примеры
рассказываю о том:
10. ОФОРМЛЕНИЕ ТРЕНИНГОВ ПРИ ПОМОЩИ CSS. ГОТОВЫЙ КОД-ШАБЛОН ДЛЯ УСТАНОВКИ В ВАШ АККАУНТ
- даю готовый код-шаблон для оформления списка тренингов. За пару минут список тренингов в Геткурсе преобразится, а вам нужно будет только поменять цвета, фон и т.п. (на ваше усмотрение)
рассказываю о том:
13. КРОССБРАУЗЕРНОСТЬ. ЧТО ЭТО ТАКОЕ, НУЖНО ЛИ МУДРИТЬ С КРОССБРАУЗЕРНОСТЬЮ И СТОИТ ЛИ БОЯТЬСЯ ВИДОИЗМЕНЯТЬ ЭЛЕМЕНТЫ В ГЕТКУРСЕ ПРИ ПОМОЩИ CSS (В ТРЕНИНГАХ)
- что это такое и почему об этом важно знать?
В этом уроке:
11. Способы добавления кода на платформе GetCourse, о которых знают не все
- об основах работы кода, как работают HTML, CSS и JavaScript + примеры
рассказываю о том:
12. КОД ДЛЯ ЗАЩИТЫ ОТ НЕДОБРОСОВЕСТНЫХ ЗАКАЗЧИКОВ. ПОЗВОЛЯЕТ ПОВЛИЯТЬ НА ЗАКАЗЧИКА, ДАЖЕ ЕСЛИ ВАС УДАЛИЛИ ИЗ АДМИНИСТРАТОРОВ
- даю код + инструкцию по установке. Код позволяет управлять отображением списка тренингов в онлайн-школе даже не являясь администратором этой онлайн-школы. Зная этот код, вы на 90% защищены от того, что вас кинут
В этом уроке:
14. КАКИЕ НАСТРОЙКИ ЗАПРОСИТЬ У ОНЛАЙН-ШКОЛЫ, ЧТОБЫ ПРИСТУПИТЬ К РАБОТЕ ПО ОФОРМЛЕНИЮ GETCOURSE?
- Бонусный урок. В уроке инструкция для вас и ваших клиентов
В этом уроке:
15. ГЛАВНАЯ СТРАНИЦА СО СПИСКОМ ТРЕНИНГОВ. КАК ОНА УСТРОЕНА. КАК УБРАТЬ ЛИШНИЕ И ВИДОИЗМЕНИТЬ УЖЕ ИМЕЮЩИЕСЯ ЭЛЕМЕНТЫ
- в этом уроке разберем главную страницу со списком тренингов
- о трёх способах добавить стили в HTML-разметку
- о способах добавить код на платформу GetCourse для оформления тренинга
- также затронем тему импорта дополнительных CSS-файлов и подключение их к странице на GetCourse
- в каких случаях стоит заморочиться о правильном отображении элементов во всех браузерах, а когда заморачиваться не стоит?
- как можно добиться кроссбраузерности и насколько это важно при оформлении платформы GetCourse?
Урок призван избавить вас от страха перед неработающим кодом
- узнаем, из чего она состоит, как видоизменить её при помощи CSS, научимся скрывать ненужные элементы, узнаем, что такое составные селекторы, научимся подбираться к конкретному элементу на странице и видоизменять его
Рассказываю о том:
16. КАК ПРАВИЛЬНО РАБОТАТЬ С ФОНОМ В СПИСКЕ ТРЕНИНГОВ
- как поменять фон в списке тренингов и почему именно такой код применяем
Рассказываю о том:
17. КАК ОФОРМИТЬ СПИСОК ТРЕНИНГОВ БАННЕРАМИ. ОСОБЕННОСТИ И ПРОЦЕСС ОФОРМЛЕНИЯ
- как при помощи картинок и кода сделать оформление списка тренингов
- какие есть цветовые модели и как их использовать
- как установить на фон однотонный цвет, градиент, картинку и даже несколько картинок
- как изменить расположение картинки на фоне, растянуть её на весь экран
- как для различных разрешений экрана устанавливать различный фон
- о CSS-свойствах для фиксации фона при прокручивании и о других CSS-свойствах
- как загружать картинки, работать с отступами, работать со старым конструктором
- как показывать различные баннеры на различных разрешениях
- как добавлять эффекты при наведении
- каких размеров баннеры использовать при оформлении
- особенности оформления таким способом и советы
+ Макет для того, чтобы попробовать оформить самостоятельно и код из урока
рассказываю о том:
18. КАК ДОБАВИТЬ БЛОК С ДАННЫМИ ПОЛЬЗОВАТЕЛЯ И ФОТОГРАФИЕЙ НА ГЛАВНУЮ СТРАНИЦУ + ГОТОВЫЙ КОД. РАЗБИРАЕМСЯ, КАК ВЫВОДИТЬ НУЖНУЮ ИНФОРМАЦИЮ НА СТРАНИЦЕ СО СПИСКОМ ТРЕНИНГОВ
- как вставить блок с данными пользователя на главной странице со списком тренингов
Рассказываю о том:
19. КАК КАСТОМИЗИРОВАТЬ СТАНДАРТНОЕ РАСПИСАНИЕ + ГОТОВЫЙ КОД CSS
- как при помощи готового кода кастомизировать стандартное расписание на платформе GetCourse, а также подогнать его под стиль онлайн-школы
- что это за код, как его понимать и что можно с ним сделать
- какие есть способы вытащить на страницу нужную информацию (основные способы и продвинутый способ)
Важно не только уметь вставить код на страницу, но и знать, каким образом и откуда берется информация.
- какие настройки выставить, чтобы всё работало корректно
- как вытащить фотографию из профиля на страницу со списком тренингов
- как вытащить любую другую информацию
- рассказываю о классных фишках, которые есть в CSS-коде
даю готовый код, который нужно просто скопировать, вставить и подогнать под проект, а также макет в фигме и готовые иконки для блока с информацией о пользователе.
- на примере расписания показываю, как Геткурс меняет стилизацию некоторых элементов в зависимости от статуса
+ даю готовый код, который нужно просто скопировать, вставить и подогнать под проект
В этом уроке:
20. КАК УСТАНОВИТЬ ИНДИКАТОР ЗАГРУЗКИ СТРАНИЦЫ (ПРЕЛОАДЕР) НА СТРАНИЦУ СО СПИСКОМ ТРЕНИНГОВ В GETCOURSE
- научимся устанавливать прелоадер на страницу со списком тренингов/подтренингов в GetCourse и разберемся, как он работает
- решим проблему подгружения старых стилей от GetCourse при загрузке кастомизированной страницы
- решим проблему дергающейся страницы при загрузке
- дам готовый код, который можно скопировать и вставить в вашем проекте
- расскажу, как подогнать цвет прелоадера под любой проект
Рассказываю о том:
21. КАК ИСКАТЬ ОШИБКИ В КОДЕ, ЕСЛИ ГЕТКУРС ЭТИ ОШИБКИ НЕ ПОДСВЕЧИВАЕТ, А КОД РАБОТАЕТ НЕПРАВИЛЬНО?
Иногда в коде может быть допущена одна маленькая ошибочка, и из-за этого едет вся вёрстка. Геткурс не всегда подсвечивает ошибки и их приходится искать самостоятельно. В этом уроке рассказываю, как это сделать быстро.
- + с 12 минуты (если точно, то с 12:23) рассказываю о том, каким образом браузер отрисовывает нам страницу сайта/платформы/сервиса (для лучшего понимания, как всё работает)
Рассказываю о том:
22. КАК ПЕРЕКРАСИТЬ ВИДЖЕТ ДЛЯ СВЯЗИ С ПОДДЕРЖКОЙ
- как правильно перекрасить виджет для связи с поддержкой на главной (да и в принципе, на любой) странице в Геткурсе + даю готовый CSS-код
Рассказываю о том:
23. ЦЕНООБРАЗОВАНИЕ. КАК ОЦЕНИТЬ РАБОТУ ПРИ КАСТОМИЗАЦИИ ПЛАТФОРМЫ GETCOURSE
- какую стоимость установить за свои услуги
- от чего зависит стоимость работы по кастомизации платформы Геткурс
В этом уроке:
24. КАК СТИЛИЗОВАТЬ СТАНДАРТНУЮ НАВИГАЦИЮ В ГЕТКУРС
- как при помощи готового кода стилизовать стандартную навигацию от GetCourse
- как добавить дополнительный элемент в навигационный блок при помощи JS
- как работает код из урока
- о своём личном опыте по установлению цен на такие услуги на фрилансе
- где можно подсмотреть актуальные цены на такие услуги
Также делюсь лайфхаком, как можно продать готовый код клиенту (сделать доппродажу)
Рассказываю о том:
25. НЕСТАНДАРТНЫЕ ШРИФТЫ НА GETCOURSE. КАК ПОДКЛЮЧИТЬ И ИСПОЛЬЗОВАТЬ ЛЮБОЙ СТОРОННИЙ ШРИФТ ИЗ ИНТЕРНЕТА
- для чего подключать сторонние шрифты и почему вообще они требуют подключения
- что такое веб-безопасные шрифты и для чего они нужны
рассказываю о том:
26. НАХОДИМ НУЖНЫЕ НАМ СТАНДАРТНЫЕ ЭЛЕМЕНТЫ В GETCOURSE В ПОДТРЕНИНГЕ И ПОДГОНЯЕМ ПОД СТИЛЬ ОНЛАЙН-ШКОЛЫ
- как найти нужные элементы в подтренинге и их стилизовать при помощи CSS
- как убрать ненужные элементы в подтренинге на GetCourse
- как стилизовать стандартное меню для админов и подогнать под цвет любого проекта
- какие форматы файлов со шрифтами существуют и какие лучше всего подключать к GetCourse
- какие есть способы подключения шрифтов к платформе GetCourse
Подключим сторонние шрифты к Геткурсу из макета и применим их к любым элементам на GetCourse
- что нужно сделать обязательно, когда подключаете сторонние шрифты к GetCourse
- затронем тему приоритетов стилей в CSS
+ весь код из урока
Рассказываю о том:
27. УСТАНАВЛИВАЕМ АНИМИРОВАННЫЙ ЛИНЕЙНЫЙ ПРОГРЕСС-БАР ПРОХОЖДЕНИЯ ТРЕНИНГА
- как при помощи набора готовых кодов установить линейный прогресс-бар
- как поменять цвета прогресс-бара под стиль любой онлайн-школы
- как настроить Геткурс, чтобы прогресс-бар работал
- принципы работы любого прогресс-бара на GetCourse
+ готовый код HTML, CSS и JavaScript для быстрой установки прогресс-бара
- о нескольких интересных свойствах в CSS-коде для прогресс-бара
В этом уроке:
28. УСТАНАВЛИВАЕМ БЛОК-ПРИВЕТСТВИЕ И ПОДТЯГИВАЕМ ИМЯ ИЗ ПРОФИЛЯ
- рассказываю, как за пару минут установить блок с приветствием и подтянуть туда имя пользователя
- делюсь готовым кодом
- объясняю, как всё работает
- подробно разбираю HTML и CSS-код
+ весь код из урока
- рассказываю, как браузер может подпортить вашу верстку и как это исправить
- рассказываю об одной из технологий гибкой верстки и как она работает
- рассказываю о наследуемых и ненаследуемых свойствах CSS
- рассказываю об относительных и абсолютных величинах в CSS и для чего они нам нужны
В этом уроке:
29. УСТАНАВЛИВАЕМ БЛОК-ПРИВЕТСТВИЕ С АВАТАРКОЙ ПОЛЬЗОВАТЕЛЯ И ИМЕНЕМ
- рассказываю, как за пару минут установить блок с приветствием и подтянуть туда имя и аватарку пользователя
- делюсь готовым кодом
- объясняю, как всё работает
+ весь код из урока
- подробно разбираю HTML и CSS-код и рассказываю об интересных свойствах CSS
- рассказываю об особенностях работы с отступами
- рассказываю об особенностях работы с шириной и высотой элементов
В этом уроке:
30. УСТАНАВЛИВАЕМ ШАБЛОН ОФОРМЛЕНИЯ СПИСКА МОДУЛЕЙ №1
- рассказываю, как за пару минут установить шаблон оформления списка модулей
- делюсь готовым кодом CSS
- объясняю, как изменить цвета под стиль любой онлайн-школы
+ весь код из урока
В этом уроке:
31. УСТАНАВЛИВАЕМ АНИМИРОВАННЫЙ ЛИНЕЙНЫЙ ПРОГРЕСС-БАР ПРОХОЖДЕНИЯ ТРЕНИНГА №2
- как при помощи набора готовых кодов установить линейный прогресс-бар
- как поменять цвета прогресс-бара под стиль любой онлайн-школы
- как настроить Геткурс, чтобы прогресс-бар работал
+ готовый код HTML, CSS и JavaScript для быстрой установки прогресс-бара
- как изменить окончание в слове (или всё слово сразу) в зависимости от пола пользователя
- принципы работы любого прогресс-бара на GetCourse
В этом уроке:
32. УСТАНАВЛИВАЕМ БЛОК С АВАТАРКОЙ, ИМЕНЕМ И ФАМИЛИЕЙ ПОЛЬЗОВАТЕЛЯ
- рассказываю и показываю, как установить блок с аватаркой пользователя, именем и фамилией
- рассказываю, как перекрасить блок под цвет любого проекта
+ готовый код HTML и CSS для быстрой установки блока
- рассказываю принцип работы данного кода
- разбираем импортируемый код HTML
- разбираем установленный код CSS
- рассказываю об интересных и полезных свойствах CSS
В этом уроке:
33. КАК ПОДОГНАТЬ РАЗМЕРЫ ЭЛЕМЕНТОВ В ТОЧНОСТИ ПО МАКЕТУ
- об очень удобном инструменте, которым пользуются все, кто кастомизирует Геткурс по макету
- как пользоваться этим инструментом и как с его помощью подогнать размеры элементов в точности как в макете в Figma
+ HTML и CSS-код подгоняемого блока
В этом уроке:
34. УСТАНАВЛИВАЕМ БЛОК С КОЛИЧЕСТВОМ ПОЛУЧЕННЫХ БАЛЛОВ/ПРОЙДЕННЫХ УРОКОВ
- рассказываю и показываю, как установить блок с количеством полученных баллов (можно использовать также для демонстрации количества пройденных уроков)
- рассказываю, как перекрасить блок под цвет любого проекта
+ готовый код HTML и CSS для быстрой установки и настройки блока
В этом уроке:
35. КАК РАЗДЕЛИТЬ СПИСОК МОДУЛЕЙ (ТРЕНИНГОВ/ПОДТРЕНИНГОВ) НА РАЗДЕЛЫ/КАТЕГОРИИ
- рассказываю и показываю, как разделить список тренингов на разделы/категории
- показываю весь процесс с нуля
- разбираем установленный код CSS
+ готовый код CSS из урока
- рассказываю, как всё работает
- затрагиваем очень нужную тему - псевдоклассы для определения элемента по его порядковому номеру
- рассказываю принцип работы данного кода
- разбираем импортируемый код HTML
- разбираем установленный код CSS
- разбираем импортируемый код JS
- рассказываю о полезных свойствах CSS
Иногда нужно разбить подтренинги на различные разделы/категории. Есть способ сделать это при помощи специальных псевдоклассов, которые позволяют стилизовать любой элемент на странице согласно его порядковому номеру, что очень облегчает работу.
В этом уроке:
36. УСТАНАВЛИВАЕМ РЕЙТИНГОВУЮ ТАБЛИЦУ В ЛЮБОЙ ТРЕНИНГ/ПОДТРЕНИНГ
- рассказываю и показываю, как быстро и просто установить блок с рейтинговой таблицей
- рассказываю, как перекрасить блок под цвет любого проекта
- рассказываю принцип работы данного кода
+ готовый код HTML, CSS и JS для быстрой установки и настройки блока
- разбираем импортируемый код HTML
- разбираем установленный код CSS
Блок с рейтинговой таблицей выводит на страницу список учеников согласно их достижениям, количество выводимых учеников можно настроить. В уроке два варианта кода для таблицы - с кнопкой и с кликабельной ссылкой.
- разбираем импортируемый код JS
- рассказываю, как произвести необходимые настройки скрипта
В этом уроке:
37. БЛОК ДЛЯ ОТСЛЕЖИВАНИЯ ПОСЛЕДНЕГО ПОСЕЩЕННОГО УРОКА
- рассказываю и показываю, как быстро и просто установить блок для отслеживания последнего посещенного урока
- рассказываю, как перекрасить блок под цвет любого проекта
- рассказываю принцип работы данного кода
+ готовый код HTML, CSS и JS для быстрой установки и настройки блока
- разбираем импортируемый код HTML
- разбираем установленный код CSS
Блок позволяет вывести на страницу ученика информацию о последнем посещенном им уроке, а также кнопку для перехода в этот урок. Также при помощи этого скрипта можно вывести название последнего посещенного модуля и кнопку для перехода в модуль, скрипт заносит все нужные данные в переменные.
В этом уроке:
38. УСТАНАВЛИВАЕМ ПРЕЛОАДЕР (ИНДИКАТОР ЗАГРУЗКИ СТРАНИЦЫ) В ВИДЕ ШКАЛЫ СО СТРЕЛКОЙ
- рассказываю и показываю, как быстро и просто установить прелоадер
- рассказываю, как перекрасить его под цвет любого проекта
- разбираем код CSS
+ готовый код CSS и JS для быстрой установки и настройки прелоадера
- разбираем импортируемый код JS
Блок позволяет не показывать страницу до тех пор, пока все CSS-стили не подгрузятся. Вместо дергающейся загружающейся страницы пользователь видит красивый индикатор загрузки, который можно раскрасить по инструкции под стиль любой онлайн-школы.
- разбираем импортируемый код JS
- рассказываю, как произвести необходимые настройки скрипта
В этом уроке:
39. CSS-ШАБЛОН ДЛЯ СПИСКА УРОКОВ №1
- рассказываю и показываю, как быстро и просто установить CSS-шаблон в вашем аккаунте GetCourse
- рассказываю, как перекрасить элементы страницы под цвет любого проекта
- разбираем установленный код CSS
+ готовый код CSS для быстрой установки
CSS-код позволяет буквально за минуту преобразить стандартное оформление списка уроков на Геткурсе. Можно поменять цвет любого элемента по инструкции и подогнать под фирменную цветовую гамму любой онлайн-школы.
В этом уроке:
40. С НУЛЯ ВЕРСТАЕМ БЛОК С РЕЖИМОМ РАБОТЫ ТЕХПОДДЕРЖКИ
- рассказываю и показываю, как с нуля сверстать блок по макету в вашем аккаунте GetCourse
- делюсь лайфхаками и своим опытом по работе с инструментом разработчика в браузере
- изучаем некоторые свойства CSS и их особенности
+ готовый код HTML и CSS для быстрой установки
Цель записи этого видеоурока - показать и рассказать, как с самого нуля ИЗ НИЧЕГО сверстать блок по макету в Figma. Поэтапно, постепенно, не торопясь.
В этом уроке:
41. УСТАНАВЛИВАЕМ КРУГОВОЙ ПРОГРЕСС-БАР ПРОХОЖДЕНИЯ ТРЕНИНГА
- рассказываю и показываю, как установить прогресс-бар в вашем аккаунте GetCourse
- рассказываю и показываю, как его перекрасить или видоизменить до неузнаваемости
+ готовый код HTML, CSS и JS для быстрой установки прогресс-бара
- разбираем код HTML, CSS и JS
- объясняю принцип работы этого блока
Этот блок специально разработан таким образом, чтобы его можно было легко перекрасить, видоизменить, установить и настроить за 5 - 10 минут в любой онлайн-школе на Геткурс.
В этом уроке:
42. JavaScript для техспецов. Урок № 1. Введение в программирование
- даю информацию, что такое JS и почему крутые техспецы умеют им пользоваться
- рассказываю о том, что следует знать, чтобы не запутаться в двух строчках кода
- рассказываю, в каком объёме нужно знать JS техническому специалисту
+ код из урока
- объясняю принцип работы JavaScript
Если умеете писать скрипты - вы уже на голову выше большинства техспецов, потому что, зная JS, можно делать невозможное возможным.
Этот урок - начало серии видеоуроков для технических специалистов, которые хотели бы научиться программировать, но не знают с чего начать. Начинаем поэтапно и подробно (на пальцах) разбираться с JS и учимся писать скрипты.
Этот урок - начало серии видеоуроков для технических специалистов, которые хотели бы научиться программировать, но не знают с чего начать. Начинаем поэтапно и подробно (на пальцах) разбираться с JS и учимся писать скрипты.
В этом уроке:
43. ВЫВОДИМ НА СТРАНИЦУ БОНУСНЫЙ БАЛАНС И КНОПКУ «ПОТРАТИТЬ»
- рассказываю и показываю, как установить блок в вашем аккаунте GetCourse
- рассказываю, как его перекрасить под цвет любого проекта
- разбираем код HTML, CSS и JS
+ готовый код HTML, CSS и JS для быстрой установки
Блок выводит на страницу сумму бонусных рублей на балансе пользователя. Легко устанавливается, перекрашивается под цвет любого проекта. При нулевом бонусном балансе кнопка в блоке блокируется и перекрашивается.
В этом уроке:
44. УСТАНАВЛИВАЕМ КАЛЕНДАРЬ №1 ДЛЯ GETCOURSE
- рассказываю и показываю, как установить календарь в вашем аккаунте GetCourse
- рассказываю, как его перекрасить под цвет любого проекта
- разбираем код HTML, CSS и JS
+ готовый код HTML, CSS и JS для быстрой установки
Календарь автоматически проходит по всем тренингам и подтренингам и собирает в одном месте все даты выхода уроков.
- простым языком объясняю, для чего нам нужны инструменты разработчика
- что такое JQuery и почему так много путаницы у тех, кто пытается научиться программировать самостоятельно
- разберем 2 простейших скрипта, которые сделают то, что стандартными настройками GetCourse сделать невозможно
- объясняю принцип работы этого блока
- объясняю принцип работы этого блока
В этом уроке:
45. УСТАНАВЛИВАЕМ КРАСИВЫЙ БЛОК ПРОДЛЕНИЯ ДОСТУПА К ТРЕНИНГУ
- рассказываю и показываю, как установить блок продления в вашем аккаунте GetCourse
- рассказываю, как его стилизовать под цвет любого проекта
+ готовый код для быстрой установки
- разбираем код CSS
- рассказываю о том, как точечно применить стили именно к нужному блоку
Блок продления показывает ученикам период доступа к тренингу, а также позволяет продлить период доступа (платно или бесплатно).
В этом уроке:
Наверняка вы не раз видели рекламный баннер от GetCourse, который сообщает администраторам о каких-либо мероприятиях. А мы установим свой баннер, который покажем своим ученикам и сообщим им о каком-нибудь событии.
+ готовый код для установки рекламного баннера
- рассказываю и показываю, как показать рекламный баннер конкретному сегменту в тренинге/подтренинге
- показываю, как установить баннер на все страницы или в конкретном тренинге
- рассказываю о том, что это за рекламный баннер, что он умеет и как работает
48. ДОБАВЛЯЕМ РЕКЛАМНЫЙ БАННЕР НА ВСЕ СТРАНИЦЫ GETCOURSE В ВАШЕМ АККАУНТЕ ИЛИ В КОНКРЕТНЫЙ ТРЕНИНГ
В этом уроке:
- пробежимся по коду и расскажу, как он работает
Такой прогресс-бар - необычный способ показать количество пройденных уроков в тренинге на Геткурс. Новый кружок закрашивается автоматически после прохождения очередного урока.
+ готовый код HTML, CSS и JS для быстрой установки прогресс-бара
- разбираем код
- рассказываю и показываю, как его перекрасить, изменить и подогнать под любой проект
- рассказываю и показываю, как установить такой прогресс-бар в вашем тренинге на GetCourse за 5 минут
49. УСТАНАВЛИВАЕМ ПРОГРЕСС-БАР ПРОХОЖДЕНИЯ УРОКОВ В ВИДЕ КРУЖОЧКОВ С ГАЛОЧКАМИ
В этом уроке:
- рассказываю, как правильно всё настроить, чтобы прогресс-бар работал автоматически
- делюсь лайфхаком, как сделать правку в коде в блоке HTML более комфортной и расширить границы поля ввода
- затрагиваем тему гибкой вёрстки при помощи grid
- подсвечиваю некоторые важные моменты в CSS
- рассказываю, как можно спрятать не модули/уроки, а любую другую информацию
- рассказываю, как правильно всё настроить, чтобы всё работало
- разбираем код HTML, CSS, JS
В этом уроке:
50. МЕНЮ-АККОРДЕОН В СПИСКЕ ТРЕНИНГОВ, ПОДТРЕНИНГОВ И УРОКОВ В GETCOURSE. СКРЫВАЕМ МОДУЛИ, УРОКИ И ЛЮБУЮ ДРУГУЮ ИНФОРМАЦИЮ ПОД КОМПАКТНОЙ КНОПКОЙ
- рассказываю и показываю, как установить код на GetCourse за 5 минут в список подтренингов и в список уроков
- рассказываю и показываю, как заменить кнопку на любой другой кликабельный элемент (скрытая информация может открываться при нажатии на кнопку, текст, картинку и т.п.)
+ готовый код HTML, CSS и JS для быстрой установки
Решение позволяет компактно представить большой объём информации и упростить навигацию по списку уроков, модулей (подтренингов). Необязательно скрывать при помощи этого скрипта именно уроки и модули, можно спрятать любую информацию (расписание, картинку, текст и т.п.). Достаточно добавить кнопке и контейнеру специальные классы.
46. НОВОГОДНИЙ ШАБЛОН ОФОРМЛЕНИЯ МОДУЛЕЙ ДЛЯ GETCOURSE. УСТАНАВЛИВАЕМ ЗА 5 МИНУТ
- рассказываю и показываю, как установить CSS-шаблон в вашем аккаунте GetCourse
- рассказываю, как его перекрасить под цвет любого проекта
- пробежимся по коду CSS, подсвечу основные моменты
+ готовый код для быстрой установки
- рассказываю о хитром способе добавления кода HTML
При помощи специального CSS-шаблона можно преобразить список модулей/подтренингов до неузнаваемости за 5 - 10 минут. Нужно всего лишь иметь этот шаблон и знать основы CSS 😉
В этом уроке:
47. КАК ИСПОЛЬЗОВАТЬ НЕЙРОСЕТИ В РАБОТЕ И КАК ИСПОЛЬЗОВАТЬ CHATGPT без VPN
- рассказываю, насколько важно научиться пользоваться нейросетью в наше время и в нашей сфере
- на реальном примере показываю, как нейросеть решает поставленную перед нами задачу
- делюсь сервисом, который связывает нас с ChatGPT без всяких VPN и на русском языке
+ готовый код
О нейросетях говорят из каждого утюга. Это не просто так - нейросети действительно очень экономят время и помогают в работе. Стоит только научиться ими пользоваться, именно этим мы и займёмся 😉
- рассказываю о том, что нужно обязательно сказать заказчику
- делюсь готовым кодом, который добавляет дополнительный функционал в GetCourse (добавляет в файловое хранилище возможность скопировать ссылку на файл прямо из списка в один клик). Код написан полностью нейросетью
В этом уроке:
51. ВЫВОДИМ В ПОДТРЕНИНГЕ КОЛИЧЕСТВО ПРОЙДЕННЫХ УРОКОВ
- рассказываю и показываю, как установить код для вывода количества пройденных в тренинге уроков на GetCourse за 2 минуты
- рассказываю, как всё работает и как стилизовать выведенную информацию под свой проект
+ готовый код CSS и JS для быстрой установки
- разбираем код JS и CSS
- рассказываю, как правильно всё настроить, чтобы всё работало
- рассказываю об особенностях работы скрипта
При помощи специального скрипта выведем информацию о количестве пройденных уроков в тренинге/подтренинге.
В этом уроке:
52. УСТАНАВЛИВАЕМ ШАБЛОН №2 ДЛЯ ОФОРМЛЕНИЯ СПИСКА УРОКОВ
- рассказываю и показываю, как установить данный шаблон на GetCourse за 1 минуту в список уроков
- рассказываю и показываю, как перекрасить шаблон в свои фирменные цвета
- разбираем код CSS, JS
+ готовый код для быстрой установки
- делюсь лайфхаком по разбору любого чужого кода
Решение позволяет за пару кликов сделать список уроков на Геткурс красивым. Шаблон адаптирован под все разрешения экрана, его можно перекрасить по инструкции в любые цвета.
- делюсь кодом CSS для стилизации урока в мобильном приложении ГетКурс
+ готовый код для быстрой установки
- делюсь лайфхаком, как открыть версию (вид) урока из мобильного приложения GetCourse на компьютере и как его стилизовать
- каким образом работает данный скрипт, подробно разбираем его
- как добавить баннер в уроке за пару минут
54. ДОБАВЛЯЕМ СВОЙ БАННЕР В УРОКЕ НА GETCOURSE
В этом уроке:
Начинаем оформлять урок внутри. Начнём с кастомизации верхней части страницы внутри урока, постепенно и подробно разбирая и кастомизируя блок за блоком в уроке.
В этом уроке:
55. ДОБАВЛЯЕМ ПРЕЛОАДЕР, КОТОРЫЙ СКРЫВАЕТ ДЕРГАНИЯ ПРИ ЗАГРУЗКЕ СТРАНИЦ НА GETCOURSE
- как установить прелоадер за 1 минуту в любой аккаунт GetCourse
- как подогнать его под стиль любой онлайн-школы (изменить цвет, размер, форму или вовсе изменить до неузнаваемости)
- каким образом работает данный скрипт, разбираем код CSS и JS
+ готовый код CSS и JS для быстрой установки
- какие можно выставить настройки в браузере, чтобы проверить работу скриптов при плохой скорости интернета
- делюсь лайфхаком по безопасной работе с полем "прочие скрипты для body"
- знакомимся с интересными CSS-свойствами обводки (border)
- делюсь кодом для дополнения навигации недостающей информацией (дополнительными кликабельными пунктами)
- пробежимся по коду и узнаем, как он работает
- как показать рекламный баннер конкретной категории пользователей
+ готовым кодом для установки рекламного баннера
- как настроить скрипт, вставить свою ссылку, картинку, отключить на определенном сайте, добавить несколько баннеров и произвести другие настройки
- что это за рекламный баннер, что он умеет и как работает
56. УСТАНАВЛИВАЕМ НАСТРАИВАЕМЫЙ РЕКЛАМНЫЙ БАННЕР НА ВСЕ СТРАНИЦЫ GETCOURSE В ВАШЕМ АККАУНТЕ
В этом уроке:
- разбираем готовый код CSS и JS
- показываю, как расположить всё содержимое внутри урока по центру страницы
- рассказываю и показываю, как можно кастомизировать навигацию: изменить цвет текста, сам текст и символ между пунктами навигации
+ готовый код CSS и JS для быстрой установки
- рассказываю и показываю, как расположить логотип по центру, изменить отступы у логотипа или вовсе его скрыть
- рассказываю и показываю, как изменить цвет фона внутри урока
53. ОФОРМЛЯЕМ УРОК НА GETCOURSE. РАБОТАЕМ С ЛОГОТИПОМ, КАСТОМИЗИРУЕМ НАВИГАЦИЮ И КНОПКИ УПРАВЛЕНИЯ, ДОПОЛНЯЕМ НАВИГАЦИЮ, МЕНЯЕМ ЦВЕТ ФОНА
В этом уроке:
Добавим баннер в уроке, который будет меняться в зависимости от разрешения экрана. В каждом уроке можно установить свой баннер для мобилки и десктопа. Также в уроке делюсь лайфхаком, как открыть версию урока из приложения GetCourse на десктопе.
Решение позволяет скрыть загрузку старых стилей и решает проблему дергания при загрузке страниц на платформе (особенно актуально, когда страницы кастомизированны при помощи CSS). После установки прелоадера контент на всех страницах аккаунта появляется плавно и без рывков.
Наверняка вы не раз видели рекламный баннер от GetCourse, который сообщает администраторам о каких-либо мероприятиях. Мы установим свой баннер, который покажем пользователям и сообщим им о каком-нибудь событии. Рекламный баннер имеет гибкие настройки видимости, его можно показывать определенному сегменту, группе, сотрудникам, ученикам в определенной стране и т. п. Можно установить неограниченное количество баннеров для различных категорий пользователей.
В этом уроке:
57. КАСТОМИЗИРУЕМ ШАПКУ В УРОКЕ
- как кастомизировать шапку в уроке
- каким образом работает установленный CSS-шаблон (подробно разберем код)
+ готовый код CSS с комментариями для быстрой установки
- как разместить всё содержимое урока по центру либо растянуть на ширину страницы
- одно интересное CSS-свойство, о котором знают далеко не все и которое может здорово помочь при кастомизации онлайн-школ
Красиво оформим шапку внутри урока при помощи готового CSS-шаблона, а потом подробно разберём установленный код. Научимся подгонять шаблон под любой проект. Узнаем об одном интересном CSS - свойстве и научимся его применять.
В этом уроке:
58. ТРИ СПОСОБА ДОБАВИТЬ КОД ДЛЯ СТИЛИЗАЦИИ УРОКА НА GETCOURSE, О КОТОРЫХ ЗНАЮТ НЕ ВСЕ
- о трёх способах стилизации урока
- о том, какой способ и для чего подходит
- как написать код один раз и применить его сразу к множеству уроков
+ делюсь кодом из урока
- как сделать так, чтобы весь код для всех уроков лежал в одном месте
- как стилизовать неадаптированный урок в приложении GetCourse
Расскажу о том, как правильно добавить код, если вы хотите стилизовать один урок, много уроков сразу или хотите кастомизировать уроки в мобильном приложении GetCourse. Этой информации нет нигде.
В этом уроке:
59. КАК ПОКАЗАТЬ ОТКРЫТЫЕ И ЗАКРЫТЫЕ ТРЕНИНГИ/МОДУЛИ/УРОКИ, ЕСЛИ ОФОРМЛЕНИЕ СДЕЛАНО БАННЕРАМИ (КАРТИНКАМИ)
- какие способы показать закрытые тренинги/уроки существуют
- когда и какой способ лучше использовать
- как стилизовать закрытые тренинги/уроки вручную или настроить автоматический способ
+ готовый код CSS с комментариями
- как повесить замочек на тренинг и отключить клик при помощи CSS
- разбираем CSS-код из урока
- каким образом вывести события для определенного сегмента, группы и т.п.
- подробно разбираем CSS-код из урока
- каким образом работает скрипт, принцип работы календаря
+ готовый код JavaScript, CSS с комментариями и коды для импорта
- как установить и настроить календарь, перекрасить под фирменные цвета онлайн-школы, видоизменить до неузнаваемости, изменить тексты и т.п.
- какие функции есть у календаря и что в нем можно настроить
60. УСТАНАВЛИВАЕМ КАЛЕНДАРЬ СОБЫТИЙ №2 НА GETCOURSE
В этом уроке:
Во многих онлайн-школах на Геткурс оформление сделано при помощи картинок или картинок и кода. В этом уроке расскажу, как в таком случае можно показать открытые и закрытые тренинги, модули, уроки, повесить замочек, отключить клик и перекрасить недоступные разделы.
Установим и настроим календарик для онлайн-школ на GetCourse, который позволяет ученикам видеть список запланированных мероприятий в удобном формате. Календарь выводит любые события, прописанные на специальной странице, и показывает их там, где вы захотите. Не привязан к настройкам уроков на GetCourse.
Контакты
Шапенков Николай Помпиевич
ИНН 432602071108
Политика конфиденциальности
Перейти к уроку могут только участники закрытого канала «КАНАЛ СО СКРИПТАМИ ДЛЯ GETCOURSE».
Почему у меня нет доступа?
О том, как попасть в наш закрытый клуб, вам расскажет бот-помощник
Напишите в службу заботы, если у вас возникли вопросы
Приобрести видеоуроки и скрипты по отдельности можно прямо здесь. Просто закройте этот попап, нажав на крестик вверху, выберите нужный урок и нажмите кнопку
Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.