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

Илья отсутствует, на тогда можно пробовать SVG на фон с абсолютным позиционированием, у SVG должен быть атрибут preserveAspectRatio="none". Если это не проканает и линии будут искажать толщину или будет сложно состыковать с краями самой сетки, то тогда только JS поможет в сочетании с SVG или canvas.

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

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

Антон Р., это направляющие, которые формируют колонки и так называемый ритм. Просто тут они визуально показаны. Я думаю, эти скриншоты взяты из разряда показать, как происходил процесс. А в самом макете их нет.

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

Если вы убёрете горизонтальные направляющие, то увидите, что сетка тут абсолютно обычная.

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

Можно ли как-то задать стили только для IE?

Тимур Турсунбаев, если придется поддерживать IE11 в проекте, то о Grid можно забыть :))

У меня пока все проекты требуют его поддержки, к сожалению.

Можно ли как-то задать стили только для IE?

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

Можно ли как-то задать стили только для IE?

Тимур Турсунбаев, ну это тогда надо весь нормальный код оборачивать в @supports. Не очень хорошо это.

Можно ли как-то задать стили только для IE?

Тимур Турсунбаев, IE не поддерживает @supports.

danilr, вы препроцессор используете, как я понимаю? Если SCSS, то так:

.pagination {
    display: flex; 
    margin-bottom: 10px;
    
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        display: inline-block;
        margin-bottom: 0; 
    }

}

Если просто CSS, то так:

.pagination {
    display: flex; 
    margin-bottom: 10px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .pagination {
        display: inline-block;
        margin-bottom: 0; 
    }
}

А вообще, если вы верстаете под IE11, то он спокойно поддерживает большинство решений на flex. Иными словами, flexbox в 99% случаев в IE11 не требует чего-то уникального.

Можно ли как-то задать стили только для IE?

danilr, IE вообще не поддерживает @supports, поэтому всех хаки для IE построены на @media.

Код автора ответа — правильный, но этот хак можно упростить ещё:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .class {
     /* Тут стили, которые будут работать только в IE */
   }
}

Как добавить класс к тегу li стандартного меню WordPress?

У вас вопрос неправильный. Поменяйте название вопроса на: «Как добавить класс к тегу li стандартного меню WordPress?»

Почему верстка на div - это зло?

4. Такие сайты сложно маштабируются.

Навряд ли наличие семантических тегов как-то повлияет на масштабируемость проекта.

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

Да, вы можете на одних div'ах создать очень масштабный и успешный проект (но это неправильно, ибо семантика — тоже часть технологии).

Просто введите в обиход всякие header, main, footer, aside, section, h1, article, figure, p, nav, ul, li — и будет вам счастье. Ибо чтобы тотально разбираться в особенностях семантики — это очень много информации. Это придёт с опытом и чтением документации/форумов и пр.

Есть ли отличия Sass от SCSS?

Различие только в синтаксиси. Если вам не нужны фигурные скобки, точки с запятой, а также длинное написание @mixin, @include и пр. — ваш выбор SASS.

Я же терпеть не могу синтаксис SASS и пользуюсь SCSS. К тому же он спокойно поддерживает простой CSS-код внутри, если нужно вставить его. А так, по возможностям они идентичны.

Первая статья из Интернета описывает картину чуть более полно:
https://www.internet-technologies.ru/articles/v-ch...

Как избежать внезапное появление рекламы в адаптивном шаблоне?

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

Есть смысл ставить такой прелоадер на область с контентом. А контент получать через AJAX.

Как избежать внезапное появление рекламы в адаптивном шаблоне?

midarovrk, ну да, так и надо. Нужна проверка с вашей рекламой. Вот отсчет скрипта нужно вешать не на клик, как в скрипте выше, а именно на момент готовности блока рекламы. Ну и плюс, там нет механизма, мол, если человек кликнет второй раз в течении этих 3 секунд, то уже переходить по ссылке. Иначе человек будет не понимать, что там вообще происходит, почему не работает ссылка.

Ну словом, вам нужно доработать, надеюсь, моя идея вам поможет в итоге :))

Как реализовать такое наведение с изображением поверх?

Тогда уж лучше так, чтобы разметку не засорять:


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

Как избежать внезапное появление рекламы в адаптивном шаблоне?

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

Если же у рекламы однотипная высота, то я бы поставил её изначально. А мне кажется, что она однотипная. Или же, что лучше, я думаю, она берется на основе соотношения сторон, поэтому сделайте её хаком на padding-bottom, если это возможно.

Как избежать внезапное появление рекламы в адаптивном шаблоне?

midarovrk:
1. Страдать
2. Делать минимальную высоту для блока рекламы
3. Через JS блокировать клики у ссылок до тех пор, пока реклама не загрузится
5. Скрывать блоки с комиксами до тех пор, пока реклама не прогрузится
6. Переместить рекламу в иное место
7. Придумать что-нибудь ещё с JS и отображением
8. Первый клик по рекламе заблокировать с помощью JS в течение 2–3 секунд после загрузки рекламы, чтобы случайное нажатие не сработало. Если человек в течение этих 2–3 секунд нажмёт снова или это время пройдёт — разблокировать клики

Мой фаворит — 8-й вариант. Иных идей у меня больше нет в голове.

Какой сервис web2print на сайте?

Как web2print связан с вопросом?

То, что показали вы, — это уникальные визуальные онлайн-конструкторы для создания готовых к печати заголовков по заранее созданным макетам.

Разработка такого виузального конструктора с нужным вам функционалом — дорогая вещь. Какого-то универсального решения, которое бы без доп. разработки позволило вам запустить такой конструктор у вас на сайте, — нет.

Как правильно и оптимально чистить стили?

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

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

LissaAlbatross, опасность в том, что клиенты хотят много, а опыта у вас мало.

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

И тут уже вам поможет ваша доходчивость, ум и везение. Если в таком режиме вы сможете быстро получать опыт и быстро расти профессионально, то всё хорошо. Если нет — будет мука, а не работа :))

Пока о красоте и правильности верстки говорить сложно, так как пока что не очень красиво, а сам дизайн очень прост. Учитесь и ещё раз учитесь, тогда всё будет хорошо, желаю удачи! Это не ирония. Если есть возможность попасть куда-нибудь в студию или офис — не теряйте эту возможность.

Как добавить треугольную границу в css?

Brad9aga, и в чём же вопрос?

Выбирай режим custom-shape — раставляй точки, двигай их, тренируйся, потом придёт понимание, ведь там всё просто.

Помимо процентов и пикселей можно координату ставить с помощью calc() типа так: calc(30%- 30px), чтобы задать более сложное и точное значение.