Владислав Черненко

Естественно готовые решения это риск, чем популярнее - тем большая вероятность быть взломанным и т.д.
Ситуация с yii будет лучше, а при наличии рук из правильного места будет еще лучше.
Вот только вместо 1-й версии, стоит использовать yii2
Когда набьете руку и обрастете наработками - скорость разработке будет не особо меньше, чем на wp. Но качество будет явно выше. К тому же после Друпал Вам будет не особо сложно войти.

Bootstrap - это золотые, не разрушаемые магические доспехи. Но для человека ростом 1,2.

Эмм в <.p> засунуть пытались? а вообще лучше все в картинку засуньте вместе с текстом

Для себя я решил эту проблему таким образом:

body {
  margin: 0;
  overflow: hidden;
}

body > .scroll-box {
    position: relative;
    left: 0;
    right: 0;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
}

Таким образом блокируется прокрутка страницы, следовательно навигационная панель будет видна всегда. А также 1vh будет постоянным. Прокрутка же появляется, если внутри контейнера .scroll-box содержимое не помещается по вертикали. Прокрутка контейнера никак не повлияет на размеры body. Все лайтбоксы, модальные окна и выдвигающиеся меню помещаются в body для того, чтобы появление прокрутки никак не влияло на верстку этих окон.
PS. Для блокировки паразитной прокрутки основного контейнера во время прокрутки модального окна я добавил в JS:

$modal.on('show', () => $scrollBox.css({ 'pointer-events': 'none' }));
$modal.on('hide', () => $scrollBox.css({ 'pointer-events': 'auto' }));

Нету никаких уроков, нужно просто выставлять отступы так, что бы получилось как в макете. Браузер по своему рендерит макеты и просто брать значения из фигмы и вставлять не достаточно.

подскажите насколько актуальна сейчас в 2020 и в 2021

Это всегда актульно, НО!!! Без фанатизма. Нужно максимально стараться привести верстку к макету. Нет нужны и смысла мучить себя 1-2 пикселями. А так же, не забываем про особенности браузеров в отображении тех или иных стандартных тегов. select, button, input и т.п. Поэтому сначала нужно взять либо какой-то reset или normalize.css

В первую очередь всё зависит от дизайнера. На сколько он любит свою работу и на сколько он профессионален. Мне не попался ещё дизайнер, который нарисует всё на столько ровно и одинаково.
Чаще всего, дизайнер, рисуя кнопку, не понимает, что это за элемент и какие есть правила его применения в отрасли. На одной странице кнопка выглядит так, на другой так, на 3й так, и т.д. И так со многими повторяющимися элементами.

Я всегда списываю это и делаю так, что бы получилось одинаково везде. Пока никто никогда не жаловался.

Следствие чего, не имеет смысла для каждой страницы делать кнопку разной. Достаточно просто привести её к средним значениям.
Точно так же бывает с сетками. Либо её вообще нет, либо имитация.

P.S. Это не прописная истина, это мой подход в работе, который выработался за мою долгую практику. Я тоже пытался делать попиксельно, но это лишняя трата времени и своих сил.

Для определения состояния поля используйте псевдоклассы:

:foucus
:invalid
:valid

Для установки иконок внутри поля справа, используйте абсолютное позиционирование на сами иконки и селекторы соседей, чтобы выводить те или иные иконки с опорой на состояние полей.

HTML+CSS+JQUERY

Тильда - такое говнище, жесть. Лучше на юкозе сделай.