Маски файлов в Gulp-e?

Можно просто Евгений: плагин main-bower-files берет файлы из файлов bower.json каждого пакета. Секция main, если она есть.
Вы можете в своем корневом bower.json описать секцию override и указать для каждого пакета, какие файлы брать. Всё это описано в документации.

Background-position?

Значение в процентах это смещение левого края картинки,
которое равно = (ширина блока - ширина картинки) * процент
может быть отрицательным, если картинка шире блока

Может ли элемент выйти за body?

Почему картинка выходит за body в котором она находится ?

Потому что ее размер больше ширины body
Ваш Кэп.

Не присваивается font-weight через font-family?

Неправильно.

Правильно:

@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/OpenSansLight/OpenSansLight.woff") format("woff");
  // src конечно добавите все необходимые, просто для краткости здесь один файл
}
@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/OpenSansLight/OpenSansLightItalic.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/OpenSansLight/OpenSansRegular.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/OpenSansLight/OpenSansItalic.woff") format("woff");
}

/* использование */
.open-sans-light {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}
.open-sans-light-italic {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.open-sans-regular {
  font-family: "Open Sans", sans-serif;
}
.open-sans-italic {
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}

Как наглядно увидеть размеры блоков при создании сетки в CSS?

Для FireFox есть хорошее расширение WebDeveloperToolbar. Оно много чего может полезного, в том числе показывать границы блоков.
Вероятно и для Хрома должно быть подобное расширение.

Какие курсы, книги и видео по изучению JQuery посоветуете новичку?

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

Какие курсы, книги и видео по изучению JQuery посоветуете новичку?

Виталий: Отрицая что-либо, предлагайте альтернативу.

Есть элементы списка, как их разместить в ряд по горизонтали?

.one { list-style: none; padding-left: 0; }
.two { display: inline-block; }
/* или */
.two { display: inline; }

Как наглядно увидеть размеры блоков при создании сетки в CSS?

Андрей:
Да ты не пфыкай =) Просто попробуй сделать такую обводку бордерами всем элементам (неважно в какой модели) на странице с уровнем сложности выше "детского".

Нет бы слушать да на ус мотать, что умные дядьки говорят, а он пфыкает =))

Как наглядно увидеть размеры блоков при создании сетки в CSS?

Андрей: Подробности в спецификации. Или в песочнице попробуй примеры сделать. Ты же взрослый =) должен знать как ведут себя различные бокс-модели.

Как наглядно увидеть размеры блоков при создании сетки в CSS?

Андрей: content-box меняет внешние размеры, border-box - внутренние. Оба случая могут доставить проблем.

Как наглядно увидеть размеры блоков при создании сетки в CSS?

* {
  outline: 2px dotted red;
  outline-offset: -2px;
}

Нужно ли прикладывать к резюме свои самые старые проекты?

Встречают по одежке. Прикладывать нужно лучшее. Если старый код хороший, почему бы его не приложить.

JS ключ oбъекта?

Вот тоже удивляюсь.
Можно же картинку прямо в вопрос вставить

Уменьшить кол-во префиксов?

Люди в 2017-м году пишут чистый код, без префиксов =)

Как сверстать "кладку" блоков с отступами между ними, но без отступов вокруг самой кладки?

https://jsfiddle.net/j3ufq1p4/8/

Как сверстать файл из psd?

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

Фотошоп вам верстку не сделает.

Правильно ли я "покрыл" bem классами двухуровневое меню?

Islam Ibakaev: Если они кардинально будут различаться внешне, то возможно. В общем случае - это выпадающее меню. Что в одном пункте, что в другом. Подошло бы более нейтральное общее имя. Для незначительных визуальных отличий логичнее использовать модификатор для единого блока.

Как прописать событие onclick в php коде?

Леонид Резвицкий: шта?
Я говорю - не нужно картинками код выкладывать.
Код выкладывается вот так:

let $link = $('<a/>', {
     'class': 'menu__link',
    href   : item.link,
    text   : item.title,
});
let $item = $('<li/>', {'class': 'menu__item'});
$link.appendTo($item);

Как прописать событие onclick в php коде?

Леонид Резвицкий: не пости в следующий раз код картинками.