Владимир Хаттер

На хабре есть одна полезнейшая статья, на которой учился сам.
Статья относительно старая, но именно она мне в свое время "открыла глаза". У меня на полном серьезе после ее прочтения было такое же выражения лица, как у пацана на картинке)) Прошло 2 года но моя сборка фронта принципиально не изменилась. npm, gulp, sass, и т.д. Для сборки чисто фронта использую свой Blank-project, который изначально вышел из этой статьи.

Все зависит от поставленных задач и того, под что вы собираете фронтенд. Я например сейчас в 90% случаев собираю его под WordPress, поэтому вместо html сходу использую php и т.д..

Для node.js - grunt или gulp и выбираете препроцессоры для html и css.
Для ruby - я использую middleman

Совсем крутой вариант - постичь дзен bem

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

Это все технологии, фреймворки можно не использовать ибо после нескольких лендингов у вас будет свой набор блоков на 90% покрывающий потребность

Самый важный и простой шаг — лечение дивянки использование html5 тегов для разметки страницы.

Вот здесь Вадим Макеев расскажет Вам, как и почему стоит использовать html5 теги.
А вот здесь Ричард Кларк расскажет Вам, как и почему не стоит использовать html5 теги.
А потом ещё можете прочитать вот эту статью, чтобы окончательно запутаться и уйти на бэк-энд.

Но если вам это интересно настолько, что вы понимаете, что между SEO и семантикой не очень-то много общего, то можете ещё почитать вот эти статьи.

Кстати, обязательно читайте комментарии к статьям, они тоже очень полезны.

P.S. После просмотра этих видео вы поймете, почему картинка под спойлером очень крутая.

Понимаю твою проблему. Недавно завершил сборку своего окружения, держи, глядишь понравится:
https://github.com/web-worddoc/primary (Старая сборка)

https://github.com/web-worddoc/Boilerplate (Новая сборка)

html разбит на модули с помощью pug(бывший jade), а именно с помощью встроенных "include"
css разбит на модули и собирается на sass
js разбит на модули с помощью require js(очень сильно не дробил, мне удобнее пока крупными кусками), что особенно удобно, если хочется избавиться от спагетти кода

Сборка сама на gulp, стоит через консоль вбить gulp watch и начать писать код.
Надеюсь поможет)

P.S. Для самой сборки проекта в продакшн, прописываешь gulp build.

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

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

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

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

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

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

mini.s-shot.ru/1024x768/PNG/320/Z100/?torrent-free...

$url = 'site.ru';
copy('http://mini.s-shot.ru/1024x768/PNG/320/Z100/?' . $url, 'image.jpg');

Как вам и сказали ставь консольный браузер на vps или локалку.
Я бы выбрал phantomjs вот пример phantomjs.org/screen-capture.html

На пыхе выполняй через еxec с проверкой того что ты передаешь в exec

Проверьте .bitrix/php_interface/init.php на предмет наличия функции custom_mail()

Добрый день!

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

flexbox, grid layout

- это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
Немного о новинках в css тут.
Поддержка браузерами тут.

gulp, webpack и пр.

- это инструменты, которые созданы для облегчения рутинных задач.
Для верстки очень удобно использовать gulp - вы описываете задачи, такие как создание локального сервера, мгновенная перезагрузка страницы при изменениях, минификация ваших файлов, и прочее.
Посмотрите отличный скринкаст от Ильи Кантора!

препроцессоры

- представьте, что вам чего-либо не хватает в html и css.
Например, вы хотите разбивать большие html файлы на множество мелких, или вам нужно вставить в html динамическое содержание - для этого созданы html шаблонизаторы. Вы используете в работе синтаксис конкретного шаблонизатора, затем тот же gulp автоматически собирает эти файлы в обычный html, который понимает браузер.
Аналогичная ситуация с css, препроцессоры позволяют разбивать файлы на мелкие, и собирать в один, доступны переменные и функции, и многое другое.
Популярный шаблонизатор Pug
Один из css-препроцессоров Stylus

пакетные менеджеры

- это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут

Ну и конечно статьи и подкасты:
https://habrahabr.ru/
jsraccoon.ru

https://soundcloud.com/web-standards
https://radiojs.ru/

Конкретные статьи и ресурсы для новичка:

frontender.info/a-baseline-for-front-end-developers
frontender.info/a-guide-to-flexbox
css-live.ru/articles-css/pravilnye-kontrolnye-toch...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://habrahabr.ru/company/zfort/blog/321214/
https://frontendmasters.gitbooks.io/front-end-hand...

Дерзайте!

contenteditable?

Копай в сторону профилирования. XHProf, xDebug.

php.net/manual/en/function.debug-backtrace.php

Проще настроить брейкпоинты в том же Netbeans или в Phpstorm, настроить остановку выполнения на первой строке и смотреть пошагово, что и куда.