Курсы для мидлов HTML Academy: что это и для кого
- 28 марта 2022
- 4 446
Рынок фронтенд-разработки каждый год пополняется новыми кадрами: выпускниками курсов, университетов или фронтендерами-самоучками. Но что делать джуну после трудоустройства и какие навыки развивать, чтобы стать мидлом?
Чтобы помочь начинающим разработчикам, мы начали готовить курсы по навыкам, необходимым для повышения грейда. В этой статье мы расскажем, как выбирали темы, из чего состоят курсы и в чём их особенность.
Как мы выбирали навыки
Всё началось с того, что мы решили узнать, какими навыками должен обладать фронтендер на каждом этапе развития. Для этого мы провели масштабное исследование: изучили 2391 вакансию на Хабр Карьере, HH и Geekjob, опросили тимлидов. По его результатам мы составили карту компетенций — схему, которая показывает, каких знаний работодатели ожидают от джунов, мидлов и сеньоров.

Карта компетенций помогла понять, какие навыки востребованы в продуктовых компаниях. Мы выбрали самые популярные и приступили к разработке курсов по этим темам.
По некоторым навыкам мы решили не создавать обучающие материалы, в их числе построение сеток, разметка по БЭМ, основы работы со шрифтами и препроцессорами. Это базовые знания, которые HTML Academy даёт на профессии «Фронтенд-разработчик». Если вы не проходили профессию, но хотите прокачать навыки, посмотрите мини-курсы.
Какие навыки можно получить
Мы подготовили 18 курсов по работе с данными, выстраиванию архитектуры и разработке интерфейсов. Наиболее популярные из них:
TypeScript. Теория типов
Согласно нашему исследованию, TypeScript — одна из самых востребованных технологий, его указывают в 59–63% вакансий. А по данным npmtrends.com, он в 1,5 раза популярнее React, Vue и Angular вместе взятых.
Курс по TypeScript помогает изучить фундамент языка — систему статического анализа типов данных. Здесь подробно объясняется теория типов. Показывается, как на практике использовать аннотацию типов и обобщённое программирование, управлять условными типами.
Программа курса
- Введение: понятие, достоинства и ограничения TypeScript, настройка окружения для работы.
- Типизация в TypeScript, структура типа и эквивалентность функций.
- Система типов и операции над типами, интерфейсы и классы.
- ООП в TypeScript.
- Манипулирование типами.
- Итоги. Использование TypeScript в повседневной работе.
Регулярные выражения для фронтендеров
Знать регулярные выражения — полезно. Они помогают быстрее искать и анализировать информацию, сократить время кодинга и ускорить работу приложений.
На курсе мы учим правильно писать регулярные выражения и уместно их использовать. Показываем, как применять их на примере реальных задач: валидации данных, поиска и замены символов, получения части строки и формирования новых структур данных из строк.
Программа курса
- Принципы и основы регулярных выражений. Механизм движения паттернов и возвраты. Методы JavaScript для работы с регулярными выражениями.
- Селекторы: поиск одиночных символов, отрицание, экранирование.
- Символьные селекторы.
- Группировка, условия, сохранение состояния и обратные ссылки.
- Квантификаторы, ограничение длины, жадность.
- Опережающие и ретроспективные проверки. Модификаторы.
- Дополнительные материалы: точность регулярных выражений, скорость выполнения, каскады правил.
Алгоритмы и структуры данных
Алгоритмы нечасто указывают в вакансиях, но о них любят спрашивать на технических собеседованиях. Умение применять их в работе — базовый навык фронтенд-разработчика.
Наш курс даёт глубокие знания об алгоритмах и структурах данных. Он учит оценивать сложность алгоритмов, оптимизировать код и правильно выстраивать архитектуру проекта и отдельных модулей.
Программа курса
- Общие знания: оценка эффективности алгоритмов.
- Структуры данных.
- Популярные алгоритмы поиска.
- Парадигма решения задач «Разделяй и властвуй», рекурсия.
- Популярные алгоритмы сортировки.
- Деревья и графы.
- Хэш-таблицы.
- Стек и очередь.
- Жадность алгоритмов.
- Динамическое программирование.
CSS-анимации
Разработчикам интерфейсов стоит присмотреться к анимациям. Для повышения грейда им полезно освоить создание 3D-эффектов, параллакса и сложных анимаций при пользовательском взаимодействии.
Курс расскажет, как создавать такие CSS-анимации. А ещё он объяснит, как оптимизировать и отключать анимации на сайте.
Программа курса
- Основы анимации. CSS-свойство
transition
, простые анимации в CSS. - CSS-анимации по ховеру, CSS-свойство
transition-timing-function
. - CSS-правило
@keyframes
и группа свойствanimation
CSS. - Анимации с пользовательским взаимодействием.
- 3D в CSS и параллакс-эффект.
- Производительность анимаций.
Вёрстка React-компонентов
React — популярный инструмент для разработки веб-приложений. Как показало наше исследование, он встречается в 60% вакансий.
Курс «Вёрстка React-компонентов» поможет познакомиться с библиотекой и разобраться с её возможностями. Он даёт базовые знания о работе с React — их будет достаточно для создания собственных приложений.
Программа курса
- Знакомство с React.
- React-окружение.
- Вёрстка простых React-компонентов, JSX.
- Написание стилей для компонентов.
- Интерактивность в React.
- Роутинг.
- Сборка.
- Storybook.
Все курсы подходят разработчикам, которые знакомы с основами HTML, CSS и JavaScript. Их могут проходить как выпускники курсов по фронтенд-разработке, так и уже работающие фронтендеры, которые хотят повысить грейд.
Подробнее о том, как мы делаем курсы для прокачки навыков фронтендера, читайте в этой статье.
Что будет на курсе
Программа курсов разбита на несколько разделов: один раздел — одна тема. В каждом разделе — статьи с теорией, пошаговые демонстрации с кодом, самостоятельные задания и тест на проверку знаний. При этом упор сделан на практику, поэтому демонстрационные примеры и задания составлены с учётом реальных задач фронтенд-разработчиков в продуктовых компаниях.


В некоторых курсах есть дополнительные материалы: полезные статьи, ссылки на программы и npm-пакеты. Например, курс «Дизайн-системы для фронтендеров» содержит подробное руководство по работе с Figma.
Особенности курсов
Профессиональное комьюнити
Перед подготовкой первых курсов мы провели опрос — какой формат обучения больше подходит разработчикам: с личным наставником или возможностью обращаться к комьюнити. Оказалось, что для джунов гораздо важнее второй вариант, поэтому на новых курсах нет персонального наставника. Студент сам выполняет задания и проверяет себя по эталонному решению.
Взамен вокруг каждого курса мы создаём профессиональное комьюнити. В него входят авторы курса, кураторы, студенты и выпускники. Здесь студент общается с коллегами, получает ответы на вопросы или помощь с заданиями.
Поддержка
Технологии и инструменты постоянно меняются, так же и с нашими материалами. Мы продолжаем поддерживать курсы после релиза, чтобы информация в них оставалась актуальной — нет смысла учиться на устаревших примерах.
Один из наиболее показательных случаев: изменение целого раздела о роутинге в курсе по React. При создании материалов мы опирались на актуальную на тот момент версию react-router v5
, но вскоре после выхода курса состоялся релиз шестой версии. Поэтому мы начали обновлять статьи и демо для раздела.
Асинхронный формат
У курсов гибкий формат обучения, поэтому их удобно сочетать с работой, поездками или другими делами. Студент сам решает, когда приступить к занятиям и сколько времени на них выделять. Он может пройти курс сразу, потратив на это несколько дней, отложить «на потом» или практиковаться только по выходным. После завершения курса у студента остаётся доступ ко всем материалам.
Пакеты курсов
Ещё одна проблема, с которой сталкиваются джуны — у начинающих разработчиков нет понимания, в какой последовательности изучать технологии и инструменты. Даже если опираться на нашу карту компетенций, будет непросто понять, какие из 50 навыков осваивать в первую очередь, а с какими можно повременить.
Чтобы помочь студентам, мы сгруппировали навыки, а затем собрали подходящие курсы в пакеты. Каждый комплект создан с учётом того, в каком направлении хочет развиваться разработчик:
- «Креативный» — набор курсов для решения задач, связанных с дизайном. Включает «CSS-анимации» и «Дизайн-системы для фронтендера» и «Дизайн для фронтендеров».
- «Работа с данными» — комплект курсов для обработки данных и построения архитектуры данных. Содержит «TypeScript», «Протоколы и сети», «Алгоритмы и структуры данных».
- «Разработчик интерфейсов» — набор курсов для тех, кто собирает интерфейсы на HTML и CSS, React и прочих SPA-инструментах. Включает «Шаблонизаторы», «CSS-анимации» и «Дизайн-системы для фронтендера», «Подготовка вёрстки для CMS» и «Вёрстка React-компонентов».
- «Мастхэв для фронтендера» — расширенный пакет навыков для работы с данными и построения архитектуры. Содержит «Алгоритмы и структуры данных», «TypeScript», «Протоколы и сети» и «Регулярные выражения».
- «Золотой» — включает самые популярные курсы: «Алгоритмы и структуры данных», «TypeScript», «CSS-анимации».
Покупка пакетов выгоднее, чем приобретение курсов по отдельности: чем больше курсов в пакете, тем больше экономия.