Как корректно закрыть модальное окно?

наоборот сделал. Сейчас поправлю

Как корректно закрыть модальное окно?

https://jsfiddle.net/pgqytmw4/7/ - не на тот селектор вешаешь событие (+ почистил код). Но я бы все равно так не делал

Почему не получается получить данные?

api.jqueryui.com/draggable - документация

Почему не получается получить данные?

Естественно ты можешь повесить функцию на любое союытие:
drag, start, stop

Какую книжку выбрать для изучения JS?

Читал Дэвида Флэнагана, хорошая, понятная книга.
Про И.Кантора ничего не знаю.

Как подобрать оптимальный цвет?

https://codepen.io/iamvdo/pen/xECmI - первый попавшийся пример

Как подобрать оптимальный цвет?

гугли
https://codepen.io/search/pens/?limit=all&page=2&q=blur - что-нибудь, да найдешь

Кнопка с вогнутыми углами+border?

Гугли inset border radius
stackoverflow.com/questions/11033615/inset-border-...

Как сделать выпадающее меню, при наведении на пункт основного?

Дмитрий Иванов: все абсолютно верно))
но лучше всегда учитывать такие моменты, я постоянно на телефоне перехожу по ссылке...бесит))
PS. прошу прощение, что столько времени отнял на писанину.

Как сделать выпадающее меню, при наведении на пункт основного?

Дмитрий Иванов: Все правильно, нет события наведения.
Только не совсем понятно, как теперь открыть второй уровень меню не перейдя по ссылке без js? Те при таче сработает событие hover и переход по ссылке.

Почему я это пишу, потому что огромное количество сайтов делает

<li class="menu__item">
     <a href="#" class="menu__link menu__link--arrow" data-name="Прайс-лист">Прайс-лист</a>
     <ul class="submenu">
          ....

через css. Эту структуру невозможно сделать без js.

Как сделать выпадающее меню, при наведении на пункт основного?

И как же сделать без js? И чтобы это корректно работало на тач устройствах.

<li class="menu__item">
     <a href="#" class="menu__link menu__link--arrow" data-name="Прайс-лист">Прайс-лист</a>
     <ul class="submenu">
          ....

Как выровнить абсолютно-спозиционированный элемент заданный в content: " "?

text-align: center;
line-height: 20px;

Как изменить некоторые маркеры в списке (UL/LI)?

через :before сделай маркеры.

Как сделать блок необычной формы с тенью?

Серьезно?) нужно чуть-чуть подшаманить и все получится.
codepen.io/STutukov/pen/wgOyJe - тень к основному блоку я надеюсь добавите.

Как поменять местами 2 div?

xxvxx: есть еще один способ, через позиционирование.
https://itchief.ru/lessons/bootstrap-3/85-bootstra... - на примере bootstrap (работает в древних браузерах, в отличие от flex)

Как сделать плавную прокрутку скролом мыши к элементу?

В чем проблема инициализировать событие не на клик, а на скрол?
codepen.io/STutukov/pen/KaGodN?editors=0011

Поможете разобрать скрипт?

stackoverflow.com/questions/3368578/trigger-a-keyp... - jquery

Почему картинка вылазит за пределы блока?

У тебя так: codepen.io/STutukov/pen/LxgyWz?editors=1000
Добавь еще текста в первый пример и посмотри как растянется первый блок.
Первый блок растягивает второй и третий. Задавай фикс высоту картинке или делай все блоки одинаковой высоты

Как сделать правильный css?

Станислав: Я понял.
codepen.io/STutukov/pen/MJPmwW

Эффект кнопок как в Гугл хром/в проектах Гугл?

Это ripple effect