MRcracker

Если очень коротко:
Gulp - когда нужно сделать просто верстку и немного js.
Webpack - когда нужно сделать веб-приложение.

Тема холиварная и поднималась уже много раз
Отличия webpack и gulp?
Зачем нужен Gulp/Webpack?
Чем webpack лучше gulp/grunt?

Обычно gulp используют для сборки верстки, а webpack для сборки js приложений.
Иногда они нужны оба.

Как то так)

document.querySelector('.button__main').addEventListener('click', () => {
  let titleCard= document.querySelector('.Какой класс надо найти').getAttribute('data-title-form');
  console.log(titleCard)
})

Сделать

.block:hover .text {
  display: block
}

И привязать анимацию, вот пример реализации

Отрицательный отступ у row для того чтобы при многоуровневой структуре не суммировались отступы у блоков разных уровней.

<div class="row">
    <div class="col-sm-12" id="outer">
        <div class="row">
            <div class="col-sm-12" id="inner">
            </div>
        </div>
    </div>
</div>

В приведенном примере блок #inner будет по размеру такой же как блок #outer. Если бы у row не было отрицательных отступов, то блок #inner был бы меньше блока #outer на 15px с каждой стороны.

function test(arr) {
  var obj = {}
  arr.forEach(el => {
    obj[el] = el
  })
  return obj
}

test([1, 2, 3, 4, 5]) // {1: 1, 2: 2, 3: 3, 4: 4, 5: 5}

Еще несколько способов, если вам не принципиальны ключи объекта

Object.assign({}, [1,2,3,4,5]);  // {0: 1, 1: 2, 2: 3, 3: 4, 4: 5}

т.е если будет такой массив ['a','b','c'], то получится

Object.assign({},  ['a','b','c']);  // {0: "a", 1: "b", 2: "c"}

Еще аналогичные способы

{...[1,2,3,4,5]} // {0: 1, 1: 2, 2: 3, 3: 4, 4: 5}


Object.fromEntries(Object.entries([1,2,3,4])); //  {0: 1, 1: 2, 2: 3, 3: 4, 4: 5}

Object.fromEntries(arr.map(n => [ n, n ]))

// или

arr.reduce((acc, n) => (acc[n] = n, acc), {})

// или

Object.assign({}, ...arr.map(n => ({ [n]: n })))

// или

eval('({' + arr.map(n => n + ':' + n) + '})')

// или

JSON.parse(`{${arr.map(n => `"${n}": ${n}`)}}`)

Как проверить чётность суммы элементов массива:

const isSumEven = arr => arr.reduce((p, c) => p ^ c, 1) & 1;
// или
const isSumEven = arr => !(arr.filter(n => n % 2).length % 2);
// или
const isSumEven = arr => Number.isInteger(arr.reduce((acc, n) => acc + n, 0) / 2);
// или
const isSumEven = arr => /[02468]$/.test(eval(arr.join('+')) ?? 0);

Получаем вложенные массивы: const result = arr.filter(isSumEven);.

Конструктор:
а) имеет очень ограниченный функционал. даже Wordpress с платными шаблонами где все автоматизировано не сравнится по возможностям редактирования сайта в коде.
б) не имеет интерактивных функций. максимум что в констуркторе можно сделать - это форму обратной связи. то есть, если нужен каталог с фильтрами конструктор зачастую идет лесом.
в) редактирование кода сайта зачастую сбособ гораздо быстрее изменить внешний вид сайта

Вы говорите что изучали HTML+CSS+JS - заметьте, это только фронтэнд. То есть внешнее оформление. Даже обладая этими навыками без знаний серверного программирования вы можете делать сайты намного интереснее чем с использованием конструкторов просто используя подходящую для вашей задачи CMS. Например MODx обладает широчайшими возможностями так как это не ограниченная по функционалу CMS начального уровня (условно выражаясь) а фреймворк, позволяющий создавать функционал сайта, который неспособны предоставить конструкторы, например листание взад вперед позиций каталога, многоуровневое меню какой угодно конфигурации, использование ajax. Конечно хорошо бы для MODx знать PHP и уметь писать под него плагины и сниппеты, но можно обойтись и без него просто зарегистрировавшись в комьюнити с целью поиска готовых решений.

выводить в цикле не правильно

Что выводить? Нифига не понял. Переписал на нормальный лад.

const value = +input.value;
const result = a.find((el) => el.includes(value));
return out.innerHTML = result?.join(' ') ?? false;

const search = 2; // что ищем
for (let property in a4) { // property будет "a", "b", "c"
  if (a4[property].includes(search)) { // a4[property] — очередной массив
    console.log(`Свойство ${property} содержит искомое значение ${search}`);
  }
}

// Свойство a содержит искомое значение 2
// Свойство b содержит искомое значение 2

.toLowerCase()

Для решения задачи важно, чтобы код был читабельным и понятным.

const arr = [1, 2, 3, 2, 3, 4];

const replaceTheSameElementsToX = array => {
    const result = [];
    let coincidence = 0;

    for(let i = 0; i < array.length; i++) {
        array.map(el => el === array[i] ? coincidence++ : coincidence);

        if (coincidence === 1) {
            result.push(array[i]);
        } else if (coincidence > 1) {
            result.push('x');
        }
        coincidence = 0;
    }
    return result; 
}

replaceTheSameElementsToX(arr); // [1, "x", "x", "x", "x", 4]

или тоже самое с помощью методов массива:

const arr = [1,2,3,2,3,4];

const findTheSameNumbers2 = array => array.map((elementOfBaseArray,i,baseArray) => baseArray.reduce((coincidence, currentValue, index, elementAsArray) => elementOfBaseArray === elementAsArray[index] ? coincidence + 1 : coincidence, 0) === 1 ? elementOfBaseArray : 'x');

findTheSameNumbers2(arr); // [1, "x", "x", "x", "x", 4]

У вас тут вообще каша произошла. indexOf не может проверять глобально, поэтому while не выполнится никогда, внутри тоже не надо усложнять ничего, достаточно этого:

arr.forEach((element, index) => {
  const idx = element.indexOf(155);

  if (~idx) {
    console.log(index);
  }
});

Тут прям описан пример вашей задачи.
Ну или так.