Арсений Матыцин

В примере на лицо проблема вложенности. Чисто теоретически можно оформить все в одной строке на флексах, которую можно сортировать для специфического отображения на десктопе и на телефоне (порядок лого, выбора языка и всего остального).

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

Край — дублировать что-то. Например один и тот же выбор языка показывать вне блока с навигацией на телефоне, и внутри блока с order-ом на десктопе). Дублировать его будет дешевле, чем всю навигацию.

Ну а если под рукой доступен какой-нить JS-фреймворк, то совсем край можно просто рисовать разные компоненты (генерировать DOM) в зависимости от разрешения.

В вопросе ответ: flex-grow. Но судя по постановке вопроса, у тебя с этим плохо, так как ничего сверхсложного и некрасивого в этом нет.

В качестве альтернативы можно использовать calc(100vh - [headerheight]), которое необходимо модифицировать под существующие условия, но корректно будет работать только, если шапка фиксированная, в противном случае необходимо задействовать JS.

И чем дальше, чем хуже относительно максимально корректной реализации на флексах.

Ты можешь вложить span (строчный элемент) внутрь h1 (блочный элемент) и оформить его внутри задав свойства, например flex-элемента.

На проверке валидатором оно пройдет, как валидное, span можно вкладывать в h1. Но по сути это полнейшая херь. Оптимальнее не делать так, или завернуть элемента внутрь дива, и уже h1 модифицировать, как, скажем строчный элемент на уровне стилей.

1. Вложить 2 блока с разными фоновыми цветами.
2. Использовать линейный градиент.
3. Ольга: «Использовать псевдо-элемент с цветом + фон у самого блока»
4. Использовать SVG, его можно прикольно анимировать.

Отрицательные отступы на размер внешних сделай.

Открой консоль (внизу слева) и ты увидишь, что запрос по нажатию на кнопку происходит и прилетают данные. Осталось вывести.

UPD: после получения данных не происходит запуска отрисовки. Скрипт никогда не выведет новые данные, хотя их получает.

1. Позиционированием + flex (чтобы выровнять по центру).
2. Просто скрывать вторую кнопку по клику, и тогда не надо ничего позиционировать.
3. Присыпать это все JS.

Дешево и сердито, использовать JS-фреймворк с роутами (Vue\React...). Можно и без роутов, на компоненте, тут не столь важно.

Долго и скорее всего не будет смысла — на JS без фреймворка: получать event.target и все несовпадающее элементы убирать. А этому давать класс, который раскрое скрытую информацию, или на JS добавит откуда-то (объекта в памяти или по get-запросу в API)

Не указывай фиксированные размеры, если необходимо пройти проверку на переполнение. Указывай минимальный размер через min- свойство.

https://developer.mozilla.org/ru/docs/Learn/CSS/Fi...

Подключи файл к документу.

отловить события и при неудачной попытке лишь добавить класс

Вопрос в ответе, лучше пока не придумали.

https://masonry.desandro.com/ или grid (+ dense)

Да, все ок.

Семантика — определение содержимого. Внутри формы поле ввода и label к нему.
Спаны и дивы — нейтралы, строчный и блочные соответственно. Более того, у form нет каких-либо жестких требований к оформлению, более того, ты можешь кнопку активации вынести за ее видимость, а <fieldset> — это из области приятных бонусов, присущие хорошей форме, содержащей множество полей ввода.

Что-то типа диафильма?

1. «Ленту» вкладывай в «окошко», не снаружи.
2. Позиционируй без позицонирования (чтобы высота зависела от «ширины ленты»).
3. Обертке размеры по ширине + overflow:hidden;
4. Двигать можешь за счет transateX(-100% + [ширина окна]) → transateX(0);

Это селектор, который выбирает КАЖДЫЙ ДОЧЕРНИЙ ЭЛЕМЕНТ. Каждый. Прямо совсем каждый. Дочерний.

Т.е. можно писать p *{ и тогда все, что ты вложишь в тег P будет описываться этим свойством с учетом специфичности.

Чтобы залить страницу фоном, вешай стили на body, а еще лучше на div, который будет описывать все тело страницы.

ЗЫ: указывать body в codepen не имеет смысла, так как во вьюхе ты получаешь документ, который уже содержит базовую разметку.

Это очень идиотский подход, так как список ссылок не оформляется внутри селекта.

Ты можешь добавить ссылки для поисковика на выбор рядом и спрятать их (для поисковика), и не пытаться сломать логику.

1. Берешь редактор, загоняешь в него картинку.
2. На картинке рисуешь область.
3. Вместе с картинкой экспортируешь, как SVG (чтобы совпадала область с кратинкой).
4. Чистишь SVG, переделываешь, если надо (ссылку на картинку задаешь ресурсом сайта, а не импортированной, например).
5. На polygon вешаешь события, которые тебе нужны.
6. Встраиваешь в HTML-тело документа.

1–3 пункты нужны по сути только для того, чтобы совпали координаты. Это можно сделать и наживую прямо в коде.

1. Дизайнер, конечно, не очень умный. Бесспорно. Такие решения согласуются на тему адекватности и профессионализма верстальщика + ресурсозатрат на уровне человекочасов и клиента (браузера).
2. Это легко делается на SVG, оно по идее прямо в макете есть, с помощью самого SVG или CSS ты можешь применить маску.
3. Можно поизвращаться в бордер-радусами.

Флекс → колонка карточке продукта.
Кнопке margin-top: auto. Во флексах это работает как индивидуальное «отталкивание»
элемента.

ЗЫ: делать из списка карточки это выстрел себе в ноги.