Почему на странице не выводится изображение прописанное в css коде?

Сергей Изовский, ширина и высота или раддинги где у классов

Как при клике на кнопку менялся цвет у одного из 3х элементов?

Ivan Stroykin, не то смотрел в консоле)
Теперь понял,
state.item = state.color === color ? state.item + 1 : 0;
это выражение проверяет цвет, есть кликаем по синему то счетчик увеличивается, если по другому то счетчик сбрасывается.

Как при клике на кнопку менялся цвет у одного из 3х элементов?

Можно попросить объяснить))
Самое главное здесь это функция changeState(color), которая принимает параметром свойство объекта, то бишь цвет и перезаписывает свойство state.item исходя из условия.
При первом клике условие возвращает false, т.к. null не равен строке(blue) и записывается 0. Правильно?

Далее при втором клике уже будет не 0 а 2, откуда 2?)

Как реализовать, выбор option > функция > input?

благодарю))

Как реализовать, выбор option > функция > input?

благодарю))

Как выровнять иконку с fontawesome?

Rufix, Ну вот, например для кнопки с иконкой и названием можно прописать это свойство и выравнить как угодно, а вот в вашем случае хотя бы посмотреть код и уже смотреть куда что писать))

Как избежать сбрасывания прокрутки после нажатия на кнопку?

Да ошибка была именно в ней. благодарю!)

Как избежать сбрасывания прокрутки после нажатия на кнопку?

Тысяча чертей, какая досада. Какая маленькая деталь, а сколько неприятностей))
Благодарю за внимательность!
Исправил, работает как надо!)

Как создать ссылку на скачивание файла на своем сайте?

То бишь

<a href="\download\text.exe" download>Скачать</a>

Так?
Этот атрибут обязателен для ссылок-скачиваний?

Как сверстать такой текст с картинкой?

Отлично! С флексбоксом приятней, разве нет?)

Как сверстать такой текст с картинкой?

вот что получилось.. вроде как получилось, не правда ли? =) или есть варианты получше?

https://codepen.io/muromtsev/pen/LjZZZp

<div class="social">
	<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/facebook-256.png" alt="">
	<div class="flex">	
		<span>Facebook</span>
		<a href="#">https://www.facebook.com/username</a>
	</div>
</div>

.social {
	max-width: 300px;
	min-height: 300px;
	font-family: monospace;
	padding: 10px;
}
img {
	float: left;
	margin-right: 15px;
	width: 100%;
	max-width: 32px;
}
.flex {
	display: flex;
	flex-direction: column;
	max-width: 250px;
}
.flex a {
	margin-top: 3px;
	text-decoration: none;
}

Как сверстать такую тень?

Благодарю. Выше постом решил задачу.

https://jsfiddle.net/rx0omu87/

Как сверстать такую тень?

благодарю! постараюсь вникнуть :)