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

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

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

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

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

По некоторым навыкам мы решили не создавать обучающие материалы, в их числе построение сеток, разметка по БЭМ, основы работы со шрифтами и препроцессорами. Это базовые знания, которые HTML Academy даёт на профессии «Фронтенд-разработчик». Если вы не проходили профессию, но хотите прокачать навыки, посмотрите мини-курсы.

Какие навыки можно получить

Мы подготовили 18 курсов по работе с данными, выстраиванию архитектуры и разработке интерфейсов. Наиболее популярные из них:

TypeScript. Теория типов

Согласно нашему исследованию, TypeScript — одна из самых востребованных технологий, его указывают в 59–63% вакансий. А по данным npmtrends.com, он в 1,5 раза популярнее React, Vue и Angular вместе взятых.

Курс по TypeScript помогает изучить фундамент языка — систему статического анализа типов данных. Здесь подробно объясняется теория типов. Показывается, как на практике использовать аннотацию типов и обобщённое программирование, управлять условными типами.

Регулярные выражения для фронтендеров

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

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

Алгоритмы и структуры данных

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

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

CSS-анимации

Разработчикам интерфейсов стоит присмотреться к анимациям. Для повышения грейда им полезно освоить создание 3D-эффектов, параллакса и сложных анимаций при пользовательском взаимодействии.

Курс расскажет, как создавать такие CSS-анимации. А ещё он объяснит, как оптимизировать и отключать анимации на сайте.

Вёрстка React-компонентов

React — популярный инструмент для разработки веб-приложений. Как показало наше исследование, он встречается в 60% вакансий.

Курс «Вёрстка React-компонентов» поможет познакомиться с библиотекой и разобраться с её возможностями. Он даёт базовые знания о работе с React — их будет достаточно для создания собственных приложений.

🔥 Хотите прокачать навыки? Посмотрите все курсы для мидлов

Все курсы подходят разработчикам, которые знакомы с основами HTML, CSS и JavaScript. Их могут проходить как выпускники курсов по фронтенд-разработке, так и уже работающие фронтендеры, которые хотят повысить грейд.

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

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

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

Пример задания из курса «CSS-анимации»
Пример задания из курса «CSS-анимации»

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

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

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

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

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

Поддержка

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

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

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

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

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

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

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

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

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

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


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

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

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