Верстальщик vs Разработчик Front-end

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

Выделю специальность «верстальщик». Варианты термина на английском: layout designer, web coder.
Верстальщик преобразует графический макет (Photoshop или иной) в набор HTML + CSS + картинки. Иногда к свёрстанному макету может подключить типовые библиотеки JavaScript, например, slider для картинок, light-box для видео-клипов, всплывающие подсказки (tooltip) или диалоговые окна (dialog popup).
Знания и навыки:

• работа с графическими программами, чтобы понять, как собран макет и экспортировать из макета отдельные графические элементы
• знание HTML/HTML5, CSS/CSS3
• понятие про форматы PNG/JPG/SVG, веб-шрифты, спрайты и другие технологии работы с изображениями
• пригодятся знания по HTML-фреймворкам, например, 960 Grid System, Twitter Bootstrap или Semantic UI
• также полезными буду знания по препроцессорам CSS (SASS, LESS, SCSS, Stylus) и препроцессорам HTML для ускоренной («рапидной») вёрстки (Haml, Slim/Plim, Jade)
• навыки кроссбраузерной вёрстки, чтобы в разных браузерах выглядело и работало одинаково
• навыки отзывчивой вёрстки, чтобы можно было использовать на устройствах с разными возможностями и разрешениями
• знание типовых решений JavaScript, чтобы реализовать простейшие вещи, заложенные в макете (см. Какие задачи нужно уметь выполнять на JS начинающему? с пометкой важно)

Рекомендую также прочитать Каким образом из дизайн-макета делается вёрстка?

Фронтенд-разработчик делает так, чтобы макеты, полученные от верстальщика, были наполнены реальными данными. Если приложение построено как client-side (то есть вся основная логика загружается в виде огромного javascript в браузер, а данные запрашиваются с сервера по AJAX; это называется «жирный клиент» / Rich Internet Application), то фронтенд-разработчику потребуется следующее:

• знание HTML/HTML5, CSS/CSS3
• понятие про форматы PNG/JPG/SVG, веб-шрифты, спрайты и другие технологии работы с изображениями
• знания по AJAX, WebSocket, Comet и другим технологиям асинхронной передачи данных; что такое CORS; навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обмен данными, пока бакенд не готов
• пригодятся знания по HTML-фреймворкам, например, 960 Grid System, Twitter Bootstrap или Semantic UI
• полезными буду знания по препроцессорам CSS (SASS, LESS, SCSS, Stylus) и препроцессорам HTML (Haml, Slim/Plim, Jade)
• глубокое знание Javascript, включая использование готовых фреймворков, библиотек и написание расширений для них, что подразумевает объектно-ориентированное и событийное программирование (см. Какие задачи нужно уметь выполнять на JS начинающему?)

Если фронтенд строится на стороне сервера, то дополнительно потребуется знать используемый серверный язык программирования (например, Python, Ruby или PHP) и используемый фреймворк (Django, Ruby-on-Rails, Yii). На практике бывало такое, что фронтендер просил в нужной части проекта сделать var_dump от структуры данных, которую надо показать и перечислить серверные методы, которые надо вызвать по нажатию предполагаемых кнопок.
Зачастую фронтенд-разработчик может и сам закодировать эти серверные методы, если не требуется углубляться в серверную логику (отношения в данных, конкретная бизнес-логика, хранение данных, кэширование, очереди, крон-задачи). Я лично таких очень ценю.

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