Илья

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

Поправьте size и позицию установите:

background-size: auto 100%;
background-position: top left;

https://webref.ru/css/background-size

Задать фиксированную высоту для самих заголовков. Если это очень рандомное значение с помощью JS (ищите максимальную высоту в строке и приравниваете заголовкам). Определить элементы на одной строке можно через offset.top - он одинаковый должен быть.

<div class='custom-textarea'>
	<textarea class='custom-textarea__textarea'></textarea>
	<div class='custom-textarea__buttons'>
		<button class='custom-textarea__btn js-custom-textarea-attach-click'>
			<!-- иконка скрепки -->
		</button>
		<button class='custom-textarea__btn js-custom-textarea-send-click'>
			<!-- иконка самолета -->
		</button>
	</div>
</div>

Стилями доводите до нужного внешнего вида, с помощью JS классов навешиваете нужную логику.

label {
	font-weight: 100;
	width: 100%;
	display: block;
}
input, textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid black;
}

Дак это не тень, а border стандартный. В любом случае повлиять на это можно CSS свойствами border и box-shadow.

P.S. а немного ли у вас пафоса, для задавания таких простых вопросов?

Если речь идет про какой-нибудь небольшой сайт на 3-4 страницы, то ничего критичного нет.
Если речь идет про каталог - то это вообще не крутая идея, делайте на CMS как минимум для удобства редактирования контента.

1.2. Что говорит гугл на такие запросы?
- frontend top frameworks 2017
- php top frameworks 2017

Ну и первые ссылки на эти запросы:
https://coderseye.com/best-php-frameworks-for-web-...
https://da-14.com/blog/5-best-javascript-framework...

Трудно? Вряд ли!

3. Официальные доки и туториалы
4. Для сайтов: создание сайта. Для интерфейсов: создание интерфейса. Нет, не подходит?

Сделать изображения блоками? Не совсем понятно, что нужно... У вас на скрине 6 картинок, что из них блоки? что из них картинки?

Добавить в CSS (ниже bootstrap'a естественно):

.carousel-inner {
height: 100%;
}

Там же есть код демки (codepen.io/desandro/pen/bIFyl ), просто событие повешайте на не клик кнопки, а на $(document).ready() к примерму

Bootstrap
Material
Metro UI