WapSter

Наизобретают каких-то велосипедов без колес https://developer.mozilla.org/en-US/docs/Web/CSS/@... и есть отличная статья на хабре https://habr.com/ru/company/timeweb/blog/523478/

GSAP

А API которых нет в каком-то браузере babel тоже напишет? Допустим не поддерживается fetch, babel тебе автоматически напишет XMLHttpRequest? Буду очень удивлен если так.

Google chrome => devtools => more tools => remote device. Работает с андройд смартфонами, должен быть включен режим разработчика. Аналогичная фишка есть в safari и iOs. Так же на mac os в xcode, есть симулятор яблочных устройств, которой так же может взаимодействовать с safari. Обычно хватает просто в хроме включить эмуляцию устройства.

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

Все довольно просто. Разбирайся:

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

Ну это зависит от того, что тебе в ТЗ дали. Если нужно поддерживать ie ты никуда не денешься. А то что ie умрет это такое себе. У меня в универе стояли компы с windows xp, на тот момент ее поддержка года 4 была прекращена и единственный браузер был ie. Гос сайты и многие корпоративные должны будут поддерживать ie и после 25 года, так что он с нами еще на очень долго)
UPD у меня в стране есть очень большая сеть супермаркетов "Народный", и даже на их компьютерах по крайней мере у кассиров стоит xp.

Снять шапочку из фольги и забить на фронтенд. Никак.

Именно версию для слабовидящих? Обычно просто доступным его верстают изначально, но там очень много работы по мимо того, что изначально нужно использовать семантические тэги. https://habr.com/ru/post/347478/

Чтобы его четко было видно, так как svg масштабируется без потерь.

https://wowjs.uk/
урок так себе но на твой вопрос ответит в полной мере https://www.youtube.com/watch?v=7gMYtFGjg3s

Слышал о такой вещи как поиск? Загружаются ли элементы, которые display:none?

Зависит от размера сайта. Если стили весят 1мб+ то уже стоит задуматься о разделении. А иначе это особого смысла не имеет. Для spa бандлы весят и более 2мб, ничего как то живем)

.about .man img {
  display: block;
}

Из всего перечисленного только ajax. Gulp и webpack достаточно понять принцип работы, babel вообще учить не нужно, yarn и npm почти одинаковые инструменты запомнить несколько команд и все. Ну а так ajax, json, npm(yarn), gulp (webpack). Хотя если не знаешь, что такое ajax и json стоит сначала выучить js

Один большой, на запросы к серверу время тратится.