devmost

Добрый день!

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

flexbox, grid layout

- это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
Немного о новинках в css тут.
Поддержка браузерами тут.

gulp, webpack и пр.

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

препроцессоры

- представьте, что вам чего-либо не хватает в html и css.
Например, вы хотите разбивать большие html файлы на множество мелких, или вам нужно вставить в html динамическое содержание - для этого созданы html шаблонизаторы. Вы используете в работе синтаксис конкретного шаблонизатора, затем тот же gulp автоматически собирает эти файлы в обычный html, который понимает браузер.
Аналогичная ситуация с css, препроцессоры позволяют разбивать файлы на мелкие, и собирать в один, доступны переменные и функции, и многое другое.
Популярный шаблонизатор Pug
Один из css-препроцессоров Stylus

пакетные менеджеры

- это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут

Ну и конечно статьи и подкасты:
https://habrahabr.ru/
jsraccoon.ru

https://soundcloud.com/web-standards
https://radiojs.ru/

Конкретные статьи и ресурсы для новичка:

frontender.info/a-baseline-for-front-end-developers
frontender.info/a-guide-to-flexbox
css-live.ru/articles-css/pravilnye-kontrolnye-toch...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://habrahabr.ru/company/zfort/blog/321214/
https://frontendmasters.gitbooks.io/front-end-hand...

Дерзайте!

будущее за людьми, которые в одном лице и макет сделают и сайт сверстают.

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

Что нужно уметь хорошему web-дизайнеру?

Да, разумеется, знание HTML/CSS не помешает и даже более: веб-дизайнеру нужны некоторые специфические познания. Например, знаете ли вы какие цвета или градиенты беспроблемно отображаются в различных браузерах?
Нарисовать-то можно что угодно. А как это потом будет реализовано? Хороший веб-дизайнер все это знает и учитывает.

Хороший веб-дизайнер должен разбираться в юзабилити. Фактически, в большей части проектов дизайнер и специалист по юзабилити - это одно лицо.

За все время работы на oDesk, я для себя я выделил несколько важных моментов:
- мониторить проекты и отвечать в первые 10 минут после публикации
- быть уверенным в себе и показать клиенту что вы действительно сможете сделать данный проект(скинуть ссылки на ваши похожие проекты).
- сразу озвучить свою примерную оценку бюджета и времени исходя из доступной информации.
- полностью изучить job description и все прилагающиеся документы и показать клиенту что вы не просто отправили ему письмо, а действительно постарались разобраться с его проблемой.
- предложить свои идеи по решению проблемы уже в cover letter
- указать что вы готовы работать прозрачно и постоянными отчетами о прогрессе работы.
- задать вопросы которые вас инетересуют, это даст больше шансов что клиент ответит и вы сможете завязать разговор.
- очень важно писать на таком уровне английского чтобы вас сразу поняли. При чем отличные знания грамматика и орфографии хоть и являются плюсом, но совсем не обязательны. Главное чтобы клиент вас понимал.

Больше информации можно найти в моем блоге - jff.name/odesk-write-cover-letter