Профессия — сложный механизм, который состоит из множества частей. Это и отдельные курсы, и производственный этап с грейдированием и «Акселератором», и стажировка в «Лиге А.». И на каждом этапе постоянно нужны обновления, чтобы наши выпускники получали самые свежие и нужные знания и навыки и могли легче и быстрее находить работу.

В этом обзоре расскажем об основных обновлениях профессии «Фронтенд-разработчик», которая стартует уже 20 сентября.

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

Каждая часть профессии регулярно меняется — авторы улучшают и делают более понятными курсы по вёрстке и JavaScript, на производственном этапе и в «Лиге А.» меняются макеты и процессы, чтобы всё было ещё больше похоже на настоящую работу. Это приводит к росту оценок, счастья студентов и количеству трудоустроенных выпускников.

На полях: 77 выпускников HTML Academy этим летом нашли работу благодаря вакансиям в «Центре карьеры».

Из чего состояла профессия

Раньше профессия состояла из трёх курсов. Два по вёрстке — «Профессиональная вёрстка сайтов» и «Адаптивная вёрстка и автоматизация». Один по JavaScript — «Профессиональная разработка веб-интерфейсов».

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

Теперь курсов пять — и это первое большое изменение. Мы добавили два новых курса, которые помогут студенту подготовиться к работе в настоящей компании — это «Подготовка вёрстки для CMS» и «Вёрстка React-компонентов». Эти курсы нельзя пройти отдельно, они входят только в состав профессии «Фронтенд-разработчик».

Главное обновление — улучшенная «Профессиональная вёрстка сайтов»

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

Новые критерии качества

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

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

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

Техзадание в привычном виде перестало существовать, мы разделили его на несколько новых сущностей:

  • требования внутри самого макета и поясняющие комментарии к блокам.
  • чеклист тестирования проекта.

Идея была в том, чтобы не оформлять отдельными требованиями то, что и так ясно из макета. Если для каких-то компонентов требуется определённая реализация, это будет описано в комментарии к этому компоненту или в общих требованиях внутри макета.

Подробный рассказ о новых критериях читайте в нашем блоге на Хабре.

Что ещё изменилось

Обновлённый кодгайд. Кодгайд — наше руководство по тому, как правильно писать код. Там, кроме прочего, описаны правильная структура разметки, использование линтеров и, например, размеры отступов. И много чего ещё — посмотрите сами, ведь это открытый документ, которым можно пользоваться, даже если вы не учитесь в Академии.

Пример кодгайда.

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

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

Общий вид трёх проектов по вёрстке.

В каждом проекте по-прежнему осталось две страницы — главная и каталог.

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

  • Сетки теперь занимают три раздела вместо двух, чтобы равномерно распределить нагрузку и последовательно раскрыть эту тему.
  • Убрали разделы про оформление контента, доступность и оживление интерфейса. Доступность равномерно распределили по другим разделам, стилизовать страницы под наполнение из CMS студенты научатся на соответствующем курсе, а оживлять интерфейсы — на курсе по JavaScript.
  • Сформировали новые разделы. «Формы, попапы, слайдеры» для разбора стилизации этих компонентов (помните ведь про новые макеты, где всё это есть) и «Шлифовка» для финального тестирования проекта и проверки его на соответствие критериям.
  • Увеличили количество недельных перерывов до четырёх, чтобы после сложных разделов было больше времени на отработку и закрепление навыков. Раньше в неделю было по два раздела и по два лайва. Сейчас мы сделали программу проще для освоения и распределили нагрузку на основании обратной связи последних трёх потоков.

Вёрстка под CMS

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

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

  • Обзор популярных систем управления контентом, демонстрация админки и процесса работы с админкой со стороны конечного пользователя
  • Подготовка вёрстки под разделение на шаблоны. Выделение повторяющихся частей, организация стилей и скриптов
  • Работа с генерируемым контентом. Разметка основной контактной области, работа с генерируемыми изображениями и стилями
  • Подготовка вёрстки под расширение и изменение объёма контента и информационных блоков.

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

Это второй новый курс, доступный только студентам профессии. Его задача — научить студента верстать с использованием React и синтаксиса JSX и CSS-in-JS. На этом курсе мы учим работе с данными, серверному рендерингу и прочим вещам, специфичным для React-разработчика.

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

Что разбираем на курсе:

  • Принципы работы одностраничных приложений (SPA) и их основные отличия от статичных сайтов. Краткий обзор инструментов для создания SPA.
  • Экосистему React и структуру проекта для вёрстки в этой экосистеме.
  • Синтаксис JSX, работа с компонентами, использование моков для имитации работы с данными.
  • Организация стилей в React, CSS-in-JS.
  • Работа со state и props для демонстрации состояний страниц.

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

Этап производства

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

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

Вкратце расскажем, из чего состоит производственный этап, чтобы вы могли сложить полное впечатление о профессии «Фронтенд-разработчик».

Грейдирование

Это небольшой проект для самостоятельной работы, который покажет, чему вы научились на курсах. Это проверка того, как хорошо вы усвоили материал. Не надо бояться: мы просто подскажем, что ещё можно подтянуть, и на чём сделать упор дальше. Как раз эти слабые места можно прокачать в «Акселераторе».

Акселератор

В Акселераторе вы в течение трёх месяцев тренируетесь на нескольких проектах, чтобы увеличить скорость и качество своей работы.

Для участника Акселератора формируется команда, симулирующая работу в настоящей компании. Команда состоит из менеджера проекта, наставника и тестировщика. Каждый проект проверяется по двум показателям: качество (по критериям) и скорость.

При достижении минимальных показателей (~60%) на последнем проекте, студент получает сертификат, статус выпускника и возможность стажироваться в «Лиге А.».

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

Стажировка в «Лиге А.»

Выпускников профессии ждёт оплачиваемая трёхмесячная стажировка в «Лиге А.», где вы будете работать над реальными коммерческими проектами. То есть всамделишные компании приходят и заказывают сайты, а выпускники Академии их делают. Тут уже всё взаправду: реальные заказчики, деньги, сроки и команда.

Обновления — путь вперёд

Студенты традиционно ставят оценки каждому потоку каждого курса, и уже сейчас оценки курсов, которые входят в профессию, находятся на уровне 9.4 и 9.5 из 10.

Оценки трёх курсов, входящих в состав профессии «Фронтенд-разработчик».

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

Профессия — путь к работе мечты

Пройдите его вместе с нами в HTML Academy.

Записаться