iBird Rose

node sass имеет совместимость с разными версиями node. таблица сверху https://github.com/sass/node-sass
либо правь это, либо ставь dart sass

нагуглил https://codepen.io/CreativeSeo33/pen/rxWOWm
но там сломана одна библиотека. починил:
https://codepen.io/ibird/pen/BaYJLRw

$('.block').on('click', function () {
		var id = $(this).attr('id');
	});

тк ты ж уже наполовину сделал через css. зачем тебе js, если можно доделать на css?

:before и :after для img не будут работать

все версии же есть на офф сайте https://www.jetbrains.com/ru-ru/decompiler/downloa...

Тебе нужно экранировать символ
https://qna.habr.com/q/660319

второй вариант

И да, если второй, то как лучше давать классы?

так как внутри этого блока могут быть и другие элементы формы, а не только input. А также они могут быть использованы во многих местах сайта, то лучше выделить его как отдельный блок. т.е. к примеру .form-item

у тебя контент выпирает за границы body. причина в .row
.row нужно засовывать внутрь контейнера. потому что .row имеет отрицательные margin. и их нужно компенсировать через padding. так что суй .row в .container, либо сделай свою обертку с паддингами.

ты можешь это засунуть в dropdown. к примеру так:

только при клике замену текста у дропдауна не забудь сам сделать. чтобы прям как у селекта было

посмотри на верстку и оцени, что из bootstrap'а ты там сможешь применить. сетку, компоненты и т.д.
если нормальный макет еще и сдизайненный по колонкам и различные модалки, табы и пр. сможешь брать из bootstrap, то используй bootstrap.
а если там что-то в виде этого:

то ясное дело тут bootstrap никак не уперся. ты из него ничего не применишь и он просто будет у тебя в проекте место занимать

Называй так, что если ты сверстал проект и прошло несколько месяцев и ты открыл папку images - и смотря на названия картинок ты понимал, где именно ты использовал в проекте эту картинку.
p.s. если по простому - называй так, чтобы было понятно к какому блоку или месту относится та или иная картинка. к примеру есть у тебя блок about-item, где какая то инфа "О компании", к примеру. и там несколько картинок. то называй их about-item-img-1, about-item-img-2 и т.д. Тогда и сам будешь понимать откуда эти картинки и другим будет легче разобраться

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