Как сделать такую же анимацию без svg?

Так же качественно — никак.

Чем плох такой классический вариант с SVG?

Как сделать обтекание картинки текстом без float?

Михаил, а кто запретил это делать? Правильно, никто. Просто для разметки float использовать уже не надо в 2020 году. Для тех случаев, когда вы верстаете блоки с обтеканием — ну конечно же нужно использовать их. Тут вам никто иной не помощник, кроме float.

Как сделать обтекание картинки текстом без float?

Никак. Float есть float. Внутри flex-контейнера не работает float (точнее, на flex-детях). Иных механизмов обтекания в CSS нет.

Это как если бы вы спросили, как сделать flexbox-поведение с помощью float.

Как прижать колонку к левой стороне сайта?

Всем спасибо за ответы))

Пожалуйста.

Кода я почему-то не вижу.

Как в идеале должна выглядеть DOM-структура html-документа?

Обычная вложенность, ничего ни хорошего, ни плохого. В целом, по оному отрывку ничего сказать толкового нельзя, кроме как про отсутствие заголовка у section, но тут скорее всего просто вы решили сократить содержимое section до «11».

Минимальное разрешение при котором сайт должен корректно отображаться в браузере?

320 пикселей. Меньше по ширине устройств не бывает.

Viewport в старых версий браузеров на ПК иногда можно сжать до ~240px, но на этот размер вообще стоит ориентироваться. Современные версии обычно не позволяют ужать окно меньше как раз-таки 320px. Само окно может ужиматься, вот только сам viewport меньше не становится. Плюс, можно задать у body min-width.

Вот, например, Firefox не дал ужать body меньше 320px, хоть и окно я ужал где-то до ~200px, появилась горизонтальная прокрутка:


В любом случае, медиазапросы стоит строить от 0px, а не от 320px, т. е. для телефона задавать что-то а-ля media (max-width: 600px), не указывая min-width, короче.

Как верстать современный дизайн?

Pan_Stephan, обновил пример. Добавил второй тип с другим позиционированием.

Как верстать современный дизайн?

Pan_Stephan, нет, другой нет. Просто надо к этому делу с умом подходить:



Полностью адаптивно, подстраивается под размеры контента, ни на что не налезает.

Как верстать современный дизайн?

Так же, как и все года до этого — position: absolute.

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

test-cats, если это горизонтальное меню сверху, то так делать не принято. Просто выделите текущий пункт стилями. Когда человек наведёт на первый уровень, то он увидит второй уровень, где будет выделенный пункт текущей страницы.

Это так делают обычно. Иными словами, я согласен с Владимир Дружаев. Но это что касательно UX.

Касательно вопроса, если вы всё решите делать это, то мне вам сказать нечего, кроме как о написании логики на JS с применением LocalStorage.

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

Владимир Дружаев, я думаю, он говорит о выделении текущего пункта меню. Просто он неверно объяснил свою идею.

Update. Хотя нет, он говорит именно об открытии меню. Тогда да, это странно выглядит. Но надо видеть дизайн его решения, чтобы точно понять, насколько это вообще оправдано. Если оно сбоку в виде аккордеона, тогда это вполне сносно.

Thing – недопустимый тип целевого объекта для свойства itemReviewed (Микроразметка)?

А саму разметку нам из воздуха брать? :))

Пришлите саму разметку.

Как сделать сайдбар плавающим?

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

Для примера:

Как выключить JS скрипт на мобильном устройстве?

damarkuzz, я в JS ноль, но на первый взгляд не так уж и много + у вас много параметров учитывается. Это хорошо.

Наверное, у меня не работает из-за того, что я с MacOS, где везде плавная прокрутка на уровне системы есть, а у вас там есть проверка какая-то.

Как выключить JS скрипт на мобильном устройстве?

Вот только я не понял, работает ваш скрипт или же нет.

Как выключить JS скрипт на мобильном устройстве?

Если методом проверки сенсора + ваш скрипт:



Функция проверки сенсора:

// Function to check if device is touch-enabled
function isTouchDeviceCheck() {
  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
  var mq = function(query) {
    return window.matchMedia(query).matches;
  }

  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
    return true;
  }

  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
  // https://git.io/vznFH
  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
  return mq(query);
}

Как выключить JS скрипт на мобильном устройстве?

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

Либо по user-agent, либо по поддержке сенсора нужно определять вам.

Не работает рейтинг со звездами если блоков со звездами несколько на странице?

art_y10, нет, ID нужны для работы всей этой конструкции, так как это хак на input'ах. Посмотрите внимательнее разметку. Там у каждого элемента свой ID.

Не работает рейтинг со звездами если блоков со звездами несколько на странице?

Есть ли решение на css без javascript?

Как бы ваш пример как раз на чистом CSS. И он будет работать как раз с помощью вот этих ID. И нужно делать уникальные ID каждый раз, да.

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

Например:
https://fredolss.github.io/rater-js/example/

Появление border и scale background картинки?

Александр, и кода из этого вопроса совершенно недостаточно, иначе бы вы не создали второй вопрос.

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

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