alvvi

Нужно, даже если вы хотите стать просто верстальщиком. Просто в таком случае, вам скорее всего хватит базовых знаний. (== достаточных для работы с разными полезными в дизайне библиотеками).

p. s. Веб-программисты - это обычно бэкэнд-разработчики онли, то есть те, кто разрабатывает серверную логику. Профессионально знать JS должны фронтенд-разработчики, именно они обычно стоят за логикой на клиенте.

masonry.js

codepen.io/Alvvi/pen/QpPpVm
Вроде бы работает и там и там, но точно не скажу, все же этот способ - своеобразный хак, лучше использовать более надежные варианты.

стандартные border'ы

Отслеживать наличие класса можно методом $(element).hasClass('class-name');
Возвращает, естественно, булеове значение.

С помощью JS такое легко можно сделать, а вот c CSS не получится.

Не очень понятен вопрос, и зачем вы вообще используеет animation-direction. Animation-direction: alternate выполнет анимацию, а потом запускает ее в обратном направлении. Reverse просто запускает обратную анимацию. За задержку анимации отвечает animation-delay.

Какого именно эффекта вы хотите добиться? Сейчас у вас зачем-то задан width: 24rem у полосок, а потом вы этот width обнуляете и увеличиваете его до 16rem. Opacity здесь, по сути, вообще не нужна, просто задайте изначальный width как 0rem и применяйте ваши кейфреймы.

Обернуть img и эти самые элементы в обертку.
Задать ей
position: relative
а элементам
position: absolute
и позиционировать их как вашей душе угодно.

А какая, собственно говоря, разница картинками оно или текстом?

Насколько я вижу это просто анимированный div с заданными фиксированными размерами, сверху на него вы можете хоть инлайн svg поместить, разницы не будет.

Если интересует сама анимация, то она есть в source-файлах этого же сайта

.loader__logo--white {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: url(/img/global/omnam_logo-white.png);
  -webkit-animation-name: loading;
  animation-name: loading;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-play-state: playing;
  animation-play-state: playing;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes loading {
  0% {
    width: 0%;
    opacity: 1;
  }
  60% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Если заменить свойство

background-image: url(/img/global/omnam_logo-white.png);

на
background-color: #fff;

то все будет по-прежнему работать.

В документации к плагину указан метод
$.colorbox.resize();
, вызов которого по умолчанию пытается растянуть pop up по контенту.

Опционально, методу можно дать фиксированные аргументы:

$.colorbox.resize({
  width: "500px",
  height: "500px"
});

Таким образом, можно задать фиксированные размеры, вызывая метод на определенном разрешении с помощью jQuery.

Исходя из документации, доступ к элементам так же можно получить через CSS. Проинспектируйте pop-up с помощью инструментов разработчика, чтобы получить нужные классы, затем задайте им требуемые стили в вашем CSS файле. (+используйте медиа-запросы для разных разрешений)

Документация

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

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