Как в Pug вставить пример кода HTML?

через = выводится просто текст
https://codepen.io/SkiperX/pen/xxbRazK?editors=1010

Как реализовать такое меню на JS?

overflow-x: auto;

Yii2 как использовать html BEM блоки?

Автор имел в виду компонентный подход
Каждый блок в своей папке, а на страницах только инклуды

components
  page-header
    page-header.php
    page-header.scss
    page-header.js
  page-footer
    page-footer.php
    page-footer.scss
    page-footer.js
  product-card
    product-card.php
    product-card.scss
    product-card.js

Откуда появился логотип Хабр Q&A?

Мне тоже не понравилось название и шапка.
Но так более узнаваемо.
Например раньше, говоришь на интервью, что активно участвуешь в жизни тостера, отвечаешь на вопросы, вот мой профиль. А человек подумает, да что за тостер... он может не слышать про такой никогда, и не предать значения.
А Habr QA более убедительно и авторитетно звучит, любая девочка hr поймет что это.
Так же и с другими проектами.
Просто надо привыкнуть к новым названиям.

Как в https://jsfiddle.net/ подключить less?

там sass и postcss только
тут есть less https://codepen.io/pen/

Какой посыл несёт данный тип интерфейсов?

Грубо говоря, это не блоки вида картинка-текст, как на обычных сайтах, а интерфейс.
Примеры тут https://softline.ru/about/blog/20-populyarnyih-saa...
Либо любой шаблон админки, тот же admin lte
Этой статьи должно хватить tilda.education/courses/web-design/designsystem

Обязателен ли Git для front-end'a?

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

Оптимизация шрифта nuxtJS spa?

вот эта иконка

В своих стилях переопредели это правило

[class*=" el-icon-"], [class^=el-icon-] {
    font-family: element-icons!important;
}

или скрой элементы с этим шрифтом через display none, тогда файл шрифта грузиться не будет

Как лучше задать стили через тег или присваивать класс?

Селектор по тегам стоит использовать где контент из wysiwyg редактора. В других случаях это сломается, если изменится разметка.

Какую книгу по JS прочитать?

все читай

Верстка и программирование?

Andrew, Вячеслав Коростин, Вот тут описано что еще нужно.
https://habr.com/ru/post/306716/
Это не значит что верстальщика будут заставлять делать бекенд или прочее, это только для понимания процесса.

Верстка и программирование?

Это какой-то тонкий сарказм?
Или это новый чеклист на позицию верстальщика?

Andrew, Это минимальные требования, иначе будут рисовать и верстать плакаты.

Возможен ли фронтенд без javascript?

да, но на уровне 2000 года

Как стать Junior верстальщиком?

Нужна только практика чтобы стать верстальщиком. Сверстай 20 макетов для портфолио и ищи работу.
В веб кумовство не работает. Родители/знакомые могут подсказать тебе что и как учить, где есть вакансия, побыть ментором, но не более.
Ищи вакансии, где нужна верстка без js фреймворков, зп указывай от 30.
Или есть смысл идти контент менеджером или в поддержку и расти.
План развития верстальщика тут webmasters.teamdev.com

Плюсы и минусы оформления с почасовой оплатой?

Может быть, что весь месяц нет задач. Еще может быть, что на трекере 4-6 часов в день, судя по этому вопросу Стал работать по часам и обнаружил, что выходит 6 часов в день. Это нормально?

Какой плагин тут используется?

Есть ли похожий плагин на javascript

да, react

Как создать свой json файл и получить к нему доступ по url?

это использую https://github.com/typicode/json-server
заливаю на heroku

Реальные задачи JS?

блог, магаз, чат, доска объявлений, соцсеть, crm

Какие бывают фреймворки для веб?

angluar, react, vue .... с учётом того, что они реализуют и серверную часть - это же уже бекенд, разве нет? Разве я могу их отнести только к фронтенду?

Серверный рендеринг вообще не бекенд.

Как уже на собеседовании понять, какое в компании качество кода?

Качество кода вещь субъективная, пока не увидишь, никак не поймешь