Serj-One

1.

const browserSync = require('browser-sync').create();

https://browsersync.io/docs/gulp

2. https://gulpjs.com/docs/en/getting-started/async-c... - нужно в задачах возвращать stream return gulp.src... или вызывать в конце callback

3. что у вас делает таск html? если нужно отслеживать изменения в html и делать reload страницы, то

gulp.watch("app/*.html").on("change", browserSync.reload);

в watch вместо html task.

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

gulp.task('sass', () => {
    return gulp.src('app/styles/sass/**/*.sass')
        .pipe(sass({ outputStyle: 'expanded'}))
        .pipe(gulp.dest('app/styles/css'))
        .pipe(browserSync.stream());
});

gulp.task('browser-sync', (cb) => {
    browserSync.init({
        server: {
            baseDir: 'app/'
        }
    });
    cb();
});

gulp.task('watch', (cb) => {
    gulp.watch('app/styles/sass/**/*.sass', gulp.parallel('sass'));
    gulp.watch('app/*.html').on('change', browserSync.reload);
    cb();
});

gulp.task('default', gulp.parallel('browser-sync', 'watch'));

Надеюсь дальше сами додумаете

Внимательно посмотрите на первый скрин, в терминал, потом на второй скрин, туда же. Найдите отличие.

Отличие в том, что во втором случае в ошибке указан стек вызова scss-файлов, а в первом нет. Какой из этого следует вывод? Элементарно - вы компилите header.scss отдельно. В нем вы ничего не подключаете, это нормально, все подключено в style.scss, но сам файл по отдельности так не скомпилится.
1. Подключаемые части стилей принято именовать с начальным подчеркиванием
2. Файлы с начальным подчеркиванием должны быть исключены, не передаваться на вход галпа.

Во втором случае хз, ну наверное нет у вас такой переменной, создайте ее.

Если дизайн разительно отличается, то это эффективнее делать уже не адаптивом, а отдельной мобильной версией.

Правильно ли это?

Откуда нам знать, насколько такое решение оправдано?

возможно есть инструмент как Jade/Pug, типо если мобильная версия то подключить такой-то шаблон?

Непонятно при чём тут Pug, но да - для мобильной версии подключают отдельный шаблон. За это отвечает веб-сервер и код приложения.

Везде искал найти не могу:(((((

Ну после того как поискали везде, можно попробовать зайти на офсайт производителя и поискать там.
ftp://ftp.qtech.ru/xPON/GPON/ONU/QONT-9-4G/

<form class="form-inline">
  <!-- содержимое формы -->
</form>

https://getbootstrap.com/docs/4.0/components/forms...

Картинку задавать не как img, а как div нужных размеров и с нужным фоном. Ну и ещё желательно обе картинки (обычную и при наведении) засунуть в один файл и при наведении только менять смещение фона, дабы она сразу менялась, а не подгружалась новая при первом же наведении.

Хм, так же можно положить две картинки рядом, ховерную поверх и скрыть, а при ховере ее показывать...

display: flex; для .box

Решение:
vertical: true

вот это слайдер (slick 2x2)
А картинка справа - отдельная превьюшка.
превью меняем по клику на слайд и по событию смены слайдов.
стрелки выносим отдельным кодом и подключаем к слику.

ну и заморочки с двумя слайдерами лишнее. Просто меняем картинку и всё. ну максимум можно заморочится с fade-анимацией на картинке (плавно скрыть, удалить, создать новую, плавно показать.)

Любой framework, это набор готовых часто используемых методов, заготовок и т.д. Его задача сократить время разработки. В нем уже реализовано то, что чаще всего используется.
Bootstrap - это css framework + несколько часто используемых js решений.

Как я понял можно работать прямо в нем

дичь. Работать можно с его использованием или без него. Использовать его можно по разному. Можно подключить весь, можно через сборщики собирать только то что требуется по частям (не углубляйтесь пока в это, юзайте простой вариант).

Поставьте Plumber, который позволит не крашится галпу

а картинки точно по такому адресу лежат?



у вас они в css в другую директорию прописаны



исправьте и все будет оке :)

last-child заменить на last-of-type