archelon

в любом порядке.
к теме «фронтенд разработчик» эти книги отношения не имеют.
их полезно (или нет) прочитать просто для общего развития.

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

Тег P для разделения текста на абзацы.
Бывает так, что абзац всего один? Да, бывает.
Бывает так, что абзац (или предложение) всего из одного слова? Вполне.
Вопрос в другом — чего вы хотите добиться, выделяя некий текст тегом P. Что поисковик начнет к нему относиться пристальнее, чем если бы это был div или span?
Что это за текст?
Если контактная информация, то см. микроразметка.
Если фраза "Купи прям щас, а то будет поздно!!!!!", то это т.н. call-to-action, они не для поисковиков, а для пользователей, тут пофигу какая разметка.
Т.е. смотреть нужно по обстоятельствам.

https://biati-digital.github.io/glightbox/ без jquery

нет
только если задать position:fixed
или попробовать помудрить с js

.bth:focus + .text {
visibility:visible
}

на скорую руку такое решение:
вешаем на баттон класс inactive

.inactive {
pointer-events: none;
}

при заполнении проверяем, заполнены ли поля, если да — убираем этот класс

$('#analytics input').keyup(function() {
  var emptyFields = $('#analytics input:required').filter(function() {
    return $.trim(this.value) === '';
  });
  if (!emptyFields.length) {
    console.log('form has been filled');
    $('#analytics .button').removeClass('inactive');
  }
});

woff и woff2
ttf не нужен
https://transfonter.org/formats#browser-support

у вас внутри main блоки с флоатом.
в этом случае для родителя нужно использовать clearfix

#main:after {
    display: block;
    content: "";
    clear: both;
}