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

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

Как выбирается тема

Подход к выбору темы должен быть максимально рыночным — мы должны понять, что действительно важно на рынке. Но стоит ли при этом идти к разработчикам? Забегая вперёд, ответим: нет, так как мнение разработчиков о том, чему стоит учиться, часто расходится с мнением рынка. Это показало исследование, которое мы проводили.

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

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

В нашем исследовании участвовало больше 150 тимлидов, мы проанализировали более 2000 вакансий, а результатом стала карта компетенций, разбитых по грейдам.

Несмотря на то, что мы с ней не закончили (она будет постоянно развиваться и расширяться), мы смогли выделить первые двадцать самых востребованных навыков и начать разработку курсов по этим темам. Есть несколько обязательных этапов производства курсов.

Исследования темы

Сначала по выбранной теме проводится анализ рынка. Мы понимаем, насколько важен навык, какие типовые задачи решаются с его помощью, смотрим, как этому навыку уже учат другие компании и какая вообще информация есть по нему в интернете.

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

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

Выбор команды авторов и доработка фактуры

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

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

На выходе мы получаем полностью готовый документ, который можно показывать рынку.

Ревью фактуры курса рынком

У нас нет задачи делать авторские курсы. То есть курсы, которые основаны на мнении и опыте одного человека. Несмотря на то, что мы доверяем автору, наша цель — сделать так, чтобы курс максимально развивал навык и закрывал потребность на рынке. Для этого мы обращаемся к другим разработчикам, которые имеют экспертизу в навыке, и даём им фактуру на ревью.

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

Разработка курса по фактуре

Это самый понятный этап разработки. Мы делаем так, чтобы всё, что указано в фактуре, оказалось в курсе. Авторы пишут статьи, готовят эталонные реализации, создают демо, задания и их разбор. В составе курсов также есть тесты по пройденным разделам, ведь наша методика предусматривает закрепление знаний.

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

Ревью курса рынком

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

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

Редактура и корректура

При выборе авторов мы ориентируемся на его опыт и способность этот опыт передать, но мы не оцениваем навыки написания текстов. Однако для конечного разработчика важно не только получение опыта, но и понятное восприятие текстов.

К делу приступают редакторы. Они, не меняя сути и логики повествования, делают материал удобнее для чтения и восприятия.

После этого этапа нам остаётся только оставить подсказки в интерфейсе, и курс готов к выпуску.


Разработка курса, который бы удовлетворял требования рынка и был удобен в прохождении — сложный процесс, в котором задействована большая команда.

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


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Управление асинхронными запросами с помощью AbortController

Управление асинхронными запросами с помощью AbortController

Когда вы отправляете асинхронный запрос — особенно через fetch — бывает важно иметь возможность его отменить. Например, если пользователь ушёл со страницы, переключил вкладку или выполнил другое действие, которое делает запрос больше неактуальным. Если такие запросы не останавливать, они продолжают работать в фоне, потребляют ресурсы и могут привести к утечкам памяти или ошибкам, особенно если в ответе вы потом обновляете уже несуществующий интерфейс.

Для решения этой задачи в браузере появился AbortController. Он доступен в статусе «Widely Available» с 25 сентября 2021 года, что означает — поддерживается всеми современными браузерами и безопасен для использования в продакшене.

Читать дальше
  • 26 июня 2025
Функция `cubic-bezier()` в CSS для плавных анимаций

Функция `cubic-bezier()` в CSS для плавных анимаций

Когда вы задаёте анимацию или переход в CSS, свойства изменяются неравномерно: сначала медленно, потом быстрее, в конце снова замедляются. Это поведение называется интерполяцией и определяется так называемой функцией ускорения (или «easing function»). По умолчанию браузеры используют значения вроде ease, ease-in, ease-out и linear. Но если вам нужно больше контроля над тем, как именно свойство изменяется во времени, пригодится функция cubic-bezier().

Эта функция позволяет задать собственную кривую ускорения с помощью четырёх чисел — координат двух управляющих точек Безье. Эти значения описывают, как «разгоняется» и «тормозит» анимация. cubic-bezier() поддерживается всеми современными браузерами с 29 января 2018 года (Baseline: Widely Available), так что её можно спокойно использовать в продакшене.

Читать дальше
  • 26 июня 2025
Остановка fetch-запросов с AbortController

Остановка fetch-запросов с AbortController

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2021-09-25

AbortController и его сигнал AbortSignal позволяют отменить активную операцию, например, fetch-запрос. Вы создаёте экземпляр AbortController, получаете связанный с ним сигнал и передаёте его в fetch. Когда нужно прервать запрос, вызываете метод abort() у контроллера. Это удобно, чтобы управлять временем отклика или избегать утечек памяти.

Пример:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Запрос отменён');
    } else {
      console.error('Ошибка', error);
    }
  });

// чтобы отменить запрос
controller.abort();

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025
Объединение сигналов отмены в AbortSignal.any()

Объединение сигналов отмены в AbortSignal.any()

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Newly Available» c 2024-03-19.

AbortSignal.any () — это статический метод, который объединяет несколько сигналов отмены <AbortSignal>. Он возвращает один новый сигнал, который срабатывает, когда любой из исходных сигналов активируется, причём причина отмены берётся из первого активировавшегося сигнала. Это удобно, когда нужно реагировать сразу на любой из нескольких условий отмены.

const controller1 = new AbortController();
const controller2 = new AbortController();

const combinedSignal = AbortSignal.any([controller1.signal, controller2.signal]);

combinedSignal.addEventListener('abort', () => {
  console.log('Отмена вызвана одним из сигналов');
});

// Пример вызова отмены любого из них
controller1.abort('Причина от первого');

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025
Использование position absolute для позиционирования элементов

Использование position absolute для позиционирования элементов

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Position: absolute убирает элемент из нормального потока документа и позволяет размещать его точно по координатам относительно ближайшего родителя с установленным position или, если такового нет — относительно окна браузера. Это удобно для создания всплывающих окон, меню и элементов, требующих точного позиционирования.

Пример:

<div style="position: relative; width: 300px; height: 200px; background: #eee;">
  <div style="position: absolute; top: 20px; left: 30px; background: #f00; width: 100px; height: 50px;">
    Вложенный блок
  </div>
</div>

Здесь внутренний <div> с position: absolute позиционируется относительно своего ближайшего родителя с position: relative.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025
Методы окон alert, confirm и prompt в JavaScript

Методы окон alert, confirm и prompt в JavaScript

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

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

Примеры:

// Просто уведомление
window.alert('Это сообщение для пользователя');

// Спрашиваем подтверждение
if (window.confirm('Вы хотите продолжить?')) {
  // Пользователь нажал ОК
} else {
  // Пользователь отменил
}

// Запрос ввода
const name = window.prompt('Введите ваше имя');

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025
Выравнивание контента с помощью align-content в CSS

Выравнивание контента с помощью align-content в CSS

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Newly Available» c 2024-04-16.

align-content — свойство CSS, которое управляет вертикальным расположением содержимого внутри контейнера с многострочным макетом, например, в flex или grid. Оно задаёт как распределить свободное пространство между строками или колонками, если их несколько. Это полезно, когда нужно точно настроить визуальную составляющую блока, чтобы он выглядел аккуратно и гармонично.

Пример использования:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* Распределяет строки по вертикали */
  height: 300px; /* Высота контейнера */
}

В этом случае, внутри .container строки будут расположены так, что между ними появится равное пространство, а верхняя и нижняя — по краю контейнера. Важно: свойство работает, когда внутри есть несколько строк (например, у flex или grid), иначе оно не даст видимого эффекта.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025
Горячие клавиши с помощью атрибута accesskey

Горячие клавиши с помощью атрибута accesskey

Атрибут accesskey позволяет назначить клавишу быстрого доступа к элементу на странице. Это может быть ссылка, кнопка или форма — всё, что может быть активировано с клавиатуры.

С 29 января 2018 года accesskey считается широко поддерживаемым (Baseline: «Widely Available»), то есть работает во всех современных браузерах.

Читать дальше
  • 25 июня 2025
CSS-свойство all

CSS-свойство all

Свойство all — это шорткат (сокращение), позволяющий одним выражением установить или сбросить значения почти всех CSS-свойств элемента.

Оно доступно в браузерах с 15 июля 2022 года (Baseline: «Widely Available»), так что его можно использовать без оглядки на поддержку.

Читать дальше
  • 25 июня 2025
Использование свойства CSS content для альтернативного текста

Использование свойства CSS content для альтернативного текста

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Newly Available» c 2024-07-09.

Свойство content в CSS управляет вставкой содержимого в элементы, особенно часто его используют для добавления иконок или текста перед/после элементов. Также через content можно задавать альтернативный текст для генерируемого контента, что полезно для доступности. Когда в content используется url с символом /, этот синтаксис позволяет добавить альтернативный текст к изображению или контенту, делая его более понятным для экранных читалок.

Например, чтобы сделать SVG-иконку доступной, можно использовать следующий подход:

.icon::after {
  content: url('upvote-icon.svg') / 'Upvote';
}

Здесь content с url вставляет SVG, а / 'Upvote' добавляет читаемый текст, который увидят пользователи с ограниченными возможностями. Такой приём повышает доступность элементов с графикой.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025