Александр Серый

gulp-webp-html-nosvg

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

<picture>
     <!-- <source srcset="/img/hero/hero-girl.webp" type="image/webp"> -->
    <img src="/img/hero/hero-girl.webp" alt="" class="img-fluid">
    <!-- <img src="/img/hero/hero-girl.png" alt="" class="img-fluid"> -->
 </picture>

Тоесть в тэг "img" указать картинку с расширением ".webp"
Но это так , чисто для проверки. Удобней все же проверять через F12-> network - не нужно редактировать код "туда-сюда"

Создайте третий package.json в основании проекта. Подробнее тут.
Вот пример содержания package.json

"scripts": {
        "dev": "concurrently \"cd server && npm start\" \"cd client && npm start \"",
        "build": "cd client && npm run build",
        "install": "(cd server && npm install) && (cd client && npm install)",
        "start:prod": "cd server && npm run start:prod",
        "heroku-postbuild": "npm run build"
    },
    "dependencies": {
        "concurrently": "^3.5.1"
    }
}

Прям от сердца отрываю:
1.Jilio Video.
2.Jilio Stories.

Пиши без фреймворков сколько сможешь. Например, сначала напиши TodoMVC c помощью JQuery, или вообще на VanillaJS. Потом пробуй писать приложение какое-нибудь, но все еще без фреймворков. Усложняй до тех пор, пока не возникнет чувство, что может быть это можно делать как-то легче. Тогда смотри тот же TodoMVC с React, Angular/ Vue и т.д.
Для начала с Angular можно посмотреть Tour of Heroes(есть на русском).
По React - Крестики-нолики.
Здесь нечто похожее отвечал.

Можно вырезать самостоятельно, как здесь

scss в помощь

/* =======================================================
                Responsive 5 Columns Grid
======================================================= */
.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

Rem Zolotykh

Здесь проблема даже не SASS, Bootstrap и т.д., а "телеги впереди лошади". Невозможно понять предназначение инструментов не столкнувшись с проблемой, которую они решают! Нельзя понять зачем бензопила если есть ножовка по дереву, пока не начнешь пилить определенные объемы древесины! Да бензопила сложней в понимании и обращении, но ее освоение стоит того...
Вернемся к Вебу. У меня, к примеру, быстро возникло ощущение, что чего-то не хватает в самом CSS и я начал смотреть на препроцессоры. Вам нужно просто продолжать верстать макеты. Через боль со временем начнут проявляться проблемы и возникнет желание что-то ускорить, что-то упростить. Тогда и начинают искать инструменты для этого.
Препроцессоры
1. Сложность будет увеличиваться и захочется, например, писать все для удобства не в одном файла . Тогда станет ясно для чего импорты препроцессоров(нативный импорт CSS лучше не использовать).
2. Обычно в макете несколько цветов, которые повторяются во многих местах. Их можно присвоить в понятные переменные типа $my-green или $my-orange, которые легко запомнить и не искать hex значения. "$my-orange" проще запомнить чем "#FF8C00", не так ли?
3. В макете размеры в пикселях, а нужно верстать в em и rem. На этот случай есть конечно лайфхак с 10px в основе вместо 16px, но миксины по конвертации на все случаи жизни. То есть можно применить "em(18)" и 18px скомпилятся в "1,125em" и не нужен калькулятор.
Не стоить пытаться применить все возможности какой-то технологии сразу. Время придет для всего, но сначала используйте, что считаете нужным именно в данный момент. Попробуйте SASS на уровне "переменные, миксины, нестингы". Это уже будет норм. Рекомендую максимально просто это сделать c gulp и gulp-sass. Чисто для компиляции SASS и без всего остального, пока не созреете на большее.
Boostrap
Не стоить учится верстать с бутстрапом. В нем можно подсмотреть как реализована та или иная штука, просто вдохновиться, посмотреть на компоненты, которые вообще могут быть. Но применять его лучше, когда уже верстать не хочется))) А это будет, когда захочется использовать фрейморк для написания приложения. На что можно обратить внимание, так это что такое сетка(grid) и ее реализация. Вот онa используется много где.
Начать ознакомление можно просто подключив через тэги c CDN . А потом уже можно устанавливать с NPM sass версию, кастомизировать и т.д.. Вообще приступая к изучению любой технологии нужно пытаться сгладить кривую обучения и не хвататься за все сразу.
Javascript
На счет JS лучше CodeWars не знаю ничего. Тут подробней отвечал. Потом нужно учить фронтэнд фрейморки, но это уже совсем другая история...

2 года назад CodeWars помог мне выучить JavaScript. Сухая теория не заходила вообще, а вот с практикой совсем другое дело... Решал задачки 8-7 kyu. На уровнях выше начинаются уже не основы языка, а больше упор на алгоритмы, знание математики и т.д. На 7 уровне не должно возникать проблем точно.
Пишу код для решение на locahost в своем редакторе или IDE. Дебажу в консоли браузера. Когда вижу, что результат похож на правду, копирую код с редактора в окно для решения CodeWars. Проганяю предложенные тесты. Если все ОК, то сабмит, а если нет, то смотрю результаты тестов и допиливаю решение.
Результаты не открываю пока сам не решу. В топовых и хитрых решения других всегда разбираюсь.
Не стоит сильно зацикливаться на определенной задачи, которая не получается... Возможно не хватает знаний языка программирования. Бывает, что не могу понять условие задачи как таковое... Можно немного заморочиться, но если не идет, то смело откладываю на потом. Неудачи снижают боевой дух, а это ничем не помогает.