archelon

Дело в том, что флекс был не всегда. И раньше элементы в ряд выстраивали инлайн-блоками, ещё раньше флоатами.

Сейчас инлайн-блок нужен для того, для чего придуман, т.е. чтобы элемент получил строчно-блочное отображение. Т.е. элемент ведёт себя снаружи как строчный, а внутри как блочный. А также реагирует на свойства задающие ширину, высоту, отступы.

В современном мире для построения сеток используют флексы и гриды.

Не у всех HTML тегов есть собственное содержимое, поэтому не во всех случаях стоит ждать корректного результата при использовании псевдоэлементов на следующих тегах <img>, <input type="text">, <input type="email">, <input type="password">, <input type="datetime">, etc.

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

<div class="inputbox">
   <input type="text">
</div>

.inputbox::after { 
  /* ...стили для псевдоэлемента */ 
}

Простых рекомендаций нет.

Использование фреймворков заранее определит список устройств и браузеров (про устройства - важное замечание, так как банальный размер и наличие скалинга многое определяет), но сделает работу проще, а если делать все самому то будет эффективнее,больше гибкости и главное понимание что как работает и почему нет!

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

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

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

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

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

Для начинающего я бы рекомендовал первый подход, с оглядкой на постепенный переход к SPA.

Возможные проблемы:
1 - Слабый телефон на котором все проверяли. В таком случае уже виноват телефон.
2 - В коде присутствуют animation (@keyframes) стили. Обычно они работают такими рывками.
3 - JS скрипты по адаптиву. Они тоже часто работают рывками т.к. там используются циклы. Если у вас есть такое в js скрипте, то просто советую заменить его на transition в css

index.php от MODX критичен и необходим, там точка входа. в config.core.php прописан путь к ядру MODX, тоже необходимый файл из коробки. Остальные к MODX не относятся, удаляйте.

Да, тебя обеспечат рабочим местом. Если заранее не обговорено обратное... (например ты работаешь из дома на своем ПК)
В любой крупной конторе тебе даже домой ноут выдадут - ибо нефиг лазить по рабочей сети со своего ПК, на котором нет "следилки" за тем что ты делаешь, групповых политик итд итп

function consoleLogFromPhp() {
  fetch("scripts/consoleLogText.php")
    .then(response => response.text())
    .then(response => console.log(response));
}

<?php
echo 'Hello World';

Не нужен, но для галочки сделайте, вдруг пойдете в админы)

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

https://habr.com/ru/company/htmlacademy/blog/546500/

Основных поинтов использования семантики 3.
1) Использование подходящих элементов делает их использование удобнее. Несколько раз встречал когда ссылки делали дивами с js поверх. Нет возможности нажать на них колёсиком чтобы открылаьс в новой вкладке или правой кнопкой с соответствующем ссылке контекстным меню. Это отвратительно неудобно.
2) это помощь людям с ограниченными возможностями для понимания контекста происходящего на экране. Наглядный пример это ссылки внутри тэга nav. Можно побаловаться со скрин ридером и будет понятно о чём речь.
Если коротко: ссылки в div будут озвучены как: *ссылка*.
Ссылки в nav: "ссылка, навигация"
https://vc.ru/promo/132280-kak-zvuchat-sayty-nezry...
https://www.youtube.com/watch?v=RQiN1Hhrxu0
3) Помощь поисковым ботам понимать контекст и формировать снипеты в поисковой выдаче. Пример есть в статье выше.
https://siteclinic.ru/blog/technical-aspects/html5...

с какой-либо из «сторон дела»: пользователя, верстки, программирования, поисковых систем?

1) Про пользователей выше
2) Про вёрстку - удобнее читать
3) Про программирование - использование верных тэгов соответствующим образом влияет на работу с этими элементами в JS либо избавляет от необходимости в JS в принципе.
4) Про поисковые системы выше.

По идее диапазоны пишут так, чтобы не было перекрытия, т.е. если брейкпоинт на 768, то выделяем 2 диапазона:
1) 768+
2) 0 - 767

соответственно:

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}

Но тут есть нюанс, мы теряем пиксель между 767 и 768. В текущих реалиях, когда css и device pixels давно не равны, когда кругом все масштабируется ( и соответственно где-то внутри округляется) - все может быть. Поэтому дельту в пиксель уменьшают до 0.02px. Почему именно такая велична, сходу не нагуглю. Возможно , чисто эмпирическим путем выяснили что 0.01 не работает, например ))

похожая тема на стеке

upd:
а, ну вот там и ответ:

// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261

disallow: */?promo=*
но поисковики не обязательно учитывают robots для индексации или неиндексации, особенно гугл.
canonical обязательно - на основную страницу.
а редиректы не надо.
и всё должно быть норм.

Короче, забудь про абсолюты как про страшный сон. Очень редко, только когда другое ну никак нельзя.
Сделать можно разными способами, например на флексах

Можно задвоить картинку, нижнюю при этом размыть с помощью blur, а также поднять ей яркость и контраст, чтобы яркие участки были более выраженными и не теряли своей цветности. Это самый эффективный и простой способ создания таких теней:


Если лень включать VPN для JSFiddle, то результат такой:


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

Либо можно геморроится с множественными box-shadow.