Кроме оценки по времени, можно использовать и другие методы расчета стоимости. В основном все новички не могут адекватно оценить время, за которое они сделают ту или иную работу. Да и у опытного мастера такое тоже может быть иной раз. Все зависит от проекта и самого человека. Так же не игнорируем индивидуальные особенности. А клиенту желательно знать точную или приблизительную цену перед началом работ, а не когда она завершится и будет зафиксировано потраченное время для расчетов. Поэтому я начинал с оценки по секциям вёрстки, а не времени за работу. Каждая секция 800 рублей (ценник для джуниора). И считаем, хедер, футер, разные блоки. Цена получается очень адекватная для обоих сторон и ее легко посчитать.

Сейчас я считаю не секции а БЭМ сущности. Мне это удобнее чем, оценка времени (касательно верстки, какие-то работы оцениваю по времени, выше в ответе про временную оценку очень хорошо все описано) Я верстаю по БЭМ и весь проект разбираю на независимые блоки. Например верстка какой-нибудь карточки, а она используется в 5 местах на сайте с 2-3 видами кастомизаций, в зависимости от размещения, но я то благодаря БЭМ верстаю ее только один раз. Потом только готовые классы расставляй. Поэтому считаю БЭМ сущности, если они много раз повторяются ещё накидываю небольшую сумму.

По посадке (также внедрение) верстки все зависит от того как вы работаете с бекендом. Думаю для вас подойдёт 50-100% от стоимости верстки брать за посадку. В зависимости от сложности.

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

И мой совет, как работать быстро и качественно. Изучайте современные инструменты для работы. Сборщики проектов, препроцессоры, БЭМ и так далее. По своей натуре я этими вещами начинаю интересоваться ещё до того как получил хорошую базу знаний и мне это помогло очень быстро выполнять свою работу качественно, в короткие сроки, современно и удобно. Каждая работа не выглядит как очередная рутина. За счёт всех этих современных инструментов каждый раз работать очень интересно.

Ещё если вы сами и дизайны рисуете, то изучите восьми пиксельную сетку
https://habrahabr.ru/company/everydaytools/blog/31...
Или расскажите об этом дизайнеру с которым работаете.
А так же атомарный дизайн. Принцип тот же что и БЭМ, только применительно к дизайну. И оценку очень легко делать и верстать

Многие советуют начать изучение с Vue, а потом уже выбрать что лучше. Для многи плюс Vue будет в хорошей документации на русском языке (официальная поддержка русского на сайте). Мне ближе Angular (v.2+) с его MVC, поэтому выбрал его. А вообще эти фреймворки не нужны для обычных простых сайтов. Если страница которую верстаешь язык не поворачивается назвать веб приложением, то там нужна обычная верстка. А когда на странице много модульных частей, которые как-то взаимодействуют друг с другом. То тут уже фреймворки будут кстати.
Что именно выбрать решать вам. По большому счету это не принципиально и в основном дело вкуса в первую очередь. Все они в итоге делают веб приложения. Я выбрал Angular v.Последняя. Так же симпатичен Vue. Реакт немного недолюбливаю, чисто из-за личных предпочтений, не более.
А так, JS в первую очередь доводите до хорошего уровня, как тут большинство и советуют. И ищите недорогие заказы. Главное сейчас это практика реальных проектов и просто запустить сам процесс поиска и выполнения работы. Остальное приложится)

Flexbox и Grid это не два противоборствующих свойства, они наоборот дополняют друг друга.
Grid - инструмент позиционирования основных блоков страницы.
Flexbox - инструмент позиционирования элементов внутри блоков, спозиционированных с помощью Grid.

GMD - пример сетки на flexbox, которую мы с командой используем и которую я сам написал.