Frontend Stage Community

Стажировка в команду Верстки

Начало: 24 сентября 2018
Самооценка: 14 декабря 2018
Завершение: 21 декабря 2018
Итоги: 26 декабря 2018

Стажировка не предполагает регулярного обучения с наставником, по сути это конкурс на позицию в команде Верстки. У каждого участника свой проект в виде psd-макета, который необходимо сверстать. Тем не менее, участники могут делиться друг с другом опытом, задавать организационные и профессиональные вопросы в телеграм-канале (высылается по почте).

Полноценное ревью проектов будет проводиться раз в месяц опытными верстальщиками из команды Верстки.

Материалы

Навыки

которые нужно продемонстрировать при выполнении проекта:

Навык	Описание
Верстка	Типографика: шрифты, текст, размерности Семантичное использование тегов Валидность html-кода Использование принципа Mobile-First Адаптивность/Мобильность верстки Точность соответствия макету (Pixel Perfect), либо понимание дизайн-системы и её использование
CSS	LESS-препроцессор или аналог (SASS, SCSS, другой): синтаксис, вложенные селекторы, миксины Понимание свойств: - position: relative, absolute, fixed, static, sticky - float - box-sizing Понимание Box model, Flex model
JavaScript	Переменные, условия, циклы, базовая работа с DOM JQuery: синтаксис, селекторы, события Понимание Event Delegation / Event Bubbling, this
Tools	GIT: commit / pull / push / checkout Основы js-модулей: NPM / YARN Основы сборки: Gulp / Grunt / Webpack Использование линтеров в редакторе
BEM	Основы BEM и BEM-именования

Требования

проект должен быть выложен и оформлен на https://github.com/ в аккаунте претендента в публичном доступе
кроссбраузерность: Firefox@latest && Chrome@latest && Opera@latest && IE >= 11
понятная структура файлов (tree / flat)
компонентный подход: каждый дизайн-элемент (блок) должен быть максимально независимым и адаптивным
используется BEM-подход к именованию дизайн-элементов
css и js отформатирован в едином Code Style (regru/google/airbnb и др.)
нельзя использовать css-фреймворки в качестве основы для верстки типа bootstrap, material design ui и т.д.
иконки, мелкие картинки - svg / png и спрайты
шрифты / иконки - google fonts, material icons при необходимости
можно использовать js-плагины для интерактивных элементов (слайдеры, попапы)
автоматизирован процесс сборки итоговых файлов
итоговая верстка в виде html-страниц должна быть доступна по URL

Если psd-макет не является сайтом, а просто набором отдельных блоков, то нужно собрать полноценные страницы с использованием этих блоков в разных комбинациях.

Дополнительно

Не обязательно, но будет несомненным плюсом

оптимизация графики под retina
Анимация и интерактивность элементов, форм, графиков, переходы - ваше творчество без ограничений
JS-валидация форм
SEO-оптимизация
микроформаты / микроданные

Оценка

Что и как будет оцениваться при сдаче проекта.

Демо проекта, кандидат демонстрирует работу и рассказывает о проделанной работе (5 минут).
Ревью:

соблюдение code style и именование файлов/классов/переменных
использование собственных, сторонних, нестандартных решений
расширяемость и поддерживаемость кода
визуальное соответствие макетам
соответствие исходным требованиям

Самооценка кандидата в конце стажировки по навыкам
Обратная связь от наставника и собеседование с HR в случае прохождения стажировки

revolverz / frontend-stage