Почему выводиться 10 раз 10?

Если сложно понять, рекомендую помедитировать над различиями:

for (let count = 0; count < 10; count++) {
  setTimeout((function() {
    console.log(count)
  }).bind(this), count*1000);
};

...

for (let count = 0; count < 10; count++) {
  setTimeout(() {
    console.log(count)
  }, count*1000);
}

И ваш вариант

for (let count = 0; count < 10; count++) {
  setTimeout(function() {
    console.log(count)
  }, count*1000);
}

Почитайте теорию по bind и стрелочным, замыканиям, асинхронности - если считаете, что вам это нужно.

Полезно ли долго (и вообще) «велосипедить» в программировании?

Антон Р., на мой взгляд, сайт не готов, есть баги, поклацайте и сами убедитесь. У меня в хроме сайт не прокручивается стрелками с клавиатуры, когда страница полностью загружена. А на мобильном меню навигации плохо работает - не прокручивается, нет ховер-эффекта. Урлы строятся тоже как-то странно. Слайдер на первом экране не листается, хотя может там просто нечего листать и тогда непонятно, для чего там кнопки листания появляются.

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

Попробуйте сделать свой пет-проект. Сможете увидеть свой продукт с двух ракурсов: заказчика (владельца продукта) и разработчика. Это поможет прокачать скилл и понимание темы гораздо быстрее велосипедирования бесполезных слайдеров.

В каком порядке это учить?

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

Аналогия с молотком и гвоздем убедительна, но я имел ввиду нечто другое.
Если вы пишете консоль.лог(привет мир) - из технологий вам достаточно консоли браузера.
Если вы оживляете админку системы управления, то вам уже понадобится больше инструментов. Тут уже многое уместно использовать, в зависимости от тех. задания.

Если вернуться к аналогиям, то тут про то, что вы собираетесь строить, используя молоток и гвозди.
Для чего вам забивать конкретный гвоздь в конкретный брусок?
Если собираетесь устроить Банды Нью-йорка во дворе, то может гвоздь с бруском это уже конечный продукт. Но в других случаях это средство, а цель.
Сколько таких брусков понадобится для полного строительства, 100, 1000 или миллион?Непонятно.
А если собираетесь строить дом, то вы вряд ли захотите самостоятельно отливать шлакоблок, стекло для окон, ходить в лес за деревом, самостоятельно его рубить, затем распиливать на брус.

Вы интересно реагируете - буду учить все или ничего).

Работать с npm вам скорее всего придется, yarn по желанию - освоите одно, со вторым проблем не возникнет.
Автоматизация задач действительно упрощает жизнь, но если нет опыта работы без сборщиков, сложно будет понять, на сколько они чудесны.
Попробуйте Галп, например по скринкасту Кантора. По пути вы шапочно познакомитесь с json, npm, node.js. К тому же у вас появится собственная сборка с полезностями. Займет это 1-2 дня.

Как сделать линии в перспективе (формула)?

AleBenEtoDanilaIneedHelp, какая формула? Она у вас уже в примере есть - обычный цикл. Просто переносите отрисовку на канвас, а дивы и css убираете. В цикле рисуете линии и смещаете по осям каждую итерацию на сколько вам нужно.

Почему числа выводятся начиная не с 0 а с 1?

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

Почему числа выводятся начиная не с 0 а с 1?

nekiystranger, на будущее рекомендую читать описание ошибок, когда что-то не работает. Это здорово облегчает отладку и углубляет понимание языка.

Как сделать так, чтобы по нажатию на блок менялись background?

Nikolay S., это просто для примера же) Зато человек, когда будет читать, узнает что можно и так.
Может он учится по древнему учебнику или курсу нулевых годов и совсем не знает, что многое поменялось-добавилось. Вот заодно и тонкий намек оставил на нововведения)

Как сделать, чтобы при нажатии на блок выполнялась функция, где из этого блока берётся фон и передаётся в другой блок на JS?

alexkomp, снимаю шляпу перед вами)

Как сделать, чтобы при нажатии на блок выполнялась функция, где из этого блока берётся фон и передаётся в другой блок на JS?

alexkomp, сейчас пригрузили конкретно.
А что мешает класс добавить?
Если очень пригорает, пройтись по DOM-дереву с самого начала и прям к нужному элементу) Но это жуткое извращение.

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

вот идете вы по DOM-дереву, начиная c document.documentElement и дальше-глубже к нужному блоку.
Вешаете обработчик на галерею.
Если клик идет по превьюшке, смотрим в свойство style, обрезаем его и вытаскиваем урл на картинку.
Идем по дом дереву к большой картинке.
Вытягиваем свойство style, разбираем на куски и подставляем урл нужной картинки.
Как-то так наверное.

Но лучше все же сделать по-человечески)

Разработка на Freelance?

Denioo, у меня на фрилансе другой опыт.
Часто обращаются сугубо по фронтенду. Бекенд уже написан или дописывается, апи сделано и нужно делать интерфейс. Часто хотят человека с глубоким знанием фреймворка, на котором решили пилить проект. Это не прихоть, а экономия ресурсов. Опытный человек напишет быстрее и качественнее, чем тот, кто никогда с ним не работал.
Другой вариант - лендинги, там вообще ничего не надо из серверных скриптов практически.
Третий: хотят сайт на cms, очень часто WordPress. Тоже не сложно, если навык есть, за пару вечеров можно разобраться в том, как делать все распространенное. А функционал уже реализован в плагинах, достаточно настроить или подпилить. В общем, мне оказалось достаточно знать шапочно бекенд.

Думаю, у спеца по бекенду будет ситуация наоборот: фронтенд ему не так чтобы нужен. Может пару библиотек для быстрого прототипа - показать, что и как работает например.

Да и по логике вещей, 1 человек-fullStack будет работать дольше чем 2 профильных человека frontend и backend.
Эти двое сделают задачу даже больше чем в 2 раза быстрее. Потому, что шарят глубже в рамках своих компетенций. А время - самое ценное, что вообще может быть.

ФулСтек это прилично, я согласен, но все равно есть упор в ту или иную сторону. Где-то человек шарит глубже. Или не шарит, учит ДжиКвери и пару десятков плагинов на все случаи жизни и все - я знаю кунг-фу.
А потом на фронтенде подключаются несколько библиотек, чтобы сделать fadeIn() и hello world;
Или учит человек Ангулар и потом все пилит на этом Ангуларе, и не важно, подходит или нет, и нужен тут вообще фреймворк.

Если, например, php обновляется раз в пол века (ага, я сильно перегнул), то js практически каждый год. Выходит что-то новое, обновляется старое из библиотек и фреймворков. В общем, с js не получится выучить и забить.

В общем, я считаю, что деление по специализациям это классно для всех. Потому что экономит время.

Как сократить такое условие?

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

var el = document.querySelector('.layout__body'); 
var names = "h1, h2, h3, h4, h5, h6, p, img";

function doSomeEpic (element, tags) {
	if (element.previousSibling !== null) { 
		console.log('PrevSib: ' + element.previousSibling.nodeName);
		
		if (!tags.split(', ').includes(element.previousSibling.nodeName.toLowerCase())) {
			console.log('Ура, заработало');
		}
	}
}

// дальше вызвать функцию doSomethingEpic(el, names);

Не совсем понимаю, для чего вы используете сприд-оператор, если это какая-то оптимизация, то я не в курсе).
Но и такой вариант тоже работает, попробуйте заменить часть tags.split(',') на [...tags.split(',')]

На счет плодить переменные под массив - в текущих реалиях это экономия на спичках. Хотя, скорее даже на вдохах)
В общем лишнее это, на мой взгляд, но ведь на вкус и цвет все фломастеры разные)
Можно просто после того, как массив names будет не нужен, очистить ссылку names = null;

Как "допилить" скрипт для открытия-закрытия блока?

при клике пройтись циклом по всем пунктам, и если 'open', убрать. Потом октрывать пункт, по которому кликнули.

Где искать frontend коллегу-напарника для удалённой работы?

Звучит интересно. Я фронт-енд'ер. Сейчас пытаюсь заняться чем-то похожим на то, о чем вы пишете. Делаю для человека сайт в свободной форме: без макетов, без ограничений и каких-либо правил.
В этом есть и проблема: например, я не дизайнер и не умею делать красиво без макета. Умею прототип и структуру, а вот красиво пока не выходит. Но это уже второй такой проект, и думаю получится лучше, чем прошлый монстр.
Вторая проблема: нет ограничений - можно вечно копаться в этом песочке, ничто не остановит, кроме голода)) Нет дедлайнов, нет стека технологий. Но есть и плюсы: никаких старых браузеров))

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

Похоже нужен либо опытный спец, который уже курил подобные задачи и знает как что делать. Либо начинающий, но достаточно проактивный человек, способный и генерировать идеи, и планировать их реализацию, и все это дело воплощать в жизнь.

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

Я веду к тому, что одни уже как бы и устроились, а вторые вам скорее всего не подойдут. Поэтому и сложно.

По поводу где искать: пробовали телеграм? Некоторые профильные каналы публикуют вакансии по сносной цене.
Можете статью куда-нибудь написать: рассказать о своей работе, задачах и о том, что в команду нужен человек на фронт.
Можете еще раз пробежать по биржам фрилансеров, мало ли.
А можете найти человека, который займется для вас поиском нужного человека за гонорар)) - Это уже у меня фантазия играет, хотя кто знает.

В любом случае придется перелопатить гору кандидатов. Рекомендую составить тестовое задание и шаблон интервью.

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

Sass не компилируется с css gulp4, в чем проблема?

VVS10, Я тоже не вижу ошибки.
Хотя, может в самом запуске?

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

Не пробовали задачу sass вынести из параллельного запуска, а запускать перед bS и watch?
gulp.task('default', gulp.series('sass', gulp.parallel(''browser-sync', 'watch')));
Но в этом варианте Галп нас обругает за то, что browser-sync еще не запущен, ведь в задаче sass указана команда перезагрузить сервер.

Это все гадание пальцем в небо, а давайте вместе попробуем нужную задачу изменить так, чтобы заработало. Я начну, а вы протестируете, если будет работать, сможете адаптировать решение под свою сборку.

// ! Добавляем необходимые require

gulp.task('sass', function() {
  return gulp.src('catalog/view/theme/apple/stylesheet/stylesheet.sass')
    // Все то же, что и в вашем примере
    .pipe(gulp.dest('catalog/view/theme/apple/stylesheet/')); // Конец задачи
    // Релоад перенесем к серверу
});

// watch - следит за изменениями в sass файлах, когда что-то меняется компилирует в css
gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/apple/stylesheet/**/*.sass', 'sass');  
       // Поскольку запускаем единственную задачу, параллельный запуск ничего не принесет.
  });

// browser-sync имеет собственный вотчер, чем мы и воспользуемся
// будем следить за изменением самого файла css
gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: "http://localhost:8888/opencart3/",
    notify: false
  });
  browser-sync.watch(`catalog/view/theme/apple/stylesheet/stylesheet.css'`).on('change', browser-sync.reload);
});

// Сборка
gulp.task('default', gulp.series('sass',  gulp.parallel(''browser-sync', 'watch')));

Так цикл работы прозрачней:
gulp default -> Компилируются стили -> Инициируется локальный сервер и наблюдатель. Наблюдатель следит за sass файлами, его задача чтобы файл stylesheet.css всегда был свежим, запуская задачу sass по необходимости. Сервер следит за файлом stylesheet.css и перезагружает страницу, когда он изменяется. -> Пишите код, Вотчер замечает изменения и компилирует стили, Сервер перезагружается -> и так по кругу.

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

HTML/CSS. Как убрать расстояние между объектами полностью?

Ernest Avakian,
Если интересно чуть лучше познакомиться с html и css, посмотрите сайт: htmlacademy.ru/program там прикольные задания, где то в середине программы есть урок как раз по созданию разных менюшек. Проходить можно сразу, не обязательно все уроки делать с начала.