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

Репозиторий

Коротко

• Английский язык
• HTML и CSS
• Графические редакторы
• Инструменты разработчика в браузере
• Emmet
• Семантика и доступность
• Правильное именование
• Responsive/adaptive верстка
• jQuery
• Подключение шрифтов
• Сборка спрайтов
• Оптимизация изображений
• Работа с SVG
• SVG-спрайты
• CSS-анимации и плавные переходы
• CSS-методологии
• CSS-фреймворки
• Верстка писем
• Командная строка
• Git
• CSS-препроцессоры
• Шаблонизаторы
• Автоматизация: таск-раннеры
• Тестирование верстки

Подробно

Английский язык

Очень важно уметь читать и понимать по-английски, чтобы иметь доступ к актуальной информации. Лишь небольшой процент статей переводится на русский язык, а документация к плагинам и инструментам в основном представлена на английском.
Это не блокирующий навык, можно вполне успешно учиться и работать без него, но он является огромным плюсом.

• engVid
• Native English
• Lingualeo
• duolingo

HTML и CSS

• Уроки по HTML и CSS (бывший htmlbook)
• Самоучитель HTML4
• Самоучитель CSS
• Основы CSS/CSS3
• HTML Academy
• Codecademy
• Learn to Code HTML & CSS
• HTML Dog: HTML Tutorials
• HTML Dog: CSS Tutorials
• Intro to HTML/CSS: Making webpages
• Dash
• w3schools

Графические редакторы

Самые популярные: Photoshop и Sketch.
В ~90% случаев Photoshop’а будет достаточно, дизайнеры только недавно начали переходить на Sketch. Sketch вообще под Windows не работает, но есть почти-решение в лице zeplin

Необходимый минимум, чтобы начать работать:

• нарезка и экспорт графических элементов;
• работа со стилями слоя;
• информация о тексте (размер, шрифт, цвет, межстрочный интервал и тд.).

• Photoshop для кодера
• Photoshop для HTML‑верстальщика
• Photoshop экшены для верстальщика
• Photoshop - пример нарезки макета для верстки
• Нарезка в Photoshop — New Layer Based Slice
• Экспорт слоев из Photoshop в один клик!
• The Ultimate Front-End Developer’s Guide to Photoshop
• A Web Developer’s Guide to Photoshop
• Photoshop Extensions for Front-end Developers
• Sketch vs. Photoshop: why & how I moved to Sketch 3 and am not going back

Инструменты разработчика в браузере

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

• Chrome DevTools
• Курс от codeschool
• Chrome DevTools, в помощь верстальщику
• Инструменты разработчика Firefox
• DevTools Tips
• 15 Must-Know Chrome DevTools Tips and Tricks

Emmet

Набор сниппетов для HTML и CSS, дающий супер-скорость.
Лучше 1 раз почитать документацию и сразу начать использовать.

Семантика и доступность

• Семантическая вёрстка. Часть первая
• Искусство семантики HTML, часть 1
• Семантический HTML — рекомендация с большими выгодами
• Продвинутая семантика и доступность
• Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA
• Let’s Talk about Semantics
• HTML5 Semantics
• Extending Semantics & Accessibility
• Accessibility in HTML5
• WebAIM
• A Look Into Proper HTML5 Semantics

Правильное именование

Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым.
У новичков часто можно встретить <b class="b">, <div class="div13>" и все в таком духе. Это неправильно. Также нельзя использовать транслитерацию <div class="shapka">.
Общепринятый язык для именования — английский.

• Слова, часто используемые в CSS-классах
• How to name CSS classes
• Naming CSS Stuff Is Really Hard
• Thoughts on semantic HTML class names and maintainability
• What Makes For a Semantic Class Name?
• On class names, semantics and accessibility

Responsive/adaptive верстка

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

• Адаптивно-отзывчивый: разбираемся в терминологии
• Наглядно для заказчика: адаптивный и отзывчивый сайт — в чем разница
• Beginner’s Guide to Responsive Web Design

jQuery

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

• Учебник “jQuery для начинающих”

Подключение шрифтов

• Загрузка своего шрифта
• Как подключить шрифт
• Подключение шрифта к странице: как нужно делать сейчас

Сборка спрайтов

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

• Введение в CSS спрайты для чайников
• Верстка с использованием CSS спрайтов
• CSS Sprites: Image Slicing’s Kiss of Death
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Оптимизация изображений

Во времена быстрого интернета легко забыть о том, что нужно оптимизировать изображения. Недавно я проверял работу начинающего разработчика и прогнал изображения через оптимизатор. Картинки похудели на 86% (16 мегабайт). Вдумайтесь.
Также важно уметь выбрать оптимальный формат графики (jpg, png, gif, svg).

• Всё, что нужно знать об оптимизации изображений для сайта
• Оптимизация изображений

Работа с SVG

• Использование SVG
• SVG
• SVG в HTML — из иллюстратора в браузер

SVG-спрайты

• SVG-спрайты
• Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев
• SVG спрайты — 4 способа использования векторных спрайтов

CSS-анимации и плавные переходы

• Плавные переходы (transition)
• Css Animation
• Очень простое руководство по CSS3-анимациям

CSS-методологии

Сотни их: OOCSS, BEM, SMACSS и тд. Не обязательно все использовать, но вы должны иметь представление о лучших практиках css-архитектуры.

• БЭМ
• SMACSS
• An Introduction To Object Oriented CSS (OOCSS)
• Методологии верстки: БЭМ, AMCSS, OOCSS, Atomic CSS, OPOR, MCSS, SMACSS, FUN, DoCSSa
• CSS Naming Conventions: Fewer Rules, more Fun
• BEM 101

CSS-фреймворки

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

• Bootstrap
• Foundation
• Pure
• Skeleton

Верстка писем

Ад мира HTML-верстки. Привет из нулевых. Тут свои правила и до сих пор верстка таблицами. Звучит плохо, на деле еще хуже.

• Верстка email рассылок от А до Я для чайников
• How-to: Правила вёрстки email-писем
• Основы профессиональной верстки электронных писем

Командная строка

Необходимый инструмент для доступа к радостям жизни: препроцессорам, компиляции шаблонов, запуску таск-раннеров, git и другим полезным вещам.

• Командная строка (cmd) для веб-мастера

Git

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

• Git - для новичков - #1 - основы
• Github Tutorial
• Atlassian Git Tutorials
• Git How To
• Моя шпаргалка по работе с Git
• Шпаргалка по консольным командам Git
• Pro Git, второе издание
• Коллекция часто задаваемых вопросов по Git с возможностью поиска

CSS-препроцессоры

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

• Sass
• Stylus
• Less
• PostCSS + PreCSS (одна из связок)
• Как работать с CSS-препроцессорами и БЭМ

Шаблонизаторы

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

• Pug (бывший Jade)
• HAML
• Twig
• Blade

Автоматизация: таск-раннеры

Вся рутина должна быть автоматизирована. Примеры автоматизации — запуск препроцессоров и шаблонизаторов, оптимизация графики, сборка спрайтов, сжатие css и js.

• Gulp
• Скринкаст по Gulp
• Gulp for Beginners
• Getting started with gulp
• Продолжаем бороться с frontend-рутиной
• Grunt
• A Simple Guide to Getting Started With Grunt

Тестирование верстки

Плох тот разработчик, который не тестирует свою работу.

• Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать
• Тестирование верстки
• Автоматизированное тестирование верстки веб-сайтов

Заключение

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

Часто случается так, что новички, пройдя курс по HTML-верстке, прочитав много теории или посмотрев видео-уроки, остаются предоставлены сами себе и не знают что делать, чтобы поднимать свой уровень.
Эта проблема присуща не только новичкам, но и тем кто занимается версткой уже какой-то период и имеет работу.

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

Решайте практические задания

• На htmlbook есть хорошая подборка, разбитая по разным уровням
• Отличное тестовое задание от Яндекса
• 5 задач от меня
• Задания на htmlacademy
• И сотни задач по всему интернету

Верстайте макеты

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

• https://symu.co/freebies/templates-4/
• https://dcrazed.com/free-photoshop-psd-website-templates/
• http://blazrobar.com/tag/full-website-design/
• http://www.noupe.com/essentials/freebies-tools-templates/recapitulation-of-2015-best-free-psd-website-templates.html
• http://freebiesbug.com/psd-freebies/website-template/
• http://www.fusionplate.com/2173/35-amazing-free-psd-website-templates-2/

Задавайте вопросы и общайтесь

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

• https://htmlforum.io/
• http://demiart.ru/forum/index.php?showforum=66
• cssunderhood
• Чат “Веб-стандарты” в Slack
• Фронтенд-канал сообщества dev.ua

Продолжайте учиться

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

Подборки

• Блог компании Zfort Group
• Веб-стандарты
• For Web — веб-разработка, фронтенд

Рассылки

• CSS Weekly
• HTML Academy
• FrontEnd Focus
• CSS Layout News
• Sass News

Блоги

• css-live
• Веб-стандарты
• css-tricks
• A List Apart
• Smashing Magazine

Уроки

• Tutsplus
• Codrops

Книги

• Инлайновый контекст форматирования
• CSS Secrets
• CSS Pocket Reference
• CSS: The Definitive Guide
• HTML and CSS: Design and Build Websites

Копируйте, не подглядывая в код

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

Верстайте один блок разными способами

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

Изучайте исходный код фреймворков и библиотек

Bootstrap, Foundation и другие — настоящий клад для начинающего. В них реализованы популярные компоненты и решены сотни кроссбраузерных проблем. Изучайте исходный код этих проектов и адаптируйте решения для своей работы.

Исправляйте ошибки на сайтах, которыми пользуетесь

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

Найдите единомышленника одного с вами уровня

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

Найдите наставника

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

Ведите блог

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

Плюсы ведения блога:

• максимально пропускаете материал через себя и начинаете хорошо разбираться в теме;
• улучшается навык донесения своих мыслей и структурирования материала;
• вас начинают узнавать в “тусовке”;
• повышается “вес” в глазах клиентов.

Работайте над своим проектом

Найдите проблему, которая касается лично вас и попробуйте решить ее. Это может быть что угодно. Например, скрипт, который автоматизирует рутинные операции и экономит вам 10 минут в день или набор сниппетов для быстрой верстки.
Работа над своим проектом выведет вас на новый уровень, потому что вы будете и разработчиком и “клиентом” в одном лице. Вы научитесь отсекать лишний функционал и концентрироваться только на важном. После того как первая версия будет готова и будет решать задачу, расскажите людям о ней. Это будут ваши первые пользователи, чей фидбек очень важен. А еще, это очень хорошая возможность экпериментировать с технологиями.

Заключение

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

Много работайте, жадно учитесь и учите других.

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

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

Обсуждение проекта

Идеально — когда заказчик приходит с техническим заданием, но это редкость и для таких случаев у меня есть список вопросов, без которого нельзя начинать работу:

• установлены ли у проекта сроки;
• список браузеров, которые необходимо поддерживать. Если такого списка нет, я прошу статистику посещений сайта и на основе этих данных предлагаю варианты. В остальных случаях, я верстаю под 2 последние версии популярных браузеров (Chrome, Safari, Internet Explorer, Edge, Firefox, Opera);
• фиксированная, резиновая или полурезиновая верстка;
• нужна ли респонсив/адаптивная версия дизайна. Также уточняю какие устройства и браузеры нужно поддерживать;
• нужно ли добавлять интерактив (JavaScript). Eсли ответ положительный, прошу описать необходимый функционал и показать примеры, по возможности;
• дополнительные пожелания.

Оценка времени разработки

Основная версия

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

• реализация компонента (html, css, js)
• проверка работы
• исправление ошибок

Респонсив/адаптивная версия

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

• при наличии дизайна закладывается 50% времени от основной верстки
• при отсутствии дизайна от 75% до 100% времени.

Планирование

Для планирования работы был выбран trello из-за простоты и наглядности.
Под каждый проект создается 2 доски: для общего и недельного планирования.
Планирование должно быть гибким. Например, если все недельные задачи были выполнены и осталось время, нужно перенести некоторые задачи из следующей недели и обновить общую доску.

Общее

Для общего планирования создается “борд” с минимум 3 колонками:

• Задачи
• Неделя — в заголовке “недельных” колонок указываются даты
• Готово

Это помогает видеть картину целиком и своевременно решать проблемы.

В первую очередь, расписываются все задачи. Процесс такой же, как и при оценке времени разработки — берется макет и компонент за компонентом вносится в колонку “Задачи”.

Хорошая карточка с задачей должна содержать:

• Картинку-превью
• Название
• Описание
  • путь к файлам компонента: стили, шаблоны
  • макет в котором есть этот компонент
• Список задач
• Цветовой лэйбл с типом задачи (верстка, js, респонсив и тд.)

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

Как только задача готова, переносим ее в колонку “Готово”.

Недельное

Следующий этап — недельное планирование.
В борде 5 колонок:

• Задачи (Tasks) — все задачи текущей недели
• Сегодня (Today) — задачи, запланированные на сегодняшний день
• В процессе (Doing)
• Проверка (Review)
• Готово (Done)

В колонку “Задачи” копируются карточки из соответствующей недели общего борда. Планируется не вся неделя целиком, а только текущий день, так получается гибче. Если задача не была выполнена на протяжении дня, она остается на следующий.

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

По завершении задача переносится в колонку “Проверка”, где ее просмотрит ответственный по проекту.
Если задача нуждается в доработке, помечаем ее красным лэйблом “Доработать”, добавляем чек-лист с доработками и переносим обратно в “Сегодня” на первую позицию.
Если задачу не надо дорабатывать, переносим ее в колонку “Готово”.

Работа над проектом

Все просто — садимся и вкалываем.

Git

Для синхронизации работы между участниками используется git и упрощенный подход из этой статьи.

Мы используем следующие ветки:

• master — стабильная версия, которую можно показать заказчику
• dev — основная ветка для разработки
• feature/{name} — каждый компонент разрабатывается в отдельной ветке
• hotfix/{name} — для исправлений

После инициализации репозитория создается dev, куда загружаются все необходимые для старта файлы.
На каждый новый функционал должна быть создана отдельная ветка feature/{name}.

Когда работа над функционалом закончена:

• делается слияние dev с текущей веткой
• разрешаются конфликты
• создается Pull/Merge Request в ветку dev.

То же самое и с hotfix/{name} ветками.

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

Автоматизация рутины

Для быстрого старта мы используем собственный шаблон на базе gulp. Он имеет все необходимое для работы над версткой проекта (шаблонизатор, препроцессоры, автообновление браузера, загрузка результата на сервер и др.), что повышает эффективность и скорость работы.

Общение

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

Демонстрация результатов работы

Для демонстрации результаты выгружаются на сервер. Например, http://helloipsum.com/projects/finance-theme.

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

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

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

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

В итоге заказчик получает:

• архив скомпилированных и исходных файлов
• сборщик проекта и инструкцию по работе с ним
• стайлгайд
• документацию по сложным компонентам

P.S.

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