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

Для начала неплохо бы освоить базовый функционал портала, а затем сервиса для примеров, например https://codepen.io. А еще дальше — посмотреть, как работают селекторы.

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

Продолжай использовать column-count и играйся со свойствами display для элементов, список жрет отступы и переносит их для инлайновых и около того элементов.

Если порядок не критичен, то flex-ы или grid-ы на repeat auto-fill\fit с minmax-ами, в последнем варианте и медиазапросы не потребуются.

В основной директории проекта создай собирающий файл, который будет импортировать зависимости из node_modules и компилить их в конечный билд. Для scss это, например @import 'node_modules/..'. Популярное решение.

Не ну бардак, конечно, в башке и кодовой базе.

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

Если же в кодовой базе уже создано событие, которое можно слушать на DOM-узле, то лучше воспользоваться им и просто слушать. Ну или дописать можно.

Не вкладывай блочные элементы в строчные, смотри документацию W3C, можно быструю справку.

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

https://developer.mozilla.org/ru/docs/Web/CSS/mix-...

Или на js, собирая заранее известно инверсные блоки и сверяя их положение с объектом или высчитывая цвета. В общем тут раздолье мысли.

Нус, во-первых CSS не имеет разделение свойств в виде знака равенства. А вот так height: 100vh;. И это правило будет работать всегда, даже когда контента будет больше. Более того, даже после ресайза. Если у тебя при корректном CSS при ресайзе багует, ищи проблему в коде, а не в размерностях.

И в завершение, для таких блоков, есть смысл указывать min-height, чтобы исключить артефакты, если же все-таки содержимое блока оказывается больше того самого размера экрана.

Для того, что находится внутри прилипающей части задай max-height:100vh; и overflow:auto;.

1. Исключить появление такого объема текста, например, гайдлайном.
2. Добавить гармошку: эффект при наведении или клике. Оба варика хуже первого.

1. SPA-приложение на JS-фреймворке;
2. Табуляция на JS (переключение отображения уже отрендеренного контента);
3. Фреймы.

flex-wrap:wrap;.

Безопасно — использовать svg полигон с dasharray. А вообще ты можешь задать блоку правый и нижний бордер, а слева и и сверху задать спозиционированные псевдоэлементы, имитирующие границу.

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

Позиционирование, трансформации (translate, scale) и z-index.

Так как изображение контентное и подается непосредственно в html напрямую сделать никак, так как стилевые описания в данном кейсе будут идти, как основные, а инлайновые сверху. Собсно таким образом и формируя последовательность. Выйти можно за счет псевдоэлемента, или любого DOM-узла, которое будет спозиционировано по z-index-у выше. Еще интереснее решение — компонент на JS-фреймворке, который будет получать контентную пикчу, как пропс, и управлять последовательностью на уровне рендеринга.

Выравнивай с помощью флексов или гридов.

Что-то типа:

.head {
display: flex;
align-items: center;
...}