Александр Талалаев

На мой взгляд здесь описано лучшее решение. Советую прочитать все статью, там же можно найти готовые сниппеты кода, а так же ссылки на полифилы для поддержки старых браузеров и ссылки на некоторые библиотеки.

Вот сверстал пример.
Суть:
Левой колонке делаешь направление флекса - колонкой класс хелпер d-flex flex-column
Инпут у тебя в свое обертке, а блоку который должен быть по центру делаешь вертикальные марджины - авто: my-auto, таким образом он будет пытаться занять центральную позицию.

Вы смотрите за изменениями в scss, а как же сам css который компилица после изменений в scss. Вот и выходит что дефакто ничего не поменялось и страницу перегружать не нужно. Добавляй слежение за итоговым скомпилированным css или папокй где он лежит, смотря что за проект будет.
UPD: выше пропустил, что у вас настроена инъекция.
мб взять из оригинала и под вас передалать:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

Советую взглянуть на Select2, в целом хороший плагин для похожих целей.
Насчет исправления опечаток тут сложнее, нужно писать свою логику нечеткого поиска(либо искать готовые решения), это достаточно серьезная задача и скорее всего ее нужно будет подбивать под ваш конкретный случай.
Хотя конечно можно обойтись тупым простым алгоритмом в который будет хард код с забитыми самыми популярными опечатками и автоматическим поиском альтернатив при нулевом результате после ввода пользователя, но опять таки, городов много, варианты на многие сочетания обязательно найдутся.

Добавлять переменную с идентификацией страницы, и ставить класс в зависимости от значения переменной, а потом проверять, типа того:
li(class=(page === "woohoo" ? "active" : ""))

Прям так и пишешь, сравнение изображений. Например
Вот руководство как сделать самому.
Все из первых строчек гугла.

Я думаю вам отлично подойдет API Яндекс карт, у них есть возможность использования и построения собственных карт в отрыве от земной поверхности.
А дальше в базе данных будете хранить id значков, id и координаты объектов, ну и прочие параметры.
Общий смысл работы такой же, как и с обычными яндекс картами.

В самом простом случае тебе нужен nunjucks.
А так можешь использовать сборку типа blendid, там уже есть nunjucks, есть browsersync так что можно быстро и удобно верстать.
У blendid только в Винде небольшой баг(хотя это не у него, а у gulp/yarn), поэтому в package.json можно добавить:

,
   "scripts": {
    "start": "yarn run blendid",
    "build": "./node_modules/.bin/blendid -- build"
  }

Ну и тогда yarn start запустит сервер разработки(browsersync), а yarn run build соберет проект.
Ну и да для всей движухи нужно установить ноду и сам yarn

Валидность не то к чему нужно стремится как к абсолюту, оптимизация, скорость важнее. Поэтому считайте что это плата за оптимизацию, можете проверить любую хоть немного сложную страницу любых интернет гигантов, нигде нет 100% валидности.
Варианты с муляжом, 1 пиксельной картинкой не вариант, это портит весь смысл.
Короче говоря не парься. Стремится к валидному коду хорошо, но не любой ценой.

Сложно советовать не зная конкретной ситуации, но можешь использовать flex модель.
Если задать align-items: stretch; то дочерние элементы растягиваются по высоте.

<div class='container'>
    <div class='child'>Bla bla vla</div>
  </div>

SCSS

.container {
  display: flex;
  align-items: stretch;
  height: 500px;
  .child {
      background-color:red;  
  }
}

Выбирай любой ВУЗ где есть технические специальности программиста, конечно лучше что-то из крутых, больше можно будет научится у хороших профессоров, но даже не самые топовые уже хорошо. ВУЗ даст тебе опыт, понимание многих базовых фундаментальных штук, четкую программу что нужно учить на первых этапах. Помни, что самое важное в ВУЗе это не то как тебя учат, а то как ты учишься. Заканчивать конечно же не обязательно, хотя все же чем дольше ты продержишься тем лучше. Постоянно делай сайты и для группы и для кафедры и для различных ваших мероприятий. Параллельно нужно сделать over9000 заказов из города типа сайта для магазина что продает конфеты, все можно сделать даже за не очень большие деньги. но так ты набьешь руку еще и в практической части, поймешь какие проблемы реальных обычных людей что далеки от технических специальностей, научишься общаться и понимать задания которые не понимает тот кто их ставит и тд и тп.
PS а, и обязательно найди деньги для этого: https://ru.hexlet.io/ , они сегодня одни из лучших в плане обсучения начинающих и не очень программистов. Подход совершенно иной чем у других "научу php за месяц", курсы и задания продуманны с целью прокачки прежде всего фундаментальных и практических штук, а уже следствие этого будет изучения php(ну или другого языка).
Вот как то так.

Если ты про этот плагин https://github.com/alvarotrigo/fullPage.js/ , там есть опции + методы для их последующего изменения. Тебе вроде бы нужно setFitToSection передать false, тогда вернется нормальное управления без привязки к секциям, есть еще отдельные опции для отключения скроллинга по мышке и скроллинга по стрлкам на клаве.
Или ты про стрелки которые на экране показываются?