Как такое сверстать?

Максим Ленский, я не понимаю, чего вы от меня хотите и какое это отношение имеет к вопросу. Потому из обсуждения выхожу.
То, что не я делал - заявление забавное, но кому-то чего-то доказывать мне неинтересно :)

Как такое сверстать?

Максим Ленский, чего, прости? :) Какой аккордеон, какой не замедленный?

Есть ли плагин для галпа для добавления тега picture?

Ankhena, "если у вас есть проблема и вы решили использовать регулярные выражения, то теперь у вас две проблемы".
Моя идея в том, что "разметить очевидным образом" - это физически завернуть, вроде:

[picture-webp]
<img src="..." alt="" />
[/picture-webp]

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

И нет,

<img src="..." alt="" data-transform-to-picture-webp />

- это неочевидно, да и поглядел бы я на регулярку, которая будет заменять все эти вхождения и работать корректно в edge cases (не нравится мне русское звучание), учитывать человеческий фактор (когда например взяли и скопипастили как есть в существующий, руками созданный picture, опечатались и всё в этом духе).
Я к тому, что вопрос "когда эта штука сломается" - просто вопрос времени. И зачем её делать тогда.
Можно ли микроскопом гвозди забивать - ну, наверное, можно. Стал бы я советовать так делать - точно нет.

Есть ли плагин для галпа для добавления тега picture?

Ankhena, как лишний source в picture добавить - разницы нет почти никакой (почти), но автор не об этом спрашивает. Автор хочет img в picture превратить. Один тег в другой.

Это не всегда нужно, не всегда пройдёт бесследно (можно кучу кейсов придумать, от легаси и стилизации по типу "> img" до глобально заданных для picture стилей. Да-да, у вас в проектах такого, конечно, никогда не бывает), и даже когда нужно - иногда требуется кастомизация (класс добавить обёртке, атрибут, ещё чего-нибудь, а тут вообще не трогай), и чего делать будем? img.parentNode - ой. В сборке что-то сломалось и оно не завелось - ой. Ещё трудозатраты.

Но это даже неважно всё, в 99% случаев никаких проблем не возникнет. Хотя популярность решения
gulp-wepb-html и его удалённая репа как бы намекают.

Основная проблема в том, что разработчик теряет контроль над ситуацией и связность увеличивается.
Вот пришёл я на проект, я пишу img и ожидаю получить img, а оно становится picture. Wtf? Ах, это автор сборки решил, что так лучше...
И получаем штуку, которая совершенно очевидна для автора поделки и совершенно неочевидна для всех остальных. А сколько там ещё таких приколов? Я буду бояться буквы писать, потому что чтобы понять, как оно всё трансформируется, мне надо перелопатить всю сборку и прочие middleware. А я хочу этого, мне за это платят?

Я о чём глобально. Хочешь picture, но не хочешь писать лишние буквы - сделай это очевидным образом.

<!-- Пример для Vue, но аналогичным образом может быть где угодно, хоть в pug через миксины -->
<base-picture :src="/path/to/image.jpg" :webp="true" />

Пишешь picture - получаешь picture.
Любому разработчику на проекте очевидно, что это такое и как с этим работать. И никакой магии. И это хорошо.

Ну понятно, что всё это словоблудие применимо к разработке чего-то большего, чем обычный лендинг, и для большей команды, чем один человек. Пилишь лендос в одно лицо - да хоть на Tailwind пиши, кому это интересно. Допустим, тут именно такой случай, но я всё равно читаю вопрос как "А как отстрелить себе ногу?" и отвечаю, что стрелять себе в ногу - плохая идея. :)

Почему в браузере google chrome добавленные элементы в блок уезжают наверх, когда в mozilla firefox уходят вниз?

"Да эту верстку за неделю можно выучить" - говорили они.
Шёл тринадцатый год в профессии - всё ещё что-то новое узнаю.
Несколько компонентов с псевдобесконечной прокруткой можно сделать лучше.
Спасибо, респект :)

Что это за коммент в разработчике chroma?

Слабо нажать и посмотреть? :)

Как верстать с хорошими показателями Google Speed?

Vinyard Rip,

- Вань, а ты зачем корову через забор перебросил?
- А ПОТОМУ ЧТО МОГУ!

Кому-то хочется делать свою работу хорошо, а не просто так. А pagespeed уже давно отражает реальную ситуацию, а не даёт оценку на основе бестолковых (частично) рекомендаций, как это было в каком-там-уже-не-помню году.

Как задать переменные в SCSS/SASS?

Lineez, да, у вас всё верно, у себя поправил - заплутал в вашей задаче. Здорово, что всё получилось :)

Как задать переменные в SCSS/SASS?

Lineez, никакой порядок здесь не нарушается - вы ваше $a посчитали изначально, далее вы используете вычисленное значение.
Вам для решения задачи просто нужно избавиться от навязчивого желания число поделить на проценты.
Используйте функцию, которую я написал, и будет вам счастье. Это нетрудно. :)

Играет ли роль разрешения дизайна сайта для верстальщика?

Homkadesigner, вы меня слышите вообще? Причём тут ретина?

Оцените верстку по БЭМ?

Ссылку забыли.

Как подчеркнуть многострочный текст через css?

Сергей Явин, да камон.

.blog_title { 
  border-bottom: 1px solid #000;
  display: inline; /* скорее всего не нужно, так как это поведение по умолчанию */
}

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

<a class="container blog_title" href="<?php the_permalink(); ?>">
  <span class="blog_title_inner"><?php the_title(); ?></span>
</a>

.blog_title_inner { 
  border-bottom: 1px solid #000;
}

Есть ли такой плагин в VS code?

Да из коробки вроде работает, нет? Он даже без TypeScript многие вещи подхватывает (касательно JS).

Как определиться с профессией?

Первое предложение прям в цитаты, очень ёмкий ответ на многие вопросы, респект

Где можно увидеть пример магазина на WooCommerce?

hellcaster, что могу посоветовать, если у вас есть клиент, которому нужен магазин на WC:
1) Уточняем, что он от него хочет.
WooCommerce, как и WordPress, даёт технически неграмотному человеку ложное ощущение, что вот если что - обязательно есть какой-нибудь плагин, который сделает хорошо.
Если клиенту важно, чтобы всё было "максимально по-вордпрессовски", то ваш выход - это найти в интернетах максимально похожую готовую тему с поддержкой WC и пытаться её кастомизировать. Ковыряться в чужих WP темах - та ещё мерзость, но я вас уверяю, это проще, чем взять и сделать всё с нуля как надо, если нужно сохранить совместимость со всей WC-экосистемой. Я таких сразу сливаю, но иногда выбирать не приходится. :)
Второй вариант - ему надо чтобы работало то, что нарисовано/задумано и человек не питает ложных иллюзий, что всякими плагинами его проблемы решаются, он понимает, что работу должен делать специалист. В таком случае вы весь фронт делаете на том, на чём вам удобно, а дальше пишете свои кастомные роуты для REST API, где уже с помощью WC под капотом делаете, что вам нужно. Наматеритесь тоже знатно, так как консистентности в его классах/методах нет никакой, документация весьма разрозненная и на stackoveflow по вашим вопросам отвечают "водпресс-разработчики". Но это по крайней мере позволяет обеспечить "со стороны" вид, как будто нормально всё работает.

Почему компиляция происходит с задержкой?

Alex_mersvg, ну, тут мои полномочия всё, просто поделился.
Я бы в любом случае грешил на железки в первую очередь, ибо "иногда собирается меньше чем за секунду, а иногда 20 секунд" - слишком уж велик разброс, чтобы грешить на ПО.

Почему не записываются значения в scss?

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

Для seo: актуально ли влияние наличие классов в тегах h1-h6?

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

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

P.S. В саппорт ПС можете не писать - в рамках взаимодействия с одним из клиентов, у которого был свой взгляд на классы, мы это уже сделали, в числе прочих был и ваш вопрос. На все вопросы о работе парсера обе популярных системы отфутболивают с формулировкой "Мы не раскрываем детали работы поисковой системы".

Кроме того, есть и другие причины использовать классы на элементах - такие как удобство разработки и поддержки. В двух словах: каскад для стилизации - это плохо. Теги-обертки для этого каскада - плохо, причём количество DOM-узлов и уровень вложенности со стопроцентной вероятностью метрики более важные, так как сейчас идёт фокус на перформанс. Выводы сами делайте..

Как кастомизировать интерфейс в Photoshop?

А можно изображения ещё поменьше?

Frontend / Верстка?

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