Владислав Безенсон

Внимательно посмотрите на watch таск

gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/*.js', browserSync.reload);

Вы следите за изменениями JS, а при изменении просто делаете reload не запуская сборку.

На сайте Browersync есть документация по интеграции browsersync и gulp

gulp.watch('app/js/*.js', ['scripts']);

А в scripts таск в конце добавьте

.pipe(browserSync.reload());

Например так:

document.querySelectorAll(".someClass");

или

function $(selector) {
    return document.querySelectorAll(selector);
}
console.log($('.someClass'));

Судя по всему у вас проблема с кодировкой. Проверьте, чтобы все файлы были в одной кодировке в теге meta была указана та-же. Желательно использовать utf-8

Мой вам совет - никогда не менять нативный скроллинг. Вы говорите "снизить скорость", а у меня на маке через тачпад скорость прокрутки бешеная. Вы никогда не сможете учесть все устройства и сделать так, как ожидаете это вы. У кого то компьютер с обычной мышкой, у кого-то ноутбук. У ноутбуков тоже куча разных тачпадов, работающих по-разному. Мышки есть сенсорные, типа Apple, есть обычный.

Это была первая причина. Вторая - UX. Когда пользователь хочет проскроллить сайт, он ожидает это сделать с какой то привычной ему скоростью и куда то "попасть". А тут у вас страница улетает, либо наоборот не скроллится (по причинам в первом пункте). Так что лучше оставить эту затею.

Не совсем ясно, о чем вы. Это точно касается разработки? Например, подключив свой андроид телефон к гугл аккаунту, можно синхронизировать контакты с сервером. В Gmail, в разделе "Контакты" можно будет их найти. Есть куча сервисов и приложений.

Вам нужно указать ширину для кнопок и применить text-align: center;

Текст кнопки можно менять с помощью JS или только jQuery?

jQuery - это библиотека, написанная на JS. Логично предположить, что можно менять и с помощью JS :)

Например, так, если брать по ID:

document.getElementById("button").textContent="New Button";

Я вижу так:
1. Располагаете элементы в каком то блоке абсолютно. Этому блоку задаете высоту первого видимого таба.
2. При клике на Далее добавляете класс к текущему табу, который CSS анимацией (keyframes) уберет его и к следующему, который сделает его видимым.
3. Перед анимацией считаете высоту его контента и ставите ее блоку с табами. Она может меняться плавно, если добавить transition на height.

Чтобы не фигачить свои анимашки, можно заюзать https://daneden.github.io/animate.css/

Лично я делаю следующим образом. На примере бутстрап.
Бустрап устанавливается как bower компонент. Оттуда копируется основной style.css файл, откуда все подрубается в мою папку стилей. IntelliJ Idea (и прочие редакторы JetBrains) отличо заменяют сразу все пути. Они должны вести в папку bower_components. Также копирую variables и меняю путь в основном файле. Ну и вот. Как то так)

Для себя я сделал стартовый шаблон и залил в гитхаб. Возможно, будет интересно глянуть: https://github.com/meethemes/MeeStarter

document.referrer

Так вы дропдаун хотите или кастомизированный селект? Селектов не бывает многоуровневых. Уровни могут только пробелами, например, указываться. Никак иначе, потому что select внутрь такого же select поместить нельзя. А если хотите красивое что-нибудь, то попробуйте jQuery Selectric