xmoonlight

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

SEO SEO SEO !!!!
"Ключи", теги, подбор поисковых запросов, грамотная разметка структуры контента в документе HTML5, схема данных JSON-LD....
(это кроме HTML/CSS/PHP/db)
Т.к. лендинг без раскрутки - это как клавиатура без компа!

У меня вариант только с js: xmoonlight.github.io

А "гребёнкой" почему бы не сделать? (2 слоя с чередованием)

Типографика

Хотелось бы узнать, как добиться такого скролла (при скролле в сторону) как мобильном приложении. Как пример в мобильной версии яндекса, в разделе новости есть карусель с рубриками, она скролится в сторону в зависимости от того с какой силой свайп был.

Попробую угадать)))
1. Координата тапа FROM (x1,y1)
2. Время первого изменения координат при тапе (начало действия swipe) (T1)
3. Координата отпускания TO (x2,y2)
4. Время отпускания в позиции TO (T2)
Получаем вектор перемещения и время перемещения = скорость.

И "ложка дёгтя": у стандартных браузеров в WebView очень медленная обработка событий JS :(
Единственное, что могу посоветовать:
1. тегами "гасить" (отключить слушатели событий) ВСЕ ненужные Вам события в web-приложении (чтобы повысить производительность)
2. максимально корректно писать код на "чистом" JS с триггерами слушателей обрабатываемых событий.

Пока что: чем больше производительность смарта - тем лучше отзывчивость UI web-приложения (и его работа в целом).
Постепенно производители от этого избавляются, но ОЧЕНЬ! медленно.

Начинайте отсюда!

UPD: хорошая статейка по HTML5 функциям для мобильного приложения
UPD2: Для установки ярлыка и свойств для запуска Web-приложения на Android: здесь
UPD3: Вот описание манифест-файла для web-app с Mozilla - здесь.

1. Если делаете загрузку (обновление) по SFTP - то загружаются только обновлённые файлы и происходит это очень быстро.
2. Можно поставить TeamViewer и показать на своём ПК.
3. Виртуалка с браузером в режиме киоска и расшаренной для Вас папкой, куда локально будете скидывать новую версию (или можно примэппить папку с хост-ПК на виртуалку).

https://css-tricks.com - смотрите здесь.

Обучение самостоятельно любому умению - это подобно лепке снеговика:
1. Выводите "Hello world!" и начинаете постепенно добавлять новый функционал, узнавая и познавая новый материал.
2. Как только наберёте достаточный опыт в данном разделе, переходите к следующему, и т.д. пока не познаете все основы.
3. Осталось собрать полученные "снежные комья" в снеговика: ставим себе простую задачку с законченным полезным функционалом и используя полученные знания - создаём постепенно новый программный продукт. ("лепим снеговика из комьев")
4. Затем, исправляем свои ошибки и устраняем все недочёты: даём "снеговику" глаза, ведро, морковку и метлу!)
5. Всё! Простая задачка сделана - продукт готов.

Следующий ваш "снеговик" будет гораздо больше и сложнее, а самое главное - дороже!

Я бы по сеткам отталкивался от необходимости реструктуризации интерфейса на заданной площади, а не от каких-то там стандартов или рекомендаций: всё зависит от конкретного проекта.

А решение простое: закрыл тостер и в гугл изучать про SVG и про Canvas.

ради секундной писюльки углубляться?)
надеюс мне заказчик заплатит за несколько суток изучения материала

ОМГ!!! Жалко заказчика....

Ну, конечно... Есть же Toster: спрашивай себе и зарабатывай!
Если кратко: тостер - не делает за тебя задачу, тостер - помогает решать проблемы по мере их возникновения в момент УЖЕ НАЧАТОЙ работы над задачей.

includeHTML + подборочка

svg clip-path

Посоветуйте как можно реализовать такой слайдер?

1. Самому на JS
2. Фриланс
Good luck!