WapSter

Вот тебе пример, по аналогии можешь реализовать у себя. Можно еще короче сделать использовав toggle, но я подумал так будет нагляднее.

Примерно, так. Последнее слова в h1 желательно перенести при помощи br

https://developer.mozilla.org/ru/docs/Web/CSS/anim...
https://developer.mozilla.org/ru/docs/Web/CSS/anim...

Вешаешь на весь канвас событие click, получаешь из event координаты курсора, при заданных условиях запускаешь нужную функцию.

Зачем ты к тегу html применяешь height: 100%

https://refreshless.com/nouislider/

FlexBox order или Grid layout grid-template-areas

Вместо alert пропиши код показывающий popup. А данные формы отправляй при помощи "ajax"

Тут лучше не стилями, а js так-как ты никогда не знаешь сколько нужно по высоте контенту. Получи максимальную высоту из всех слайдов, и задай такую же всем.
UPD. Внимательнее глянул твой код. Там оказывается display: none в основе. Стоит пределать на скольжение (все слайды видно, но просто скрыты за границами блока), что бы было без дерганий.

input одиночный тэг не нужно его закрывать. Документацию стоит читать https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Это связано с тем что у шрифта, одинаковая базовая линия проходящая через центр и при равной высоте строки подобные вещи будут выстраиваться относительно ее.

websocket но я не уверен, что будет 100% синхронность по этому делай перерыв между прокручиваниями подольше.

Использовать формулу вычисления процентов

B/A * 100
A = C * 100 / P

где B искомое число в процентах, A число составляющее 100%, С число составляющее P процентов
Твой случай

A = 5 * 100% / 50% = 10
0 / 10 * 100% = 0 // Так как деления 0 на любое число будет 0

Используешь эти формулы и вставляешь в width. Школьная математика ё-моё

В тэге ul может находится только тэг li и никакой другой.

Google: viewport iphone 11

details summary::-webkit-details-marker {
  display:none;
}