Robert-critical-thoughts

https://codepen.io/mrd/pen/yJAkVb - принцип будет понятен.

зачем в 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- может быть оберткой под ваш блок меню.

Недавно такая тема была, делайте по аналогии - Решение

Какую книгу посоветуете к прочтению по css или начать изучение js?

Отложить в сторону книги, взять 3 дизайна в psd - лендинг (одностраничный сайт), корпоративный(многостраничный, с более сложной структурой), интернет-магазин - начать с лендинга и дальше по увеличению:

1. Сверстать ручками, без использования бутстрапа и других библиотек(с учетом семантики, доступности, адаптивности под все экраны, прикрутить несложную анимацию - карусели, popup, разобраться в анимации с помощью css и js(что можно сделать с помощью css, а где лучше написать на js) - в чем профит - (поможет разобраться как работает css без библиотек и фреймворков, начнет развиваться логика построения хороших интерфейсов, как перестраиваются блоки, дизайнерские ошибки, свои ошибки).

2. После первого-второго пет проекта - используете все элементы автоматизации - препроцессоры, сборщики, библиотеки которые вы точно не напишите сами, и пишите интерфейс с нуля в 2-5 раз быстрее - в чем профит - зная, что под капотом, не задавая глупых вопросов, почему иногда проще написать сетку с нуля, чем использовать сетку бутстрапа(в случае если дизайнер придумал "СУПЕР-МЕГО-САЙТ на 100000000 шекелей, не заморачивась о сетке и не думая о тех людях, которые будут верстать его шедевр), познакомитесь с gulp\grunt\pug,sass\scss\less и еще кучи прикладных инструментов.

3. Посадить его на любую из популярных CMS(для лендинга\корпоративного - WP, Modx, Joomla, Drupal, для магазина (WP, Bitrix, OpenCart) - в чем профит - поймете что нужно клиенту на рынке(не в каждую дырку заталкивается SPA(очень много бизнеса работает на стандартных инструментах), как организована работа контент менеджеров, которые наполняют сайты, оптимизация, плюсы и минусы)

4. Проделав все этапы - у вас есть хорошая база(отличный html и css, вы знаете что такое семантика, кроссбраузерность, адаптивность, знаете базу js, jquery и пишите простые скрипты без подключения библиотеки в 100кб, для того что бы вывести в меню "гамбургер" на мобилках.
Дальше вы решаете - либо делаете упор на JS(и углубляетесь в React\Vue, Angular) участвуя в проектах по разработке SPA и становитесь после года тяжкой работы джуном), либо делаете упор на PHP(CMS, Laravel, Symfony и тд и тп) и так же через год тяжкой работы становитесь джуном.

5. Через 3-4 месяца пытаетесь устроится на работу, особо не заморачиваясь на деньгах.

Советую прочитать книгу Кит Грант: CSS для профи - там отлично описываются принципы каскадности, которые нужны. Т.к на большинство сайтов без слез нельзя смотреть. и плюс БЭМ ответом выше.

Переправлять долго, суть такая:
Дополнительная обертка для label и input с flex-direction: column; (что бы выстроились по вертикали)
Дополнительная обертка для textarea и button, тоже самое.

И для сообщения существует свой тэг, не input type="text", а textarea
Label не привязывают к 5 input, обычно label нужен что бы связать его с input по id => for, что бы при клике по label ставился чекпоинт(или курсор), на тот инпут к которому привязан label

Pragma давно устарел

старый способ кеширования. которым кешировали при HTTP 1.0

Картинка на фон, либо если у вас есть psd макет (авокодом или фигмой вытаскиваете линейный градиент и делаете его background). Блок который у вас по центру:

margin: 0 auto; \ display: flex; justify-content:center; align-items:center;

На выбор.

Оптимизация iframe
В статье приведен ваш пример.

2 меню на сайте - это признак криворукости. Правильный путь - переверстать и сделать меню одним для всех разрешений.

Ваш путь - делаете обертку для вашего меню в стиле ~ lg-menu - и как только у вас подходит к нужному вам разрешению, допустим

@media screen and (max-width: 900px) { lg-menu: dispay: none;}

Следовательно алгоритм мобильного меню вам должен быть понятен,

.mobile-menu \ @media screen and (max-width: 900px) { lg-menu: dispay: flex;}

Нужный вам скрипт подключить\отключить в зависимости от разрешения -

<script>
If (document.body.clientWidth>768){
  document.write('<script src=...>')
}
</script>

https://codepen.io/ant-one/pen/XWrxKgm

.head__inner {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;