approximate solution

Нужно простое переключение между колонками.

Табы
https://www.w3schools.com/w3css/w3css_tabulators.asp
Только в вашем случае переключатель с навигацией нужно будет перенести вниз.

Если это техническое задание - то нужно делать, если Ваша цель устроиться на работу.

Чем грозит использование относительных единиц во всей верстке? - Как минимум в стоимости дальнейшей поддержки продукта. Если допустим я прихожу на проект, который меня просят доработать, и там всё и вся обмазано rem\em - стоимость повышается в 1,5-2 раза.

Для чего лучше всего использовать относительные единицы? - верстка интерфейсов для слабовидящих, по клику button вы уменьшаете\увеличиваете размер элементов, либо текста. Идеально сходится с относительными единицами измерения css.

Для всех других случаев - px с головой. Очень удобно использовать vh\vw для резиновой верстки. Но так же не бездумно.

https://codepen.io/mutedblues/pen/MmPNPG
Анализируйте код, и ищите ошибку.

Я могу настроить webpack и верстать на нем

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

Скажите как именно вы делаете верстку макета и как это происходит в компаниях.

Верстку макета вы делаете с помощью JSX(зная HTML этот вопрос отпадает) и CSS. Визуально делите страницу на компоненты - верстаете.

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

Это не решит вашу проблему, но "причешите" код.

function buildcopy() {
return src([
'app/css/**/',            -----------------------//добавить выборку через * или с указанием файлов
'app/js/**/',              ------------------------//добавить выборку через * или с указанием файлов
'app/image/dest/**/*',
'app/**/*.html/',        -----------------------// убрать слеш после *.html
], {base: 'app'})
.pipe(dest('dist'));
}

Допустим у меня есть макет шириной 1440px

Он и будет центрировать ваш контент на больших экранах, даже если вы смотрите на сайт с экрана телевизора - контент будет "закован" в эти 1440px.

Другой вариант - делать резиновый контейнер, он же container-fluid. Ваш контент будет распределен равномерно по всему экрану, но что бы это адекватно смотрелось - дизайнер должен был продумать этот момент.

Актуально ли ещё учиться вёрстке?

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

Можно ли на сегодняшний день иметь небольшую подработку на вёрстке одностраничников?

Скорее всего нет, судя по моему опыту - одностроничники нужны для скорейшего запуска бизнеса(ворвется или нет), или продажи какого-то сезонного продукта, для таких вещей(а они очень редко поддерживаются) используются таргетинговая реклама, они не продвигаются по СЕО, и их можно в легкую сделать руками на конструкторе за 2 часа.
Если же мы говорим про верстку как работа в интерпрайз, посмотрите на любой проект крупной организации, apple, microsoft, google - везде "верстка", не важно сайт ли это, SPA приложение, либо проектирование программы для конвертации валют, которая не про дизайн.

И если да, то, что лучше использовать? Bootstrap или через flexbox, css grid и js реализовывать всё?

Как правило Bootstap нужен - когда Вы накидываете стандартный 12 колоночный дизайн на 12 колоночную грид систему бутстрапа, если же Ваш дизайнер решил удивить себя и Вас, и сделал дизайн будущего, там уже гриды и чистые флексы.

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

Глупости.

Даже на Хабре была статья с ошибками в коде.

В верстке можно верстать разные способами, один и тот же лендинг вы можете сверстать с помощью - floaf, flex, grid, и раскидать контент 10 разными способами, и это не будет чем-то плохим.

Плохим считается если Вы - берете какой нибудь input, который у вас на 10 страницах сайта один - и пишите стили каждый раз по новой, так как страницы разные(т.е не используете компонентный подход и dry принципы), вот за такое прям сразу надо гнать в шею.

Так как это элемент украшения, то как и все элементы украшения делайте через before\after + у вас повторяющиеся "украшалки", можно создать 2 отдельных компонента следуя практики dry. Делаете 2 стилевых компоненты = 1 горизонтальная линия dashed, вторая полукруг dashed, горизонтальная у вас помещается за блоком с помощью before, а полукруг вы используете в одном месте обычные, а второй через rotate.

Хочу сменить профессию, выбрал для себя frontend разработку

Я бы для начала бы узнал сколько Вам лет, и с какой профессии вы пытаетесь прыгнуть в Веб.

Для каждого возраста, будет свой алгоритм.
Допустим от 18- до 24 - "пока HR видит что вы "молодой и перспективный" - один подход",
если вам 24 - 30( у вас есть около технарское образование, вы работаете в около it-шной компании) - другой алгоритм.
Если Вам 30+ и вы 8 лет проработали менеджером - и тут Вас осенило что вы получаете 50к за целый день работы с козлами клиентами, а где то Петров получает 60к, просто верстая сайтики и пожимая буфера busty blone - тут уже более изощренные подходы.
По поводу курсов написано у коллег, но я бы добавил больше практики с самого начало, сразу брать макеты, и латать дыры в знаниях с помощью крови, слез и гугла.

Прошел обучение Way Up "Веб-верстальщик, начало".
Название попахивает инфоцыганством чистой воды. Когда пишут что в верстке есть где-то начало, то видимо они не хотят видеть конец вашего кошелька.

Только вот не знаю что дальше- стоит ли выбрать их платные курсы и какой именно ?

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

Хочу стать профессиональным верстальщиком

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

HTML5, CSS3, адаптивная, кроссбразерная, валидная верстка, gulp, pug, postcss. база php, база js, webpack, jquery, знания хотя бы wordpress, лучше wordpress+modx, лучше wordrpess+modx+opencart. В идеале если вы хотите получать не 30 тысяч рублей (так так тот стек тянет на 25). То еще и отличное знание js + к нему react+vue. И начинать с 40 тысяч в первый год.

Доброе пожаловать в веб.

Забудьте про фотошоп как элемент переноса макета в верстку - Avocode, Zeplin, Figma вам в помощь. При наведение на блок, автоматически считывается точное расстояние от соседних.