Rustam Bainazarov

С display: none; обратную анимацию вы не сделаете, а вот с visibility: hidden; и transition повторить это легко:

Если возможные случайные пробелы чистятся на сервере, то:

var validateName = /^\s*[a-zA-Zа-яА-ЯёЁ]+\s+[a-zA-Zа-яА-ЯёЁ]+\s*$/;

\s означает любой пробельный символ (пробел, знак табуляции и т.д.)
\s+ означает 1 и более пробельных символов.
\s* означает 0 и более пробельных символов.

Если есть желание почистить форму от случайных пробелов до отправки, или даже во время редактирования, то ещё это:

value = value.trim().replace(/\s+/g, ' '); //перед отправкой

P.S. Рекомендую почитать про некоторые заблуждение, а также продолжение этого опуса, прежде чем рубить с плеча. Валидация формы - дело тонкое ;)

пагинация называется

1. Есть, обычно в таких конторах на нём все и делают, чтобы потом не сильно запариваться с поддержкой и делать быстрее.
2. Переопределять не нужно, БЭМ и Bootstrap могут жить вместе. Такие вопросы уже задавались, можно поискать. Например: https://github.com/bem-site/bem-forum-content-ru/i...

Есть недостатки у Bootstrap, как и у любого инструмента. На работе чаще всего не приходится выбирать с чем конкретно работать, если уже есть сложившиеся принципы работы. Нужно уметь адаптироваться и вникать в новое, и в «простыни документации».

CSS Grid.

Ни то, ни другое...
Из репо могут скачать проект и использовать, а вас кинуть... а про отправку архива вообще молчу...
Решение - залить на СВОЙ сервер (можно взять бесплатный) и показать заказчику. Другой вариант - открыть доступ к локалке извне, прикрепить бесплатный домен tk и скинуть ссылку заказчику.
P.S. предоставлять доступ в админку не рекомендуется, ибо также можно плагином (например, duplicator, updraftplus) создать архив с сайтом, перекинуть себе и попрощаться с вами.
Передавайте исходник только по факту оплаты или заключения договора.

Вы добавляете скрываемому элементу класс, переключающий свойство display, одновременно с классом, который задаёт изменение прозрачности - поэтому пронаблюдать последнее вы не успеваете. Переключайте display после того, как анимация будет завершена - для этого можно подписаться на событие transitionend. Например.

body { margin: 0 }

Вот примеры посмотри. css.yoksel.ru/css-rays
А вообще на codepen у них много вещей достойных

<button type="button" onClick="window.location.reload();">Close</button>

Тебе надо пробежать по документу и выбрать все текстовые ноды, таким образом ты не затронешь другие элементы и их поведение. Заменяя все ты создаешь новый документ и для него надо заново все инициализировать. Чтоб избежать всего этого надо работать с текстовыми нодами.

function replaceText(text, textToReplace) {

	function replace(nodes) {
  	nodes.forEach(node => {
      
      if (node instanceof HTMLScriptElement) {
      	return;
      }
      
      if (node instanceof HTMLStyleElement) {
      	return;
      }
      
    	if (node instanceof Text) {
      	if (node.nodeValue.match(text)) {
        	node.nodeValue = node.nodeValue.replace(text, textToReplace)
        }
      }
      else {
      	replace(Array.from(node.childNodes));
      }
    });
  }
  
  replace(Array.from(document.body.childNodes));
}

replaceText("{DATETIME}", "___WwW___");

Куки или localstorage
Хранить в виде токена, например, а не просто залогинен или нет.
И проверяться что это за пользователь скрывается за этим токеном - должен сервер обязательно. А не браузер.