Как сделать Quiz для лендинга?

R1msk1y, https://codepen.io/FrelAderal/pen/mdMgdOV вот.

Как сделать Quiz для лендинга?

R1msk1y, заново зайдите, я обновил.

Как сделать Quiz для лендинга?

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

Влияют ли 500 элементов с одним классом на производительность, и если влияют, насколько сильно?

oncue, на сильных машинах нет, на слабеньких может. Был случай, при наведении мне надо было блок который на всю страницу уменьшать и трансформом влево, при этом накладывать на него фильтр с блюром, на рабочем ноуте с 64 гигами оперативы и i7 всё великолепно, на слабом с 8гб всё тормозило что трындец.

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

Как разделить фон на 2 картинки css?

<div class="container">
    <img class="img" src="" alt="">

    <div class="text-container">
        <!-- текст -->
    </div>
</div>

.container {
    display: flex;
    justify-content: center;

    width: 100%;
    height: 100vh;
}
.img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.text-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1320px;
}

Как убрать отсуп у заголовка с большим размером шрифта в html с помощью CSS?

В любом случае, настучать надо дизайнеру по голове.

Как убрать отсуп у заголовка с большим размером шрифта в html с помощью CSS?

Никак, изучайте типографику, единственый вариант делать отрицательные отступы.

Влияют ли 500 элементов с одним классом на производительность, и если влияют, насколько сильно?

Антон Литвиненко, Не ровно также, у каждого элемента класс, что добавляет нагрузки при рендере. Сам себя перетроллил.

Как на js поочерёдно задать класс при клике?

уже разобрался спасибо.

Почему только один объект в табе показывается при нажатие?

Дмитрий, там есть css) остальное вы догадаетесь))

Нужно ли при добавлении семейства шрифтов с помощью @font-face указывать значения по умолчанию для font-weight и font-style?

Ankhena, Ну да, в роуминге 120 строчек css кода повлияют на загрузку, даже не смешно.

Почему не убирается скролл?

Ankhena, Ну, а что тогда, и откуда такая категоричность, не все люди юзают css переменные.

Немного с вами не согласен по поводу css переменных, я лично их редко использую с такими целями и большая вероятность что из головы вылетит, тем более что после меня бэк и контент манагер работают, что по сути может усугубить ситуацию.

Нужно ли при добавлении семейства шрифтов с помощью @font-face указывать значения по умолчанию для font-weight и font-style?

Ankhena, видимо мы о разных вещах говорим.
Мне интересно, вы без нормализации верстаете и каково вам? Я честно говоря даже не понял что вы хотели сказать своим постом.
Как грустно жить потому что у каждого браузера свои дефолтные стили? Это вы хотели сказать? Да грустно, наверное тем кто их не сбрасывает.

Почему не убирается скролл?

Ankhena, если задача стоит при нажатии на кнопку вызова модалки и скрытии скролбара, через какие кастомные? если в браузерах различная ширина скролбара, или я вас не правильно понял.
Всё вроде как ясно, вычислил и добавил, при отмене убрал.

Как разобраться в позиционирование в блоках?

vadin322, что бы вы поняли.

Вот по факту на какую структуру вы смотрите, кружочки и тд это фоточки или псевдоэлементы с цветом.

.main {
display: flex:
flex-direction: column;
width: 100%;
}
.container {
display: flex:
flex-wrap: wrap;
width: 100%;
}

.box {
display: flex:
width: 50%;
}

<div class="main">
    <h1>Программа курса</h1>

    <div class="container">
        <div class="box">
            <div>Тут дата</div>
            <ul>Тут список</ul>
        </div>
        <div class="box">
            <div>Тут дата</div>
            <ul>Тут список</ul>
        </div>
        <div class="box">
            <div>Тут дата</div>
            <ul>Тут список</ul>
        </div>
        <div class="box">
            <div>Тут дата</div>
            <ul>Тут список</ul>
        </div>
    </div>
</div>

Можно добавить резиновую вёрстку к адаптивной на действующем сайте?

Alyona_IM, вешают, сейчас делаю для крупной компании сайт, 100 уникальных страниц и хрен знает сколько похожих без того или иного блока , на некоторых есть макет 1440 1024 768 и 460, на некоторых имеется только 460 и 1440, остальное самостоятельно. В общем макет в фигме выглядит как том Война и Мир.

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

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

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

Как побороть схлопывание элементов Grid сетки?

Вот
grid-template-columns: 1fr;

Почему только один объект в табе показывается при нажатие?

Дмитрий, Он же скрин выслал, перепечатайте )

Как скрывать подменю при сворачивании основного меню?

Пропишите в условии если это не та кнопочка или не тот блок и тд

const headerBurger = document.querySelector('.header-burger')

&& ! headerBurger

Почему не убирается скролл?

Vova135798, вычисляете ширину записываете в переменную и по клику прибавляете к боди падинг, но советую не париться, так и должно быть.

Но если прям совсем неймётся

const srollWidth = "вычисляете ширину"
const body = document.querySelector('body')

body = body === srollWidth  ? '': srollWidth

ну и пихаете в клик по той же кнопке.