Vlad Feninets

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

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

можно как-то так

if( window.innerWidth <= 640 ) {
	var mobileScript = document.createElement('script')
	mobileScript.src = 'http://example.com/mobilescript.js'

	var mobileStyles = document.createElement('link')
	mobileStyles.src = 'http://example.com/mobilestyle.css'
	mobileStyles.rel = 'stylesheet'
	mobileStyles.type = 'text/css'	

	document.head.appendChild(mobileScript)
	document.head.appendChild(mobileStyles)
}

#karusel, #karusel ul {
   width: 100%;
}

phpstorm пытается рарезолвить домен "css.example"
попробуйте в начале, перед папкой добавить "../"

https://tympanus.net/codrops/
codepen.io
https://codyhouse.co/

а зачем вы по-очередно присваиваете все?
сделайте так:
this.cheapsites = data;

а потом выведите this.cheapsites и посмотрите, что у вас в массиве.

парсите его с помощью встроенного метода parse объекта JSON
var obj = JSON.parse(yourResponseTextFromServer)

и после этого работаете с ним как с обычным JS-объектом/массивом.

------------------

что касается вывода в хтмл - тут масса вариантов, хоть обычным innerHTML

document.querySelector('#somediv').innerHTML = obj.data.text

либо с помощью различных библиотек/фреймворков (React, Angular, VueJS, jQuery, Knockout etc)

можно заюзать filter: blur(5px)
у него неплохая поддержка - https://caniuse.com/#feat=css-filters
отвалится только в IE

как-то так можно сделать

.header {
	....
}

.header::before, .header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.header::before {
	background: rgba(255, 255, 255, 0.6);
	z-index: 2;
}

.header::after {
	filter: blur(5px);
        -webkit-filter: blur(5px);
	z-index: 3;
}

просто указываете background для вашего оверлея через rgba

например

.overlay {
  background: rgba(0, 0, 0, 0.5)
}

можете повесить его на псевдокласс, если не хотите добавлять новый node-элемент

body {
     position: relative;
  }

body::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5)
   }

посмотреть:
frontend-science.com/blocks/subscription/subscript...

почитать:
https://medium.com/@gucol_lu/%D1%84%D1%80%D0%BE%D0...

var picEl = document.querySelector('.pic')
var siteOpacity = document.body.style.opacity

picEl.addEventListener('mouseover', function() {
	siteOpacity = 0.8
})

picEl.addEventListener('mouseout', function() {
	siteOpacity = 1
})

em или rem.
их принцип заключается в том, что они вычисляются относительно родительского font-size, т.е. на определнном брейкпоинте вы можете указать у родителя font-size вместо 16px - 14px и размер шрифта автоматически пересчитается.

различия rem и em заключается в том, что em рассчитывается относительно ближайшего
родителя в DOM (т.е для "l" это "ul"), а rem - относительно "html", поэтому я предпочитаю использовать именно REM

вот демо: https://codepen.io/deluxive/pen/nkHax

если у вас есть какие-то блоки с ошибками - можно проверять их кол-во
если их нет - то одну страничку открываем в новом окне, а текущую редиректим куда нужно

if( !document.querySelectorAll('.error-block').length ) {
	window.open("http://site.com/thx-page", "_blank");
	window.location.href = 'http://site.com/';
}

попробуй заюзать instagram api, у них там вроде приходит ссылочка на кропнутую картинку.
если нет, то юзать какую-нибудь JS-кропалку (их тонны) или можно выводить их прижатыми друг другу (как на пинтерест) - masonry.desandro.com

попробуй поменять server.reload на server.stream()