Robert-critical-thoughts

Немного уместной критики:
1. Не называйте то, что вы сделали - frontend.Те технологии которые вы описали выше, больше подходят к категории профессии верстальщик. Т.к вы просто сверстали макет, подключили к нему скрипты, здесь не нужно быть гением. Знающие люди прикопаются, и буду гнобить, так как "уважают до снобизма само понятие фронтенда". Лучше написать веб-разработчик, или верстальщик - быть верстальщиком в 2019 не позорно, так как во фронтенде это одно из "тру", и большинство "гуру", даже тэги не знают, лепят дивы.
2. В header - текст под описанием сливается с фоном, это очень плохо по юзабилити, обычно за такое отрывают руки.
3. Не надо быть делать 2 тэга header - в разметке. Достаточно один header - и в нем разбить наheader__navigation, header__content - так логически будет более правильно.

В остальном - обычный сайт, не лучше и не хуже. Как из 2010-x.

зачем в body все содержимое еще оборачивают в див? разве нельзя все те же значения задать для боди?

Возможно wrapper который шел после body был нужен для элементов анимированного смещения контента. Обычно такой применяется на десктопном или мобильном меню, когда вы нажимаете на бургер(меню => открыть), слева\справа вылезает блок меню, который двигает контент.

На одном из видео уроков человек сказал, что вся лендинг страница сделана из враперов.

Как правило, страница лендинга должна состоять из смысловых блоков, wrapper(иногда container) очень часто центровщик, либо обертка для стилизации внутреннего контента.
Будет лучше, если вы научитесь грамотно применять тэги для глобальной компановки контента: не важно лендинг это или крупный сайт. В итоге ваша структура в лучшем случае должна выглядеть так

html
  head
  body
    header
         nav
    main
        section                                                                        
        aside
    footer
       nav

Вы можете заменить все теги кроме html, head, body на div, но почему бы сразу не сделать правильно, wrapper у вас будет находится в любом месте в body, для логической связки контента. Допустим глобальный wrapper это центровщик контента, а header__menu-wrapper- может быть оберткой под ваш блок меню.

Все что вы скинули, всего лишь прикладные инструменты, учить их не нужно, это не фундаментальные вещи, такие как паттерны и алгоритмы.
webpack\gulp - вы будете настраивать 1-2 раза, и дальше работать с ними(достаточно понять принцип работы, взять готовые решения, переписать код с готовых решений что бы понять что он делает и тд). Все остальное - не учится в отрыве от проектов которые вы можете делать на досуге, что бы поднимать свой скилл. Условно вы приходите на работу, где люди пользуются webpack - скорее всего внутри компании он уже настроен под конкретный продукт или решение, и вам даже настраивать его не дадут) Так что в порядке ознакомления.
Одназначно ознакомьтесь с git(который у вас не написан), вот он вам 100% пригодится в любом месте.

Все очень просто:
Основной блок: position: relative;
Блок с описанием:position: absolute. bottom: -20px
Картинку можно прописать либо бэкграундом, но лучше просто

position: absolute, top:0, left: 0, height: 100%, width: 100%.