makintosh87

Вам не нужно ничего учить и собирать шпаргалки. Загрузите себя задачами, основные моменты быстро отложатся в памяти: позиционирование, центрирование и тп, остальное и в принципе запоминать не стоит, в процессе работы все равно будет много гугла.
Для оценки трудозатрат на макет гораздо важнее требования адаптивности, число платформ, интерактив (CSS-анимации, svg ). Расположение элементов не является основной работой.

Например как-то так:

var element = document.querySelector("#menu");
document.onscroll = function() {
    if (document.body.scrollTop > 200 && document.body.scrollTop < (document.body.scrollHeight - 500)) 
    {
        element.style.display = "block";
    }
    else
    {
        element.style.display = "none";
    }
};

200 - высота сверху откуда начинает показываться
500 - высота снизу откуда скрывается

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

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

Я сейчас учусь в Питере, в Epic Skils. Преподаватели из хороших студий, поэтому дают практические знания. А ещё хороший упор на проектирование. О нём не так много информации в интернете, как оказалось. На одной только Lynda.com и Tutsplus не вывезти... По крайней мере я не смог. А ещё в эпике устраивают экскурсии на крутые студии, вроде кельника и artw. В общем - мне нравится.

В МСК есть всем известная Британка. Фактически мало что о ней знаю, но вот здесь, как я понял, преподаватели из Британки преподают то же самое, но за адекватную цену. (Поправьте, если ошибаюсь.)

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

0) Ванилла js это и есть обычный js.
1) Начинать надо с одновременного изучения ваниллы и jQuery. По ванилле будете читать книги и всякие статьи, типа как работают замыкания, this, hoisting и так далее. А на jQuery вы собственно будете писать код, который будет что-то, да делать. Никто вам конечно не мешает забить на jQuery и по хардкору угарать только по ванильному жсу, но с огромной вероятностью, вместо того чтобы как то реально практиковаться в написании кода и выполнении каких-то простых задач, вы будете биться головой о стену, ибо для начинающего, работа с DOM (а только и этим можно заниматься поначалу) в ванилле это настоящая пытка. Очень важно пилить много велосипедов.
2) Параллельно прокачиваете css. Там просто поле непаханных возможностей и фишек. Со временем скорее всего придет понимание того, что чего то в обычном css не хватает. Тогда и начнете юзать препроцессоры. Можно конечно и сейчас сразу начать, но я не уверен что от этого будет хоть какая-та польза (а вот риск начать юзать вложенность в full-retard mode имеется).
3) Как только начнете писать хоть какой-то вменяемый js или юзать css с препроцессорами, тогда и придет пора автоматизации фронтэнда. Галпы, автопрефиксеры, склеивание/миницирование стилей/js и все такое. Об этом пункте вообще можно будет не париться долгое время, ибо все ваши задачи будут решаться установкой какого-нибудь генератора yeomana с маджонгом и гейшами.
4) Фрейморвки. Ангулары, реакты, эмберы и так далее. Будете их изучать на основе статей и пет-проджектов, ибо на нормальную работу, где эти самые фрейморвки применяют, с 90% вероятностью не возьмут без опыта владения ими. Учить их все естественно не надо. Достаточно хорошенько покопаться в 1-2, чтобы понять принципы работы основных частей.
4 пункт может с легкостью идти сразу за вторым, если вас больше интересует копание в жсе, и не особо интересно представление. Параллельно со всем перечисленным изучите стайлгайды, методолгии, модульные системы и все подобные вещи, которые необходимы для написания приличного кода.

1) Как вариант общее облако. Каждый проект - каталог с четкой структурой (чек-лист, исходники, тз и прочее). Я так работал - не хуже чем любая навороченная система управления проектами.

2) Полное соответствие psd макетов требованиям i-love-psd.ru . Для сеток susy.oddbird.net - очень крутой и гибкий, но для начала изучите его, есть нюансы.

3) Иконки и изображения (.svg, .png, .jpg). Делать отдельные паки. Растр делать с оглядкой на ретину (x2 к размерам). Тоже касается UI элементов, используемых в проекте - отдельный psd с UI.

4) Срок либо называет исполнитель и вы ему верите, либо ставьте грамотных арт-директора и front-end разработчика во главу отделов (они и контролить будут и сроки ставить).

А какие у вас цели?
Если хотите работать на хорошую компанию, то лучше смотреть по вакансиям, например, тут.
Я считаю что это — минимум, но целится лучше на что-то такое или выше.
В плане порядка изучения советую поступать таким образом("книгу" можно заменять на "сайт" или "документацию"):
1) прочитали книгу по CSS+HTML, сверстали несложный сайт
2) прочитали еще одну книгу по CSS+HTML , сверстали что-то посложнее
3) та же история с JavaScript, первая книга — выполняете упражнения, потом пишете что-то несложное, потом читаете другие книги в стиле best practices. Вот вам список книг и навыков, которые требуют от студентов в одной из фирм.
4) изучаете "плюшки", тут лично мои предпочтения: JQuery, SCSS, Jade, ES6, gulp, InternJS, BackboneJS. Тут все изучается по документациям, хотя книг по JQuery тоже много.
5) можете зацепить backend и NodeJS если вам интересно, минимум — понимать что и как там происходит, почитать про RESTful и MVC на серверах
6) базовые понимания и знания дизайна и сопутствующего софта
—> дальше пункты которые касаются слова "Хороший"
7) поиграться с 2D-3D графикой, анимациями и разными библиотеками с ней связанными
8) совершенствовать свои навыки во всех пунктах выше(оптимизация, best practices), изучать самые интересные решения на разных сайтах, интересоваться всем новым и много практиковаться

Соглашусь высказываниями коллег выше, конечно же, front-end не должен владеть полноценными навыками дизайнера, но основами работы в фотошопе - обязательно.
То есть, он должен уметь "читать" макет: знать элементарные основы фотошопа; работать с группами и слоями, чтобы видеть какие параметры слоя использовал дизайнер; уметь сохранять изображения и графику из макета (иконки, картинки и т.п.), знать где находятся параметры шрифта, чтобы понимать какой размер и шрифт использовался и прочее по мелочи.
Иными словами, он должен обладать элементарными знаниями фотошопа и на этом его дизайнерские знания оканчиваются. Конечно, если он знает больше, это плючик ему, но он не обязан применять эти знания для доработки макета.

Дизайнер, в свою очередь, должен обладать не начальными, а более менее нормальными знаниями front-end, что бы понимать принцип верстки и не рисовать безумных вещей, которые нужно верстать дикими способами или вообще невозможно сделать.

Со стороны такая расстановка кажется несправедливой по отношению к дизайнерам, но, я это говорю как дизайнер. Начинал работу в вебе как Front-end, чуть-чуть back-and'a , а потом переключился на дизайн. И знания верстки очень сильно помогают мне оптимизировать работу с верстальщиками. Работая с несколькими верстальщиками постоянно, я изучаю их стиль верстки и рисую дизайн, с учетом их "любимостей", они, в свою очередь (если знают хорошо фотошоп) тоже идут мне на встречу и подправляют мои "забытости" (ховер какой-нибудь одной кнопки, или окно, которое отличается от других наличием или отсутствием какого-нибудь одного поля). Но по крупным недочетам они обращаются ко мне и это правильно.

Итог:
Если у вас налажена постоянная работа с определенными дизайнерами и они добросовестно относятся к своему делу (подписывают все слои, делают комментарии и UI файлы) и уважают вашу работу, но чисто по-человеческому фактору можно пойти им на встречу в каких-то мелких моментах, но вы не обязаны.
Если вы работаете с дизайнерами, которые меняются как перчатки, с "грязными" макетами (не подготовленными для верстки и сделанными абы-как), то ничего дорисовывать вы не должны! Это должен делать тот дизайнер, который рисовал или другой, но не вы. Вы технический работник, а не творческий и то, что вы умеете что-то "дизайнить" в фотошопе к вашему спектору работ не относится. Это точно так же, как дизайнера просить в back-end'e что-то подправить - не его огород.

stackoverflow.com/questions/1861382/convert-png-to-svg