Как сделать mixin меняющий размер круга при уменьшении экрана?

https://codepen.io/AnnaSummer/pen/PoRjdwo

За пропорции блока отвечает свойство aspect-ratio. Если поддержка недостаточна, то хак с паддингом (гуглится и используется в моем примере). Так что высота вам в любом случае лишняя.

А вместо миксина css функция clamp.

Как зафисировать ширину div блока в "px" для bootstrap 5?

flex-grow и flex-shrink отвечают за подобное поведение

Правильно ли использовать position absolute & relative в верстках?

Меня попросили сделать фон из текста (два больший под rotate) и flex + justify-content: space-between, но изза разной ширины элементов они стоят не ровно, поэтому я использовал позиционирование.

Без картинки сложно понять что попросили и без кода в песочнице codepen.io сложно узнать, что вы сделали.

Раз ругали, то вероятно есть решение без абсолютов.

absolute (для родительского блока) и relative (для дочерних), правильно ли я поступаю?

Обычно наоборот.

или же настройки фона из элементов (не background)

Веселая фраза. Фон, но не фон.

Если "фон" вылезает за границы элемента и нет родителя, которому было бы удобно пристроить этот фон, то да, абсолют для псевдоэлемента вполне подойдет.

Как сделать таблицу на flex?

Как сделать таблицу на flex?

Вас кто-то заставил делать это флексами?

Или вы просто любитель садо-мазо?
Задайте фикс высоту и еще оберточку, будут вам флексы.

Но зачем? Зачем делать флексами, если это классическая элементарная задача для гридов?

Как сделать такой же список?

Yes It's matrik, https://codepen.io/AnnaSummer/pen/KKoqZpW
Дальше можете играть в gap, justify-content и другие размеры.

Как сделать такой же список?

Yes It's matrik, что-то я вообще не понимаю или не вижу проблемы.
8 элементов в списке, 4 столбца одинаковой ширины. Если они вдруг разной ширины, то через nth-child.
Гридом тоже самое, ширину какую угодно, всё равно один ровно под другим будет.

Расчет rem в десктопном сафари?

Tupic123, такая настройка есть не только на маках. Соответственно, у любого человека может быть установлен минимальный шрифт.

Можно ли это как то "превентнуть" ?

Сначала подумать, а нужен ли rem и имеет ли смысл его использовать так, как вы его используете.
Если всё таки да, то пересчитать не от 10, а, например, от 16.

Как сделать такой же список?

Флексами или гридами.
Что именно у вас не получилось?

Как обойти пароль на телефоне?

(не подскажете, кстати, как их сгенерировать? Нужны 6-значные от 0 до 9)

как-то так и сгенерировать
000000
000001
000002
...

Как убрать одинаковую высоту Flex блоков div?

Замените flex на columns.
Или используйте скрипты типа Masonry.

Как наложить полосы прогресса на друг друга?

Danya Wyse, с виду отлично получилось

Как удалить неиспользуемые стили на сайте?

oksanatkachik094, тогда близко к "любой из найденных в гугле"

Как адаптировать сайт, если в макете не все версии?

Как действовать в такой ситуации?

Придумать самостоятельно.

Нормально ли делать всего три брейкпоинта (десктоп, 768px, 320px) или нужно делать больше, чтобы сайт растягивался всегда, а не только переключался на этих состояниях?

Должно хорошо выглядеть при любом размере вьюпорта.
Нужна ли резина в промежутках указывают в ТЗ.

Я так понимаю, что если мобильная версия есть, то делаю mobile first

Желательно mobile first, даже если у вас нет макета для мобилки.

Но у некоторых компаний в ТЗ написано desktop first. Поэтому имеет смысл уметь в обе стороны.

Почему не работает сепаратор через псевдоэлемент?

Он работает.
Так, как вы ему сказали.
Сделали псевдо блочным => всё, что после него перенеслось на новую строку.

Замените на инлайн-блок или задайте флекс или грид родителю. Либо прибейте абсолютом.

Я сделал стрелку на которой текст, в отдельном документе работает, на сайте нет, что ей мешает?

Вы ей задали z-index -1 и она провалилась под всё содержимое.
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Задайте z-index 0 для arrow.

Но вообще, такие стрелки делаются псевдоэлементами. В разметке они мусор.

Как сделать чтобы при фокусе/ховере элементы навигации не двигались с изменением font-weight?

На css-tricks была статья как это делать с помощью псевдо, загуглите.

Или нарисовать тенями псевдожирность. Не всегда это красиво выходит.

Как наложить полосы прогресса на друг друга?

Владимир Юрченков,

ну тут же придется еще z-index тогда менять.

Он и без js не плохо меняется.
И без динамики можно элементы поставить в нужном порядке в разметке и z-index не понадобится.

Как наложить полосы прогресса на друг друга?

они встают друг за другом

Вы же сами задали им flex. Они и выполнили то, что вы попросили.

Замените на гриды и каждому спан укажите занимать одну и ту же клетку.

Владимир Юрченков,

В общем одним css тут не обойдешься.

Это почему это?
JS тут нужен только если данные как-то в динамике меняются.

Как в grid layout количество столбцов привязать к количеству блоков?

Ankozar, просто display:flex и flex-grow: 1 детям.
Гридами с помощью grid-auto-flow: column;

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

Как удалить неиспользуемые стили на сайте?

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