Gregory Bass

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

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

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

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

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

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

Мы с моим дизайнером работаем в Figma. Это веб приложение с очень удобными инструментами для дизайнера и супер удобным способом переносить дизайн на верстку. Бесплатная версия имеет весь функционал, ограничение по количеству проектов в 3, и история версий макета хранится месяц. За 700р все эти ограничения снимаются, но это нужно только дизайнеру. Так что первое время можно без каких либо ущемлений обходиться бесплатной версией.
Там есть комментарии, что очень удобно. Можно любой элемент прокомментировать или задать вопрос дизайнеру, верстальщику, клиенту. Снимать все данные для элементов очень удобно, можно даже просто через ПКМ скопировать готовые стили, если кому так удобнее. Всю работу можно смотреть в лайв режиме, видно курсоры других людей кто на данный момент в проекте, видно какой элемент им выделен и он с ним работает. Есть очень удобнонастраиваемая система адаптивных сеток.
В общем мы уже несколько заказов на этом сервисе сделали и нам очень нравится.

Еще удобны программы такие как Sketch (для мака) и Adobe Experience Design. Adobe XD еще в бета версии, но уже годная программа с отличным прототипированием и возможность показать дизайн в действии. И я думаю она в скором времени обгонит скетч по функционалу и будет более предпочтительным выбором.

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

Столько комментов и добавить то нечего)
БЭМ это модульность. Каждая верстка это словно создание фреймворка наподобие бутстрап. Если лендинг секций на 10 к примеру верстаешь, то сверстал по БЭМ секции 2-3 а дальше только классы расставляй готовые и иногда модификаторы добавляй. Или многостраничник, основные элементы сверстал и так же только классы расставляй, стили уже готовы.

А если смотреть HTML код с правильным БЭМ, то получается как самодокументируемый код в программировании. Все ясно из названий классов и видно где частью вёрстки независимый блок с элементами внутри. Видно состояние элементов, типа

menu__link_active
card_shadow
button_red
section__title_blue

В вашем примере результат идиотизма верстальщика, ему можно смело руки оторвать.

А Sass это просто более удобая работа со стилями. Препроцессоры не дают модульности в работе над проектом. Неоспоримые удобства - однозначно, сам сасс использую и написал свою адаптивную сетку, когда вся адаптивка происходит в стилях, а не как в бутстрап расставлением кучи классов и созданием большой вложенности а результат это каша в разметке.
Но БЭМ это другое. Между прочим он идеально сочетается с возможностями препроцессоров!

У сожалению у вас получилось как в анекдоте.
- Гоги, тебе нравиться Шакира?
- Нет
- А где ты ее слышал?
- Мне Моги напел

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

Сожалею о вашем таком неудачном знакомстве с очень хорошим и мудрым изобретением.

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

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

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

Как я узнал, у плагина есть баг и он нормально не работает в версии PhpStorm 10.0.3