Илья Ерофеев

1)Идешь на htmlacademy.ru и проходишь все бесплатные курсы.
2) На этом пункте,невольно задаешься вопросом,как тебе использовать эти знания. Смотришь как верстать простейший макет https://www.youtube.com/watch?v=vFjRVugE030 на float.
3)Проходишь все платные курсы.
4) Читаешь https://www.ozon.ru/context/detail/id/22435909/ эту книгу. Можешь найти на просторах в инете.
5) Берешь самостоятельно простенький макет и верстаешь его на флексах и адаптивно( на этом пункте будешь знать что это.
6) Читаешь https://www.ozon.ru/context/detail/id/137213400/ .
7) На этом этапе ты знаешь что существуют предпроцессоры,и хочешь изучить,советую https://youtu.be/H4cG4tbc-xQ для знакомства.
8) читаешь такое и присматриваешь что учить дальше:
1) glivera-team.github.io/how-to/2016/05/02/how-to-st...
2)https://coggle.it/diagram/52e97f8c5a143de239005d1b...
3)https://github.com/zualex/devmap
4)blog.flppv.me/all/frontend
5)https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
6)krekotun.ru/ui-developer-skills.html
7)Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей?
8)webmasters.teamdev.com/#html

9) Дальше думаю сам разберешься,Удачи!

Добрый день!

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

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...

Дерзайте!

codenamecrud.ru готовый роудмап, сразу с уроками и ссылками на материалы. можно заниматься по ним, можно просто взять за основу заголовки уроков и искать информацию самостоятельно.

Разбирайте как можно больше отличных примеров:
codepen.io/search/pens?q=CSS+3D
codepen.io/search/pens?q=css3+animation
codepen.io/search/pens?q=css3+transform

//javascript такой: хоба! Функция, которая принимает на вход один параметр 
//и возвращает результат в виде х*х.
//Пожалуй, я ее запомню, потом, может, пригодится
var square = function(x) { return x*x; }; 

//потом javascript такой: ага, надо че т в консоль вывести (то, что в скобках). 
//А че в скобках? Итить-мадрить, это ж та самая функция, котораю я прост запомнил. 
//Надо ее вызвать и на вход подать 12. Тогда мне вернется 12*12 и это я выведу в консоль.
console.log(square(12));

//огонь

А если понятнее, то вот

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

А так же искать для себя ресурсы, где разработчики выкладывают различного рода приколюхи и эффекты на css, js.
Читать новостные ресурсы, на подобие хабра и css live, css tricks.

Вот пример сайтов, где есть клёвые реализации всяких эффектов:
https://codyhouse.co/
tympanus.net/codrops

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

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

1) Работа с svg - анимации тоже делаются при помощи js
2) Работа c canvas - эта штука работает только при помощи js
3) Ajax - вы должны представлять, что это такое и как вы можете им воспользоваться. Но не грубите

Учить то, как пишется это на js вам не нужно, но знать, что он может, для вашей работы, нужно!

И на последок caniuse.com/. Этот сервис скажет вам о поддержке браузерами различных возможностей. По типу поддержке css свойств. Вбиваете свойство в поиск и смотрите, как оно поддерживается браузерами. Пример

Обычная структура проекта по верстке которая сдается клиенту.
Исходники в assets, компилированные и сжатые файлы в public.

• assets
  
  • sass
    
  • js
    
  • jade
    
  • media
    

• public
  
  • css
    
  • js
    
  • img
    
  • index.html
    

• package.json
  
• gulpfile.js
  

1) руководствуясь здравым смыслом
2) можно, руководствуясь здравым смыслом
3) очевидно, что каждой единице измерения - своё место.
4) это контрольные точки. дизайнер дает вам понять, как должно все работать. в этих точках, как правило, верстка должна соответствовать макету. остальное - руководствуясь здравым смыслом.

Лучше прямо в HTML встраивать, чтобы не плодить лишних запросов к внешнему SVG файлу. Однако, если вставлять inline способом, то кешироваться не будет.
На одной конференции Яндекса советовали вставлять через JS, чтобы они кешировались.
Сейчас опишу, как я делаю.
1) Создаем JS файл с inline SVG. К примеру, такой

// Тут хранятся иконки в SVG
var icon = '
<svg style="display:none;">\
  <defs>\
    <symbol id="header-phone" viewBox="0 0 850.394 850.394">...</symbol>\
  </defs>\
</svg>';    
// Вставляем иконки в HTML        
document.getElementById('svg-icon-placeholder').innerHTML = icon;

2) Создаем в HTML пустой div с id svg-icon-placeholder. В него мы и будем вставлять SVG
3) Юзаем через use :)
Довольно просто, но я пока не придумал как автоматизировать сборку спрайтов через GULP таким способом. Если знаете, то подскажите как)

https://www.youtube.com/channel/UC7enHM_oJRYJOnyJr...
https://www.youtube.com/channel/UCZeU17nbVfzczAkJV...
https://www.youtube.com/channel/UCHHw70vvbfyM6xJQo...
https://www.youtube.com/channel/UCIIt69f5D44s2cdb9...
tohtml.it/post/74511047203/markup-process

По нему скучаю искренне и иногда сижу на подоконнику с лате и смотрю на капли дождя, стекающие по стеклу:
https://www.youtube.com/channel/UCdnFX7mzgup9moXG2...
Это для общего развития:

https://stepic.org/course/%D0%90%D0%BD%D0%B0%D0%BB...

Похожий вопрос:
Какие задачи нужно уметь выполнять на JS начинающему?

Ваша библия:
https://developer.mozilla.org
Можно докинуть еще:
webref.ru
htmlbook.ru
Просто случайная ссыль
https://docs.google.com/document/d/1kehaJKKRo7zxYp...
Еще одна:
https://github.com/ihorzenich/html5checklist
Еще какая то штука
https://github.com/dypsilon/frontend-dev-bookmarks
Лучшие практики тостеровцев
Как вы начинаете вёрстку сайта?
Инструменты
fredsarmento.me/frontend-tools

После пары часов выпускания пара из ушей, включить на всю громкость и хоть как то отвлечься от этой жизни
https://www.youtube.com/channel/UCY0C6A3t3RTUN3BB6...

На freecodecamp.com неплохо алгоритмы можно потренить

Ну и конечно
learn.javascript.ru

PS
еще это
Какие ресурсы с новостями по web-разработки вы знаете?

PSPS
Не отвечаю за качество контента под ссылками, может кое что уже outdated.

https://vk.com/video79753760_171233585

Удачи, брат