Как сделать такой эффект в анимации?

Делаете псевдоэлемент от ul.
Задаете ему ширину 100%.
Скругляете его и ul.
На JS выясняете позицию правого края активного элемента.
Задаете right для псевдо через calc.

Или аналогично через ширину.

Как сделать текст в одну строку?

Давид Радин, ну и прекрасно тогда

Как сделать текст в одну строку?

https://webref.ru/css/white-space

Но жду следующего вопроса.

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

Влад,

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

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

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

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

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

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

Петр Сергеев, да не важно, лишь бы 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, так я вам уже написала в чем дело