Рынок фронтенд-разработки каждый год пополняется новыми кадрами: выпускниками курсов, университетов или фронтендерами-самоучками. Но что делать джуну после трудоустройства и какие навыки развивать, чтобы стать мидлом?

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

Как мы выбирали навыки

Всё началось с того, что мы решили узнать, какими навыками должен обладать фронтендер на каждом этапе развития. Для этого мы провели масштабное исследование: изучили 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. Их могут проходить как выпускники курсов по фронтенд-разработке, так и уже работающие фронтендеры, которые хотят повысить грейд.

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

Что будет на курсе

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

Фрагмент курса.
Пример задания из курса «CSS-анимации»
Эталонное решение задания

В некоторых курсах есть дополнительные материалы: полезные статьи, ссылки на программы и npm-пакеты. Например, курс «Дизайн-системы для фронтендеров» содержит подробное руководство по работе с Figma.

Особенности курсов

Профессиональное комьюнити

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

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

Поддержка

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

Один из наиболее показательных случаев: изменение целого раздела о роутинге в курсе по React. При создании материалов мы опирались на актуальную на тот момент версию react-router v5, но вскоре после выхода курса состоялся релиз шестой версии. Поэтому мы начали обновлять статьи и демо для раздела.

Асинхронный формат

У курсов гибкий формат обучения, поэтому их удобно сочетать с работой, поездками или другими делами. Студент сам решает, когда приступить к занятиям и сколько времени на них выделять. Он может пройти курс сразу, потратив на это несколько дней, отложить «на потом» или практиковаться только по выходным. После завершения курса у студента остаётся доступ ко всем материалам.

Пакеты курсов

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

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

  • «Креативный» — набор курсов для решения задач, связанных с дизайном. Включает «CSS-анимации» и «Дизайн-системы для фронтендера» и «Дизайн для фронтендеров».
  • «Работа с данными» — комплект курсов для обработки данных и построения архитектуры данных. Содержит «TypeScript», «Протоколы и сети», «Алгоритмы и структуры данных».
  • «Разработчик интерфейсов» — набор курсов для тех, кто собирает интерфейсы на HTML и CSS, React и прочих SPA-инструментах. Включает «Шаблонизаторы», «CSS-анимации» и «Дизайн-системы для фронтендера», «Подготовка вёрстки для CMS» и «Вёрстка React-компонентов».
  • «Мастхэв для фронтендера» — расширенный пакет навыков для работы с данными и построения архитектуры. Содержит «Алгоритмы и структуры данных», «TypeScript», «Протоколы и сети» и «Регулярные выражения».
  • «Золотой» — включает самые популярные курсы: «Алгоритмы и структуры данных», «TypeScript», «CSS-анимации».

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

В продолжение темы