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

https://codepen.io/i-am-studio_ru/pen/NWGBMwo

first-of-type + класс + тег дадут необходимый результат.

По умолчанию они работают с типами и дочерними элементами. first-child → первый из всех, first-of-type первый из типа. Тип != класс, но = тег.

ЗЫ: но если у тебя класс генерируются автоматически, то:
1. Ты можешь из бэка передать дополнительный класс для подсветки, скажем, модификатор.
2. Сделать это на JS.

1. p — для набора параграфов, если это не он, то можно смело брать span.
2. Классы на p → идеально, исключением составляет пользовательский ввод.
3. Класс строго по БЭМ (ну почти).
4. Флексбоксами действительно не стоит бездумно злоупотреблять, так как всегда есть риск выстрелить себе в ногу.
5. PP → в макете стоит искать закономерности и их релизовывать, но проверять на переполнение, так как пользовательский ввод не дремлет.
6. position: absolut; → position: absolute;
7. Отступы всецело зависят от контекста, например если тебе надо сделать карточку с фоноцветом, то скорее всего ты применишь padding, дабы были отступы от краев.

Отдавать данные формы бэкендом.

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

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

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

Использовать любой подходящий\нравящийся шаблонизатор от Mustache до Jinja.

Пустые ячейки, которые сформируют колонку, с выключенными границами + border-collapse.

Каждый слэш — директория, чтобы открывать директорию, т.е. адрес вида /page/ у тебя должна быть следующая структура папки:
page/index.html
Таким образом при попытке открыть /page при правильной конфигурации сервера откроется индекс файл (это стандартная конфигурация).

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

ЗЫ: в первом способе будет доступен файл и его содержимое как по адресу /page, так и /page/index.html, так что в конечном счете тебе придется объединить два метода, чтобы не было дублей. И в какой-то момент ты придешь к ЯП\Движкам\CMS, которые большую часть этого геморроя берут не себя.

https://webformyself.com/sposoby-obrabotki-vklyuch...
Это и многое другое легко ищется поисковиком.

Какой-то странный вопрос. Вариантов чуть больше, чем дохрена.

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

ЗЫ: самый удобный формат данных где-то рядом с этим — JSON)

Такое происходит, когда есть 2 и более блоков один за другим, где в одном есть контент, а в других размер эквивалентен в соответствии с правилом 1fr.

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

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

Система координат отсчитывается от левой верхней точки вьюпорта. Отсюда растут все подобные особенности.

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

В комбинации с JS может что-то такое набедокурить.

Если тебе не нужно менять содержимое прилипшего блока, а только делать ему перерасчет, то почему ты не воспользовался обычным position:sticky;?

У тебя отступ у параграфа margin:auto, т.е. не фиксированный, а позиция заголовка имеет жесткую фиксацию от правого края 25px, при разных разрешениях отступ у параграфа разный, следовательно при несовпадении разница видна невооруженным глазом.

Я рекомендую и параграфу и заголовку в данном конкретном примере выдать фиксированные отступы:

p {
  ...
  /* width: 90%; */
  margin-right: 25px;
  margin-left: 25px;
  ...
}

И да, убрать у абзаца размер процентный. Это блочный элемент по умолчанию и он заполнит все вширь.

1. Чтобы иметь возможность ловить события именно объектов, а не квадрата картинки, используй SVG.
2. Тень рисовать можно ее же средствами.
3. Используй svg-спрайты, это позволит снизить фактор жопоболи при перестройке.
4. В чем сложность использовать медиазапросы при постройке я, если честно не понял, располагаешь элементы (острова) один под одним (тупо дивы), а на десктопе позиционируешь абсолютно. Главное не накосячить с z-index-ом.

Краткий экскурс — типографике в вебе = боль. Наслаждайся. Ничего общего с полиграфией, хотя хотелось бы.

Теперь по сути:
1. Править руками частные случаи. Тут возможностей просто море, от line-height:1 (норм) до абсолютного позиционирования (плохо).
2. Постоянно и везде, поэтому стоит понимать анатомию шрифтов, чтобы знать, как с ними работать. Ну и да, никакой Zeplin тебе эту магию не выдаст, так как это программа, которая просто транспонирует свойства редактора (читай все абсолютно спозиционировано) в типа CSS.
3. Да, главное не прострелить себе ногу при этом. Т.е. скорее всего не стоит к такому прибегать.
4. Заказчику важно сделать деньги на том проекте, что ты реализуешь.
5. Да есть, типа Baseliner-а, или всякие плагины для накладывания полупрозрачной пикчи поверх верстки, но вообще это все от лукавого.

Кроме тебя порядок в логике формирования структуры HTML и классов никто не наведет.

Делай это сам, либо пиши ИИ, которая сделает это за тебя.

Если появляется у элемента скролл, значит он имеет фиксированную высоту\ширину и у него включен скролл по умолчанию или в стилях и при этом все, что не входит в область захвата будет скрыто.

Чтобы обойти это ограничение используй кастомный скролл. Если речь именно о том, чтобы показать элементы, которые «торчат».

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

Если же вопрос был о том, как не довести до такого → не использовать фиксированные размеры, там, где контент превышает размер родителя, не указывать overflow: hidden\auto\scroll.

0. сonteiner → container.
1. Да, container просто находится в той же плоскости, что и твоя БЭМ-логика. Так же может стать примесью.
2. Бред, все, что от тебя требуется — сделать достаточно гибкую верстку.
3. Адаптивная верстка это в том числе смесь резиновой и фиксированной верстки, при этом не рекомендую отступы формировать на процентах просто так, ты скорее всего прострелишь себе ногу пару раз.
4. Блок услуг = аккордеон (это жаргонный термин), команда — скорее всего усложненная карусель. Без JS можно, но в долгосрочной перспективе это два пробитых колена.

Менторство это штука шаткая, лично я делаю бесплатно это тут и по настроению в моем уютном чатике ойтишнигов.

ЗЫ: твоя логика верстки в header-е приведет к тому, что тебе придется переверстать в будущем. Не стоит смешивать heroscreen с шапкой. Только в том случае, если она железно не плавающая и вообще привязана только к этому блоку с видео (из области лендингов и фантастики).