Проблема с версткой сайта?

И стили:

Там какой-то легкий бред почти в каждой строке.
Нашла две с половиной адекватные строчки
border: solid 8px white;
border-radius: 24px;
и с натяжкой width: 183px;, если вас устраивает фиксированный размер.
Абсолюты, дикий calc - убрать, остальное переписать.

border-radius: 316px; -> border-radius: 50%; вы же не будете менять пиксели при смене размеров картинки.
margin-top: calc(187px / 2); - если я правильно поняла вашу затею, то он должен быть отрицательным. Но логичнее заменить на 50% трансформ, опять же, чтобы не считать.

margin-left: 10px; - скорее это паддинг блока, а не марджин каждого из элементов.

как можно выполнить эту часть сайта адаптивной

Вот вообще любым из приёмов адаптивной вёрстки: флексы, гриды, единицы от вьюпорта или контейнера в компании с @media или без него.

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

Html верстка по flexbox и БЭМ?

Denis__Web__1, используйте кнопки редактора или оберните код в теги <code></code>

Html верстка по flexbox и БЭМ?

как правильно построить структуру и классы по БЭМ в таком случае?

В каком таком?
Обычно к этой фразе показывают скрин.

Пока у вас в коде одни блоки и всё. И не очень понятно, чем они вас не устраивают, если таковыми и являются.
Абстрактно, по крайней мере одна из оберток вообще лишняя.

Наверное, начать нужно действительно с определения того, что у вас в макете блоки, что их элементы и какие нужны модификаторы. Очень в этом плане помогает документация БЭМа. Прочитайте что такое блок, какие стили можно применять к блокам, а какие нельзя и т.д.

Дальше имеет смысл запомнить, что БЭМу наплевать флексы у вас там или нет. Это же не Tailwind.

Html верстка по flexbox и БЭМ?

Сначала нужно отредактировать вопрос. Нормально отформатировать, обернуть код в тег <code></code>, чтобы он не исчезал и убрать информацию о том, что вы себя считаете разработчиком.

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

Сергей Горностаев, он там в комментариях к ответу признался, что доступ в админку есть и что это, по всей видимости, WP.
Правда, не понятно в чём тогда вопрос - заходи и правь, почитывая документацию.

Как сделать полноценную обводку у clip-path?

Псевдик одного цвета, фигура другого. Или два псевдо, один черный, другой голубой.

Я бы делала вообще не clip-path'ом, а svg уголками и бордерами или тенью,

Как сделать равномерное расстояние в сетке грид?

Как сделать равномерное расстояние в сетке грид?

Взять калькулятор и посчитать нормально размеры.
287+22+287/3 != 376

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

Не могу понять как прижать изображения к правому краю?

Думаю, что если вы обведете рамочкой того у кого space-between, то выяснится, кто именно не прижимается к правому краю (родитель).

Но тут не нужен space-between, обратите внимание на правую картинку - она обрезана, т.е. выходит за край окна.
Дизайнер показал слайдер и его начальное положение. После прокрутки он станет симметричным.

Сначала нужно вынуть этот блок из общего контейнера (если он там) и растянуть на весь вьюпорт.
Потом приделать слайдер. Swiper подойдёт отлично.

Помощь на сайте с CSS с галереей и превью?

Чтобы картинки были в одном размере:
- нарезать их в одном размере
- сделать блоки одинаковых размеров и использовать object-fit для вложенных картинок

Но помнить, что геометрию и пропорции никто не отменял.

Как сверстать подобный блок?

Ещё проще две svg по углам текстового блока добавить. Адаптивно, динамично и всё такое.

Как такие вещи верстаются?

Сергей delphinpro, у меня уже 139 хром - всё показывает ;)
Пока сайт сверстают, хромы обновятся.
С остальными да, надо решать как быть.

Я что-то так, по-детски чисто, радуюсь с этого свойства, как когда бордер-радиус завезли.

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

toffi,

В одном классе я разместил float: right; и clear: both.

float в 2025 году используется только для того, для чего был придуман: обтекания одного элемента другими.
Тут обтекания нет, есть просто два столбца: а это гриды или флексы.

Заодно имеет смысл освежить что делают float и clear и оценить перспективу их совместного использования в таком сочетании значений. Одно из них включает обтекание, а другое запрещает. И вот вы пишете: прижми к правому краю, обтекай слева, но не обтекай ни с одной из сторон. Браузеру будет тяжко.

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

Затейник однако.

Нормальный план: сделать одну таблицу.
План похуже: гриды, сабгриды и display contents для избавления от tbody.

Там разная заливка у заголовка и непосредственно таблицы с данными - поэтому пришлось разделить.

Поддержу Adamos - причина очень надуманная.
Для заголовочных ячеек th.
Ну либо через thead или first-child.

Как сделать скролл для body у таблицы?

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

Теория такая: чтобы был скролл, должна быть ограничена высота. Иначе, с чего бы ему начать скроллиться?

Стоит ли начинать готовиться к перечневым олимпиадам по информатике в 10 классе?

Поддержу вопрос выше: какая цель?

Хотела бы участвовать

А тут уже есть ответ. Если хотите участвовать, то имеет смысл готовиться, если есть пробелы в знаниях.

и впринципе что нужно знать и уметь для этих олимпиад

Без сарказма, только конкретика: хорошо бы знать где поисковик и уметь найти в нём задания предыдущих лет.
Если не получится, то можно сэкономить силы и время, отказавшись от затеи.

Есть для готовый плагин для проверки css-переменных со следующими фичами (см. описание)?

https://stylelint.io/user-guide/rules/no-unknown-c...

Как сделать такую сетку?

Минимум - 5 колонок 2fr 1fr 2fr 1fr 2fr
Большим элементам span 2
Можно 8 колонок по 1fr.
Это на глаз. Нужно, конечно, проверить размеры по макету.

Дублирующийся контент - действительно ли это так плохо?

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

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

Как выровнять крестик?

vlados096zver, как хотите и смотря как вы храните svg

Как лучше всего реализовать данный фон?

Никита Геннадич,

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

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

Нюансов у псевдоэлементов там не меньше перечислено.

Пока нет примера или ссылки на эти нюансы - пустые слова.

Я вам большой секрет открою: такие вещи как иконки зачастую делаются именно вставкой SVG, либо буквально тегом SVG, либо спаном с бэкграундом, представляете

Представляю, так, действительно делали и делают те, кто не заметил, что 2025.

Я всё ещё не понимаю при чём тут добавление ОДНОГО дива в конкретном кейсе.

Вы и не хотели этого понимать.

Но я и не для вас старалась, а для автора и для тех, кто ещё придёт сюда с аналогичными вопросами.

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

С вами прощаюсь.