Как организован workflow фронтенд разработчика?

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

Вот сидел я очень много времени, да изучал верстку, верстал какие то демки. За все время не сверстал ни одной законченной страниц, постоянно, то какое то меню, то форму, то галлерею и т.д, все по отдельности, в основной на codepen. Сижу уже не не первый год, с некоторой переодичностью так вот занимаюсь. То начинаю учить, то бросаю.

Сейчас все таки решил, что пора уже остановиться на чем то одном. Решил остановиться на разработке. Пока что только фронтенд.

За все время попробовал много всяких штук. Много про что читал. В общем всего по немногу. Теорией и мелкой практикой сыт по горло.
html5, css3, sass, stylus, jade, gulp, js, bootstrap, jeet, nib, rupture и т.д
Много всего перепробовал, но вот единого представления как это все организовать и связать между собой у меня нет.

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

Вроде как все по отдельности понятно, а вот как все это во едино собрать и использовать не пойму.

Подскажите как уже начать нормально делать фронтенд, а не клепать демки на codepen. Хочется все таки профессионально этим заниматься. Везде пишут про все по отдельности, а как вот испльзовать все это в одном проекте хз.

Как вот с нуля организовать все?
Где можно посмотреть на уже готовые проекты, вернее на файловую структуру?
Как организовано все у вас?