Дима Паутов

https://dribbble.com/ - лично мой выбор. Я хоть и не дизайнер, но иногда захожу, пролистываю, добавляю в закладки профиля понравившиеся.
https://www.behance.net/

И подобные. Можно ещё инстаграм, но туда обычно с подобных сайтов выкладывают

Сделать такую гифку будут очень проблемно, т.к. либо она будет много весить, либо будет в ужасном качестве. Просто сделайте блок, внутрь него фон, а поверх пустите css анимацию с передвижением тумана, зациколенную. Элементарно

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

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

Точно так же с кодом происходит. Но там заказчика можно не спрашивать, а в тихую изменить, что на итог никак не повлияет

Если договора не было, в котором всё это должно быть прописано, то это ваш дизайн! И вы имеете полное право выкладывать его к себе. Ответ уже в вашем вопросе

Работал с человеком без договора, на устной договоренности.

Если будет договор, то вы там должны указать, что имеете право на то, что бы выкладывать свою работу в портфолио. Если клиент согласен, дерзайте, если нет, то уже решаете как пойдёт!

У меня был такой момент, когда я работал в одном стартапе. Я занимался фронтенд частью. После ухода оттуда, у меня остались все исходники, даже сейчас они у меня. Т.к. никакого договора у нас не было(хоть и зп я получал), то я никому ничего не должен.

Так же, работая в одной "конвейерной" фирме, по созданию сайтов, там, в трудовом договоре был пункт, который запрещал публиковать выполненные в этой фирме работы, дизайн, вёрстку и т.п. за своё. Всё это было интеллектуально собственностью той фирмы.

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

Мне кажется вам еще рано создавать адаптивный сайт, раз спрашиваете об этом. Наберитесь опыта в адаптивности. Ведь адаптивный сайт - это не просто изменение структуры блоков. Это сугубо моё мнение. Иначе наступите на кучу граблей. В первую очередь, нужно знать основы верстки. Без этого никуда. Так вы никогда не поймёте, как работает браузер.

При чем тут мобильное приложение и mobile-first?

Допустим, верстать будем на Bootstrap 3, тогда и вариантов макета должно быть 4 штуки?

Бутстрам вам не скажет, сколько должно быть макетов. Все зависит от вашего дизайна. Если он простой, то макеты вам не понадобятся. Знание сетки бутстрапа вам будет достаточно для перестроения блоков. А так же, использование бутстрапа, накладывает на вас некоторые ограничения. Ведь вам придётся рисовать под него. Выбирайте инструменты по необходимости, а не потому, что так чаще всего делают многие.

Моё мнение - двигаться здесь лучше в обратную сторону, от больших экранов к маленьким

Для начала, нужно вам понять, в чем истина mobile-first и от чего лучше начать. Ибо я уверен, что вы не знаете, в чем разница. Это лишь моё мнение.

Я вижу 3 варианта, для решения проблемы.
1) Рисуете макет на 1920 например. Допустим, у вас фотошоп. Дальше по немногу уменьшаете рабочую область и все элементы, смотрите, что и как выглядит. Все ок? Уменьшаете дальше. Если видите, что выглядит один блок уже не хорошо, текст не влазит или еще что. Вот вам 2й макет. И так вплоть до 320px. Но такой способ не даст вам полной картины. Браузер - это не фотошоп и не иллюстратор. Многое он не умеет, а то, что умеет, работает не всегда так, как в фотошопе. Ну думаю вы и так это знаете)))

Минусы:
- Это очень долго.
- Вы все ровно не предусмотрите все возможные нюансы.

2) Это сидеть с фронтендом и делать прям в живую. Так вы будите видеть как все работает в живую и видеть все проблемы. Ведь о некоторых вещах вы может даже и не подумать. Главное тесно работать с фронтенд разработчиком. Вам проще будет найти точки ширины, высоты для рисования макета.

Плюсы:
Более детальная проработка сайта

Минусы:
Время

3) Чаще всего, рисуют 4 макета. Это десктоп(1920), ноут(1366), планшет(1024 - 768), телефон(480 - 320). А там разработчик по ходу дела сам меняет мелкие моменты.

Плюсы:
Самый простой и быстрый вариант

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