WapSter

body {

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

section {
  max-width: 600px;
  width: 100%;
  background: red;
  min-height: 200px;
}

Работа с DOM и BOM, асинхронность, азы js (типы, условия, циклы, функции, события)

text-align: center или почитать доки https://getbootstrap.com/docs/4.0/utilities/text/ и да я не работаю с bootstrap, однако нашел..

Обёртка нужна в редких случаях, в основном ее используют, чтобы футер к низу прилепить, но этого делать не нужно, достаточно для body задать класс, и к нему прописать стили. Негативно, если это необусловлено какой либо причиной. Но скорее всего ты неправильно понял, как раз враперы засовывают в heder footer и прочее.

Когда заказывают студии очень актуально, потому-что они не хотят замарачиваться. Говорят заказчику все по макету отстань, нужно было хорошо макет смотреть. На прямую не актуально. Да и методы нынешней верстки позволяют делать ее резиновой, но при этом оставаться идентичной с макетом.

Из всего перечисленного только ajax. Gulp и webpack достаточно понять принцип работы, babel вообще учить не нужно, yarn и npm почти одинаковые инструменты запомнить несколько команд и все. Ну а так ajax, json, npm(yarn), gulp (webpack). Хотя если не знаешь, что такое ajax и json стоит сначала выучить js

<form action="" class="all-products-btn">
					<input type="submit" class="all-products" value="SEE ALL PRODUCTS">
				</form>

обычно это простоа ссылка, а не форма.

<div class="size-list">
										<p class="size-itm">37</p>
										<p class="size-itm">38</p>
										<p class="size-itm">39</p>
										<p class="size-itm">40</p>
										<p class="size-itm">41</p>
									</div>

обозвал списком, но используешь div
Еще бы в консоль посмотрел. В общем для первого раза сойдет. А по поводу вопроса, любое видео по адаптивной верстке посмотри, оно жевано пережевано, а еще лучше статью коих тоже очень много.

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

браузер не грузит лишнии изображения. Это самый правильный и быстрый вариант

Используй квадраты относительно позиционированные, и разверни их как тебе нужно.

Редактировать макет гораздо удобнее и быстрее, чем код.

Готовые решения не охватывают все разновидность дизайна, функционала, многие из них не оптимизированы. И вы противоречите сами себе

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

html/css и есть визуальная составляющая. И еще "фронтенд" это не про html/css, а скорее про js и работу с данными.

Относительным позиционированием с применением хитрого calc, внутрь сунуть слайдер, обёртке задать высоту фиксированную. В общем дофига танцев, но вполне реально.

В песочницах нет готового решения, для этого существуют плагины, библиотеки и подобное. Лишь демонстрация чего-либо и для кого-либо, и это ключевая функция песочницы, а не репозиторий для готовых решений, для этого есть npm, github

А почему бы не почитать хорошую документацию
UPD: touchDrag