WapSter

На данный момент можно в тег ссылки засовывать блочные элементы. А на будущее почему бы не пользоваться валидатором и не задавать глупых вопросов.

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

Без разницы, но обычно button так как для него не обязательно прописывать type

const stickyEl = document.querySelector('.sticky');

window.addEventListener('scroll', e => {
	let corSticky = stickyEl.getBoundingClientRect().top;
  corSticky <= 0 ? stickyEl.style.backgroundColor = 'red' : stickyEl.style.backgroundColor = 'yellow'
});

Примерно так

// .myclass a:before, a:after заменяем на 
.myclass a:before, .myclass a:after {}

На твои стили не смотрел особо, но можно примерно вот так https://codepen.io/wapster92/pen/MWWWYQJ
UPD

src:url('C:/Users/Admin/Desktop/fonts/future.woff2') format('woff2')

удручает(

Как же нынче сложно с документацией, вообще нигде не найти. А стоп вот же она https://github.com/kenwheeler/slick/#responsive-op...

preventDefault

Задай для ссылок фиксированную ширину, тогда они перестанут прыгать. Либо не трогай стили шрифта при ховере.

Во многих редакторах есть функция replace, при помощи которой можно изменять группу найденных строк. В WebStorm cmd+r на mac

Да наследуются, таким же образом как их подключали бы через html (приоритет у последних). @import вреден в плане оптимизации, используйте препроцессоры.

Маска, наложение фона

2gb озу как бы дико мало, система их только сожрет. Сейчас у меня запущен хром в нем 4 вкладки в одной видео больше ничего не запущено, но множество процессов работает в фоне 6.5гб сжирает, система мохаве.
UPD: добавил ко всему запущенный фотошоп(без макета) и VS Code(чистый без плагинов), Vue Cli 8.5гб.

У вас перекрытие слоя происходит, input перекрывает button, такие вещи лучше делать на js, а не средствами css.

Вытащить его из first-div, или убрать из него relative. По другому никак

Основная проблема верстки - изолирование стилей. Как ответили выше полностью устраняет эту проблему БЭМ и css in js

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

Есть такой и такой

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

Вот так это делается

<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>

Кстати довольно легко гуглиться. И смотрите видео адекватных разработчиков, типо Вадима Макеева. Хоть чему-то научитесть Женя Залецкий Александр Осадчий ))