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

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

Схема сайта
Это могло бы быть макетом в реальном мире, но не в «Акселераторе».

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

Однажды мы придумали «Лигу А.», где построили разработку в соответствии с процессами из реального мира. Но в Лигу может попасть не каждый, и мы часто слышали вопросы от выпускников о том, что такого опыта не хватает. Так появился «Акселератор» — совместный продукт HTML Academy и «Лиги А.». В нём можно оценить свои силы и знания и поработать в команде над реальным проектом. Не обязательно даже быть выпускником Академии — достаточно разобраться в HTML, CSS и JavaScript на базовом уровне.

Кто все эти люди?

Реальный проект — реальная команда, четыре человека, включая участника «Акселератора». Настоящие менеджер, наставник и тестировщик, которые будут постоянно давать поток информации и обратной связи, и с этим нужно будет как-то справиться.

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

Менеджер Соня
Менеджер Соня проверяет, что со сроками всё в порядке.

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

Тестировщик внимательно тестирует всё, что сделано, и готовит список исправлений. Прямо как на работе.

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

Как всё устроено?

В «Акселераторе» используют такой набор технологий:

  • HTML5/CSS3,
  • JavaScript,
  • Git,
  • LESS и SCSS,
  • Сборка на Gulp,
  • Адаптивная верстка по принципу Desktop First.

Как и в реальном мире, можно уметь не всё из списка. Первый проект можно сделать только с базовым HTML и CSS и умением верстать хотя бы десктопную версию сайта.

Для всех проектов (кроме «Лига Банк», который заточен под прокачку навыков JavaScript) мы можем подготовить разные по сложности ТЗ, от самых простых (вёрстка только десктопной версии, без использования препроцессоров и JavaScript), до сложного уровня с адаптивной вёрсткой, JavaScript и препроцессорами.

Текст письма

Сразу после оплаты нужно выбрать один из проектов, режим работы и разобраться со сроками.

Что за режимы?

Есть так называемый режим «Ракета» — в нём сроки устанавливаются исходя из того, с какой скоростью работают младшие разработчики в Лиге. Работа в таком режиме требует 5-6 часов в день, как в реальной работе. Выпускники трёх или более интенсивов, которые хотят попасть в «Лигу А.», должны сделать два проекта в режиме «Ракета» за время прохождения «Акселератора».

Но не у всех есть достаточно времени — семья, работа, фитнесы и прочие хобби съедают день и вечер, а в конце не остаётся сил ни на что (и уж тем более на разговоры с менеджером и допиливание проекта). Для этого есть комфортный режим — можно никого не слушать и оценить сроки самому (в часах и рабочих днях). Такой способ пригодится, если вы хотите потренироваться в боевом режиме, с командой. При этом мы продолжим работу, даже если дедлайны нарушены, но работа регулярно идёт.

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

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

Пример расчёта

Исполнитель выполнил проект за 40 часов и 10 дней.

Эталонная вёрстка проекта — 30 часов и 6 дней работы.

  • Коэффициент скорости по дням: 10 дней / 6 дней = 1,66.
  • Коэффициент скорости по часам: 40 часов / 30 часов = 1,33.

После проверки наставник написал 25 замечаний, из которых 20 исполнитель закрыл с первого раза, четыре со второго, и одно только с третьего.

  • Коэффициент внимательности: (20*1 + 4*2 + 1*3) / 25 = 1,24.
  • Коэффициент внимательности по тестированию рассчитывается по такому же принципу.

На что ориентироваться?

Коэффициенты от 1,0 до 1,5 считаются хорошим результатом, от 1,5 до 2,0 — средним. Всё, что выше 2,0 — далеко от рыночной скорости вёрстки, и в этом случае мы порекомендуем ещё попрактиковаться.

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

Какие есть проекты?

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

Проект «Фитнес центр»
Не пытайтесь покинуть Омск, ведь там есть фитнес центр.

У нас есть три простых проекта: («Smart Device», «Фитнес» и «Израиль») и пять сложных проектов: «Livetour», «Bike Shop», «Jewellery», «Escape Room», «Expert-logistic». А также новый, самый сложный проект «Лига-Банк», который ориентирован на выпускников интенсивных курсов по JavaScript.

Техническое задание и план работы

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

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

Чат в Slack
Общение между членами команды происходит в рабочем чате в Slack.

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

Карточка проекта

Это основной документ, в котором ведётся работа над проектом. Карточка включает в себя пять основных вкладок:

  1. Общая информация по проекту — сроки, макеты, участники, репозиторий;
  2. План — количество затраченных часов на каждый элемент;
  3. Баг-лист — правки, которые необходимо внести перед сдачей проекта;
  4. Ревью наставника — замечания от проверяющего наставника;
  5. Словарь с краткими правилами работы с карточкой проекта.

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

План работы в карточке проекта
План работы в карточке проекта.

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

Замечания наставника
Замечания наставника в карточке проекта.

После этого в работу вступает тестировщик.

Замечания тестировщика
Замечания тестировщика в карточке проекта.

Как проходит тестирование проекта

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

Проверка соответствия макету

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

Слава
Слава нашёл несоответствия в макете и злится.

Например, на макете отрисована кнопка «Получить консультацию», при этом в техническом задании она не упоминается. Кнопка должна куда-то вести, и нужно уточнить, куда именно. Обычно исполнители стараются чётко следовать тому, что прописано в ТЗ, и не обращают внимания на такие моменты, поэтому нужно на это указать.

Проверка в разных условиях

Мы проверяем проекты на всех устройствах, операционных системах и браузерах. Добиваемся того, чтобы сайт везде отображался одинаково, вне зависимости от окружения (например, Safari в iOS живёт своей жизнью с закруглением полей у форм по умолчанию). Проверяем «резиновость» вёрстки — на промежуточных разрешениях сетка не должна ломаться, а пропорции отрисованной версии не должны меняться.

Проверка интерактивных элементов

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

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

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

Сдача проекта

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

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

«Центр Карьеры» и «Акселератор»

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

«Центр Карьеры»

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

Раздел «Акселератора» в резюме «Центра карьеры»
Раздел «Акселератора» в резюме «Центра карьеры».

Как записаться в «Акселератор»?

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