Ростислав Сергеевич

.wrapper {
  width: 90%;

  margin: 0 auto;
  background-color: #fff;
  padding-top: 50px;
}

.topNav {
  height : 50px;
  width: 100vw;

  position: absolute;
  left: 0;
  top: 0;
  background-color: #e85252;
}

После этого ul всё равно не даст .topNav встать в верхнюю точку, поэтому поработайте ещё с ним:

ul {
  padding: 0;
  margin: 0;
}

Смотря где учить.

Здесь в конце каждой главы есть отличные задачки для закрепления.

Если вы хотите изучить gulp, то вот.
А если вам нужно заюзать sass-препроцессор, то вот.

В кратце:
Чтобы изменить css-код через sass-препроцессор нужно:
1. Запустить gulp (Открой командную строку в папке /node_modules/.bin в папке с проектом, затем введи команду gulp).
2. Открыть sass-файл со стилями, внести необходимые изменения.
3 (только с task'ом watch). Перезагрузить страницу.

ЗЫ: Чтобы каждый раз не перезагружать страницу, советую подключить browser-sync (эта штука автоматически делает перезагрузку нужного элемента на странице, а также умеет создавать localhost с сайтом проекта, на который можно зайти со всех устройств в зоне действия wi-fi (если комп подключён к нему по локалке))

JavaScript здесь необязательно использовать. Вполне достаточно media queries

Вот так будет выглядеть код, который нужно вставить в конец вашего файла со стилями:

@media (max-width: 768px) {
	.element { // Селектор вашего элемента
		top: 0;
	}
}

Берёте индекс активного слайда (0, 1, 2, 3) из массива таковых, затем ставите конструкцию switch(можно много if, но это будет выглядеть не эстетично), и, согласно тому, какой слайд активен, меняете цвет текста. Естественно, это всё нужно положить в setTimeot, время в котором выставляете аналогичное интервалу смены слайдов.

ЗЫ: Если не поняли, могу накидать код.

UPD (Накидал код):

var element = document.querySelector('.element'); // Элемент, для которого и будем менять цвет в соответствии с активным слайдом (таких элементов может быть неограниченное количество)

setTimeout(function() {
	var slide = document.querySelector('.slide.active'); // Поиск активного слайда по классу .active

	if (slide.classList.contains('black')) {
		element.classList.remove('black'); // Удаляем класс чёрного цвета для элемента
		element.classList.add('white'); // Добавляем класс белого цвета для элемента
	} else {
			element.classList.remove('white');
			element.classList.add('black');
		}
}, 1000); // Вместо "1000" нужно указать интервал смены слайдов

Оказывается, массив и конструкция switch здесь совсем не нужны.

Есть ЯП под названием JavaScript. Так вот, он обладает абсолютно всеми возможностями, необходимыми для реализации вашей задачи. Может быть вы хотите, чтобы кто-то за вас написал код? - Думаю, вряд ли кто-то станет это делать.

ЗЫ: Почему так сложно загуглить?

UPD: Накидал код:

var navigation = document.querySelector('.nav'); // Инициализируем блок навигации

document.onscroll = function() {
	if (document.scrollTop >= navigation.offsetHeight) { // Если началась прокрутка, то...
		navigation.classList.add('stick'); // Добавляем класс со стилем со свойством position: fixed
		navigation.classList.remove('static'); // Удаляем класс со стилем со свойством position: static
	} else { // Иначе...
		navigation.classList.add('static'); // Добавляем класс со стилем со свойством position: fixed
		navigation.classList.remove('fixed'); // Удаляем класс со стилем со свойством position: static
	};

	if (document.scrollTop == document.body.offsetHeight - document.body.clientHeight) { // Если дошли до низа, то...
		navigation.classList.add('hidden'); // Добавляем класс со стилем со свойством display: none
	} else { // Иначе...
		navigation.classList.remove('hidden'); // Удаляем класс со стилем со свойством display: none
	};
}

div

У вас используется тег p. У этого элемента по умолчанию отступ со всех сторон. Пропишите для всех параграфов:

p {
margin: 0;
}

+ Обнулите отступы у body таким же образом

Псевдоэлементы :after и :before довольно часто используются в вёрстке для добавления каких-либо элементов перед- и после- объекта. Например, можно с их помощью сделать вот такое меню. И даже вот такие эффекты делаются только лишь при помощи этих псевдоселекторов.

if (!localStorage.getItem('item')) {
  alert('В следующий раз этого окна не будет');
  localStorage.setItem('item', true);
}

Работайте над собой. Люди не рождаются усидчивыми. Их делает таковыми жизнь.
Сядьте и поставьте цель: не вставать со стула и не отвлекаться ни при каком условии, пока не завершу проект. Мне это очень помогает