coffeehoock

Нужно знать не алгоритмы а подходы , типа bem , тоесть восприятия элементов и блоков на странице как отдельных компонентов , ну ещё в чем разница блочных и строчных элементов , и что такое flex контейнер и фреймворк bootstrap 4 .
А из инструментов рекомендую phpstorm, или visual code.
И конечно же gulp и обязательно его плагин autoprefixer и sass

buble js

в корне проекта создается файл webpack.config.js
там прописываются такие настройки как пути к файлам .

и погуглите на тему webpack Encore и yarn

обычно все исходники js лежат в папки assets и с помощью import из разных файлов собираются ( импортируются ) в одном файле например в index.js

import {render} from 'react-dom'

import './f1.js'
import './f2.js'
import './f3.js'

import coffee from './test.coffee'

при этом у импортируемых файлов расширения могут быть разные

потом этот фай попадает в публичную папку - аналогично и с css .

нот тут нужно поиграть с import так-как при не правелиной настройке у вас к примеру может скомпилироватся jquery в публичный файл 2 раза !