Сергей

Я лично использую:
codepen.io/tobiasdev/pen/XjXgkA для всяких лендингов.
Он очень простой, лаконичный.

А для более крупных проектов:
github.hubspot.com/vex/docs/welcome

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

Верстка писем - это отдельное направление в верстке, если вы не знаете как реализовать бэкргаунд в письме, то я думаю, что возможно вы не знаете большое количество подводных камней связанных с версткой писем. Что можно использовать, а что нет. Я рекомендую вам использовать какое то готовое решение и уже его изменять под свои нужды. Например на гитхабе лежит заготовка для рассылки, которая будет корректно отображаться в большинстве почтовых клиентов - https://github.com/nikbelikov/20th-century . Плюс много справочного материала по рассылкам.

Сканнеров не знаю, но если нужен конструктор лендингов, проще купить на themeforest какой-нибудь конструктор лендингов, которых там навалом, за 15 баксов и не париться, чем платить абонентку. По запросу Page Builder вылезет целая куча. Я использовал вот такой: https://themeforest.net/item/select-landing-page-s... до сих пор у меня лежит на каком то сайте. Но это уже довольно древний билдер, ему года два, сейчас есть новее и современнее.

А все эти наши отечественные конструкторы имеют ряд критичных минусов:
1. Абонентка от 300 до 1500 рублей.
2. Зачастую всего 1 домен на 1 учетную запись.
3. Проблемы с внедрением стороннего кода. Например своих плагинов на квери или корзинки на аяксе.
4. Дополнительное вымогание денег за всякие копирайты и прочую ерунду.
5. Нет возможности самому исправить баги(а они есть везде), в результате приходится сидеть и ждать когда снизойдут сами разработчики, чтобы пофиксить то, что вам надо.

Когда вы разрабатываете, вам логичнее разбить стили по удобной вам методологии, чтобы небыло огромных портянок из стилей. Потом таск менеджер, например gulp, во время сборки проекта в продакшен, автоматически сжимает и объединяет все в 1 файл. По поводу футера, лично мне эта идея не особо нравится. Стили это не то, на мой взгляд, что должно грузится из футера. Но это на усмотрение. Но уж точно 10 разных файлов css в продакшене это дурной тон.

Использую section, header, footer, nav - так как лично мне удобнее с такой структурой страницы. Истово верую в то, что это больше нравится поисковикам, на старые браузеры которые не понимают этого мне глубоко наплевать, но вообще сейчас вряд ли можно найти сайт без reset или normalize. Так что верстка полюбому не едет. Какие там нужны скрипты не понял. Чтобы секции присвоить дисплей блок?

2017 год - забудьте про explorer, темные времена прошли. Чем раньше динозавры поймут, что никто не собирается адаптировать сайты под их ископаемые браузеры, тем лучше будет всем.

Если вы хотите, чтобы информеры все время были сбоку, даже при скроллинге, то ставте position:fixed, если нет, то как уже сказали выше position:absolute, только не забудьте указать также position для родителя.

99% что у вас не правильно указаны пути к файлам.
1% - не правильно заданы права доступа к файлам.

Можно минимизировать код в продакшене.

А зачем вы два раза квери подключаете? :)
js.js и css.css - не лучшее название для файлов.
Зачем вам класс .img? Имхо, он здесь лишний.

По поводу самого кода ничего сказать не могу. Не специалист по js/

Эффект параллакса прикольный :)

А что там учить? Это просто набор инструментов. Нужна карусель прицепил карусель, нужны табы, прикрутил табы. Я сомневаюсь, что вы каждый раз для этого пишете сами свои решения. Все равно либо используете уже выбранные ранее, для других проектов плагины, либо ищете новые, подходящие. Тоже самое касается и адаптива. Ничего нового, если вы знаете html вы там не найдете. Это просто набор плагинов и стилей.

Дайте ссылку на страницу. Сейчас очень непонятно, не хочется въезжать во все это дело в таком виде. В качестве гипотезы: попробуйте цену сделать блоком и позиционировать за счет float.

Тоже предпочитаю overflow:hidden с height:auto

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

Для тех, кто как и я столкнется с этой проблемой, вот решение:

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal .modal-body').html('');
});

Это мы очищаем окно. Но в таком случае, при повторном открытии нас ждет пустота. А так же при открытии окна, оно дергается из за полосы прокрутки. Решаем это таким способом:

$(".modal").on("show.bs.modal", function(){
    $('#myModal .modal-body').html('<iframe><i>Фрейм с вашим видео из youtubе</i></iframe');
    var $bodyWidth = $("body").width();
    $("body").css({'overflow-y': "hidden"}).css({'padding-right': ($("body").width()-$bodyWidth)});
});

$(".modal").on("hidden.bs.modal", function(){
    $("body").css({'padding-right': "0", 'overflow-y': "auto"});
});

Я так и делал изначально, но у меня почему то изначально при загрузке placeholder = цвету текста. Потом при фокусе на поле, цвет placeholdera становится таким как его указали, ну а текст опять же того цвета который ему был указан и какого цвета изначально placeholder. Возможно тому виной то, что у меня стоит бутстрап.

Верстальщику не нужен, ни блокнот, ни калькулятор. Калькулятор как и блокнот есть в самом PC, может еще счеты и бубен рядом положить для солидности? :) Выполнять арифметические действия можно даже в консоли. К примеру $ echo ((10+(270/30))) А идеи... Я не знаю, какие могут быть идеи по верстке. Верстай да верстай. Фрон-енд возможно и требует записей, но верстка это минимум умственных усилий и максимум рутинных однообразных задач :) Я сам верстальщик, так что знаю о чем говорю :)

Используйте bootstrap. Это фреймворк, который избавит вас от проблем адаптивной верстки