Как повторить набор анимаций?

Влад,

Не пойму как задать индивидуально задержку в нужном порядке ?

Можно через кастомное свойство.

Но тут, мне кажется, это не поможет и придется каждому задавать свою анимацию.

Как повторить набор анимаций?

Записать всю траекторию в одну анимацию.

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

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

Как сделать все шрифты на странице полностью зависимыми от размера окна?

Георгий Кузнецов,

какой псевдокласс CSS

Никакой. Почитайте что такое псевдоклассы.

Для этого используют @media или clamp (min, max)

Как сделать все шрифты на странице полностью зависимыми от размера окна?

Задать размеры в vw. Или в vmin, vmax, смотря какого эффекта вы хотите достичь.
Если текст заранее неизвестен, то высчитывать на js.
Или использовать готовые скриптики типа fit-text.

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

Я бы вычислила паттерн и сделала бы bg-repeat, как вы и собирались.

Как убрать прыжки текста в input?

Какое волшебное свойство нужно прописать, чтобы пофиксить?

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

Вероятно, что-нибудь типа line-height.

Плавающее либо привязанное всплывающее окно, как эффективнее сделать?

Разбейте задачу на мелкие.
Например:
1. Узнать позицию курсора.
- относительно окна
- относительно блока (если нужно)
2. Задать css свойства для позиционирования попапа.
- как это сделать через кастомные свойства
3. Как обновлять всё это при ресайзе.

Что такое вы имеете в виду под "просто плавающими" из контекста не очевидно.

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

ahillesius, не могу придумать, зачем нужны книги по верстке. Опять же, очень давно смотрела, что есть в магазине, сделала вывод, что сайт-справочник заметно короче и в нем поиск работает. Подозреваю, что сейчас ситуация не сильно изменилась.

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

ahillesius, точно качественно и дорого есть у меня в профиле. Там же есть и интерактивный курс.
Дальше зависит от ваших способностей усваивать и применять информацию.

Вот эта ваша фраза смущает:

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

Когда я разбиралась с этим делом, ютуб только-только родился и там не было такого засилья всякой всячины. Но был обычный справочник. Мне его хватало за глаза и за уши. Сейчас его роль выполняет MDN.

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

ahillesius,

Где-то ошибка в коде или чего-то не хватает ?

Да я же дала выше ссылку. Там прекрасная статья с разъяснениями.

Как задать высоту строки при заданном height у таблицы?

Сменить display на что-нибудь другое, грид, например.

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

Обязательно почитайте: Раз­би­ра­ем­ся с vertical-align.
Но в современном мире для сетки нет нужды использовать инлайн-блоки. Уже придуманы более удобные инструменты - флексы и гриды.

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

Масштаб 100% сделайте в браузере )))

На будущее, делайте песочницу в сервисах типа jsfiddle.net или аналогах, так, чтобы вашу проблему можно было увижеть.

Как правильно выровнять строчный элемент и его псевдоэлемент внутри блока div?

ahillesius,

Я имел в виду псевдоэлемент container_1

container_1::before выравнивается флексом container_1, а не shipping_container.

То есть, если родитель flex , его дочерний элемент всегда block ?

Блочный. Не обязательно чисто block.

Как правильно выровнять строчный элемент и его псевдоэлемент внутри блока div?

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

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

SashaN69, так я вам уже написала в чем дело

Как правильно выровнять строчный элемент и его псевдоэлемент внутри блока div?

/*И почему, если псевдоэлемент по умолчанию inline, возможно проставить размеры height и width ?*/

У инлайновых элементов НЕТ высоты и ширины.
Но в вашем коде он не инлайновый, а блочный. Потому что у него родитель флекс.

Откройте инструменты разработчика и убедитесь в этом сами.

/*Свойство выравнивает псевдоэлемент внутри flex-контейнера "container_1" по высоте */

Это неверно.
align-items выравнивает вдоль поперечной оси. А куда она повернута зависит от flex-direction.
У container_1 получаются два дочерних элемента: span и псевдоэлемент ::before.

/*Свойство Выравнивает элементы внутри flex-контейнера "shipping_container"по высоте - то есть "container_1" и его псевдоэлемент*/

Нет.
Внутри shipping_container только один элемент и это container_1. Псевдоэлементов у shipping_container нет.

Как правильно выровнять строчный элемент и его псевдоэлемент внутри блока div?

А с чего должно быть невозможно? inline можно задавать размеры.

Задавать возможно. Только они не применятся.
Размеры бывают у блоков и инлайн-блоков.
Но не у инлайнов.

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

SashaN69, было бы круто, если бы в песочнице была видна проблема. А не отвечающим добавлять за вас контент.

У вас проблема не с фоном. Это тень у body. А высота body на 1 вьюпорт.