Xenobyte

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

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 пункт может с легкостью идти сразу за вторым, если вас больше интересует копание в жсе, и не особо интересно представление. Параллельно со всем перечисленным изучите стайлгайды, методолгии, модульные системы и все подобные вещи, которые необходимы для написания приличного кода.

matthewhartman.github.io/base
concisecss.com
foundation.zurb.com
www.basscss.com
materializecss.com
pintsize.io
getuikit.com
ui.lumapps.com
purecss.io
imperavi.com/kube

... это из тех, что пробовал и изучал доки
+
таблица основных свойств usablica.github.io/front-end-frameworks/compare.html
+
сводная таблица сравнений https://docs.google.com/spreadsheets/d/18_nwvdIVbK...

Цвета:
www.thedayscolor.com
colourco.de
bada55.io

PHP + любая БД + фреймворк - самое быстрое начало. Фреймворк возьмите самый примитивный, который реализует MVC, роутит маршруты и немножко шаблонизирует. Есть микро-форки популярных фреймворков типа Silex (Symfony) silex.sensiolabs.org и Lumen (Laravel) lumen.laravel.com
P.S. Wordpress ни в коем случае не берите, это готовая cms, а чтобы её допиливать нужно 1) жопу вместо головы 2) не для новичка совсем.

Для себя одного git, как мне кажется, нужен только как "машина времени" и "обратный роадмап".
То есть, чтобы иметь возможность посмотреть более ранний вариант кода и чтобы в потоке коммитов найти, когда были какие-то конкретные изменения.
По большому счету, ничего, кроме коммитов в мастер, тут и не требуется. Разве что желательны мелкие коммиты с осмысленным написанием изменений, а не куски того, о чем сам не вспомнишь через неделю.

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

1. Создаю каталог для проекта
   
2. Инициализирую Bower
   
3. Устанавливаю нужные пакеты, например, Twitter Bootstrap, Angular, jQuery и т.д.
   
4. Ставлю Grunt, плагины для него и т.д.
   
5. Запускаю EMACS и создаю index.html
   
6. С помощью Emmet создаю шаблон, который уже начинаю заполнять.
   
7. В каталоге src создаю папки less, js и т.д.
   
8. Попутно пишу задачи для Grunt
   
9. Если в выбранном фреймворке не хватает какого-либо класса для стилизации элемента, сначала описываю стили прямо в шаблоне, в свойстве style. Затем при необходимости выношу их оттуда в LESS в виде одного или нескольких классов.
   
10. ??????????
    
11. PROFIT!!!
    

Лутц М. - Изучаем Python
Доусон М. - Программируем на Python

Thinking Python посмотрите. Неплохая книга, в принципе.

Если стоит задача именно в переходе красивом то можно так:
https://github.com/peachananr/onepage-scroll
https://github.com/alvarotrigo/fullPage.js
tympanus.net/Development/ArticleIntroEffects/index...

А по факту адаптивности дизайна то bootstrap в зубы и поехал:
getbootstrap.com

alvarotrigo.com/fullPage

Почему-то ни кто не упоминает ICANN...
И я не специалист конечно. Но я просто накидаю фактов из которых можно слепить знатную параною.
- Вы всегда подключены к сети. Пакеты шлются постоянно. Даже при выключенном устройстве.
- Есть всем известные протоколы передачи данных. Вполне вероятно, что есть никому неизвестные.
- Windows - это система с закрытым исходным кодом. Что она там делает никому неизвестно.
- Linux открытая система. Но вероятность внедрения кода, который ни кто не заметит, на уровне ассемблера, существует.
- Все мы знаем про универсальные компьютеры общего назначения. Но не многие могут предположить, что есть компьютеры либо системы, которые даже не связаны с транзисторами, созданные целенаправленно решать одну задачу.
- На открытом рынке существуют такие вещи, как micro-SD, умещающие 64Gb информации на участке размером с ноготь. И можно только догадываться, чего на открытый рынок не выпускают и какие ещё устройства существуют.
- Интернет изначально, это военная разработка. GPS изначально военная разработка. Ракеты, которые летают на орбиту изначально военная разработка (хотя тут могут быть просто стечения обстоятельств).
Список можно продолжать...

Чтобы вашу работу заметили, нужно, чтобы кто-то с большим числом фолловеров эту работу лайкнул. Тогда, в свою очередь, его фолловеры увидят это в своей ленте (и, соответственно, вашу работу). Дальше процесс происходит лавинообразно: один лайкнул, его фоловверы это увидели и кто-то из них тоже лайкнул и т.д. Для того, чтобы этот процесс запустить, нужно хотя бы 100 фолловеров (а у вас пока что только 10). Откуда этих фолловеров взять? Например, можно самому фолловить дизайнеров, ставить лайки, комментировать чужие работы. Словом, делать всё, чтобы вас заметили и зафолловили. Кстати, часто люди фолловят в ответ, так что не ленитесь, фолловьте больше интересных дизайнеров.

Насчет всяких бесплатных мелочей. Чтобы выехать на этом, работа должна быть очень крутой. Не просто какая-то плашка в объеме в виде смарт-объекта, а что-то, что обычно раскупают на graphicriver или creativemarket. Что-то, что реально хотелось бы скачать и использовать в своих работах. Тут сразу и не скажешь, проще ли таким способом продвинуться.

А по поводу оформления проекта - да. Чем жирнее - тем лучше. В идеале, сам проект должен быть интересным, с большим количеством деталей, на которых можно остановиться и т.п. Всё это входит в эдакую презентацию, которую можно с интересом рассматривать. Еще хорошая фишка - рассказывать о процессе создания. Многие начинающие дизайнеры (да и не только начинающие) тащатся от того, когда пошагово расписываешь процесс (но не в виде урока, а только общее описание).