Dymok

.class input {

}

Фон не перекрывает контент, они просто одного цвета...

Ответ в названии хука, которое выводит сообщение в консоль — «beforeShow». В консоль вы выводите $content, который на тот момент равен undefined и оно впоследствии не обновляется А вот вывод всего объекта current — обновляется. Поэтому после назначения контента в консоли его можно увидеть, развернув объект. И так как это происходит за миллисекунды заметить это, конечно, невозможно. Поменяйте на «afterShow» и увидите разницу.

beforeShow меняйте на afterShow

Немного уместной критики:
1. Не называйте то, что вы сделали - frontend.Те технологии которые вы описали выше, больше подходят к категории профессии верстальщик. Т.к вы просто сверстали макет, подключили к нему скрипты, здесь не нужно быть гением. Знающие люди прикопаются, и буду гнобить, так как "уважают до снобизма само понятие фронтенда". Лучше написать веб-разработчик, или верстальщик - быть верстальщиком в 2019 не позорно, так как во фронтенде это одно из "тру", и большинство "гуру", даже тэги не знают, лепят дивы.
2. В header - текст под описанием сливается с фоном, это очень плохо по юзабилити, обычно за такое отрывают руки.
3. Не надо быть делать 2 тэга header - в разметке. Достаточно один header - и в нем разбить наheader__navigation, header__content - так логически будет более правильно.

В остальном - обычный сайт, не лучше и не хуже. Как из 2010-x.

Откройте исходник яндекса и скопируйте.

Третий невозможен, ссылка в ссылке работать не будет.

Стали бы вы им пользоваться? Если нет, то почему? Перспективно ли это направление вообще и перспективно ли конкретно это приложение?

Минификация кода должна производиться автоматически в процессе сборки. В 2019 году никто уже не ходит куда-то и не делает это вручную. Есть gulp, webpack, parcel и.т.д. - целая куча инструментов, которые могут по ходу дела минифицировать все, что через них проходит. Нужно лишь сказать им - минифицируй! В наше время все, что можно автоматизировать, люди стараются автоматизировать, а ваш сервис - это шаг назад на этом пути.

Влияют специальные мета теги, которые стоят на странице, которую «шерят». Вот пара ссылок, которые помогут вам углубится в эту тематику

https://www.internet-technologies.ru/articles/vazh...

https://valerykoretsky.com/blog/metatags-vk-facebo...

Всё срабатывает. Но вот из-за

$("#changeCityInput").bind("keyup change",

выпадающий список строится повторно: при клике на пункт списка после редактирования инпута последний теряет фокус, в результате возникает событие change.

Слушайте событие input:

$('#changeCityInput').on('input',

Я такие вещи делаю через after и before, я за чистоту кода в html.
UPD1: Забыл добавить для .block { overflow-x: hidden; } , чтобы не было прокрутки.

UPD2: При перестраивании на мобильную версию собственно ничего не уедет.

UPD3: Адаптация https://jsfiddle.net/webirus/z5cbaq91/
Всего 3 стиля переопределяешь и все.

UPD4: Если блок с контентом должен быть как тут dohodnaya-kvartira.webflow.io , то в принципе ничего не меняется. Убираем .form, через after кидаем картинку на .wrapper и двигаем. А блоку .content добавляем z-index. И тогда контентный блок будет на всю ширину.

Убрать z-index у .block1, .block2,
А вообще dropdown должны быть на первом уровне в body и при открытии позиционироваться https://popper.js.org/