Rimidbit

function sumNumbers(start, end) {
  let sum = 0;

  for (let i = start; i <= end; i++) {
    sum = sum + i;
  }

  return sum;
}

console.log(sumNumbers(-5, 5)); // выводит 0

Используется приём из динамического программирования - берёте переменную и на каждом шаге модифицируете её одним и тем же способо, результат записывается снова в эту же переменную. За счет этого происходит "движение".

function scrollingText(str) {
    const upper = str.toUpperCase();
    const result = [upper];

    let current = upper;
    for (let i = 1; i < upper.length; i++) {
        current = current.slice(1) + current[0];
        result.push(current)
    }

    return result;
}

scrollingText('robot');

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

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

Пожалуйста объясните ,как вы понимаете что например 'этот макет' можно сверстать с помощью bootstrap сетки , а 'этот' нельзя.

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

Вот вы открываете макет,на что вы сморите в первую очередь ?

Обычно на экран телефона, ожидая ответ от дизайнера, что бы высказать всё, что я о нем думаю. А заодно уточнить, как "это" по его мнению должно быть отрисовано на уровне браузера...

Как вы понимаете что допустим макет шириной 1920px, в котором 12 столбцов и если вы зададите элементу ширину "col-lg-* " ту которую она занимает в макете,то элемент встанет именно туда куда нужно?

Для этого в макете есть разметка, в т.ч. по колонкам, в т.ч. её можно наложить самому, если очень хочется. По запросу "Photoshop сетка 12 колонок" или прочим им подобным - можно найти очень много всего интересного. Смотрите на сетку и понимаете, что куда встанет. Это в том случае, если внезапно по какой-то причине её там не оказалось.

Или вы добавляете какие то маргины pedding'и к каждому элементу,который не встал ровно + это же надо все высчитывать ,посмотреть отступ который в макете ,посчитать сколько в бутстрапе отступ, а потом добавить/убрать.

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

Я пытаюсь понять что я делаю не так ? Почему мне приходится переопределять стили по 333раза. Хочу научиться пользоваться фреймворком,которые создали люди для людей и ускорить процесс верстки,а на деле получается что я трачу раза в 3 больше времени

С этим я Вам к сожалению не подскажу, т.к. не знаю, что Вы делаете вообще, что бы понимать, что из этого "вообще" может быть "не так".

Может есть какие то ресурсы ,где доходчиво объясняют такие нудные и глупые ошибки?Или может объясняют как правильно делать ,а как нет. И пожалуйста, не нужно говорить "почитай документацию на сайте" .

Документацию читать на сайте, мне кажется ещё рано. Для начала я бы посоветовал почитать что-то более абстрактное, не знаю даже, что бы это могло быть конкретное... Возможно, стоит посмотреть какие-то видео аля "как заклепать сайт на страпе за 15 минут", или что-то в таком духе. Аудио-визуальную композицию, воспринимать обычно проще, чем текст.

Попробуйте так
import { openMenu } from './modules/head'

И добавить в конец файла head.js
export { openMenu }