Иван В

Пунктиры и закругления можно сделать с помощью border-style (со значением dashed) и border-radius.
Но с dashed прокатит только если дизайнеру все равно на длину пунктирной линии (ее нельзя задать, только ширину).

На самом деле, лучше вставить svg, отдельными картинками под разные разрешения.
Можно, конечно, заверстать из отдельных элементов, но это очень долго (особенно если нужен будет адаптив).

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

Я, конечно, не "куратор тега CSS", но по БЭМ допускается чтобы у тегов отсутствовали классы.
Почему я так думаю?
1) В документации ни где не написано, что каждый тег внутри блока должен иметь класс.
2) В контексте БЭМ "тег" !== "элемент".
Например, если есть "элемент" содержащий текстовый контент, нет смысла давать класс тегу <strong> и даже тегу <p> если его внешний вид вам подходит.
3) Сам Яндекс (создатель БЭМ) спокойно оставляет теги без классов. Пример на этой странице https://yandex.ru/dev/maps/mapsapi/
Если посмотреть код, видно, что параграфы, ссылки, списки, "выделенный" текст не имеют классов. Если сами создатели так делают, то и вам можно :)

Привет!
В официальной документации к слайдеру есть описание autoplay с примером.

Вы сравниваете очень разные вещи.

Bootstrap - CSS фреймворк с адаптивной сеткой и набором готовых компонентов (кнопки, табы, аккордеон и т.д.).
Flexbox - набор CSS свойств для позиционирования элементов.

Вы можете использовать эти все вместе. Более того, в самом Bootstrap сейчас уже используются флексы (и в сетке, и в компонентах).

Если есть задача по быстрому сделать страницу \ лэндинг или сделать прототип интерфейса, то Bootstrap вполне подойдет.

Выбирайте технологии которые лично вам помогают в работе.

Попробуйте сделать на webassembly :)

Повысьте качество сна.

Прохладный свежий воздух в комнате.
Удобный матрас и подушка.
Тишина.
Занавески не пропускающие свет.

Уже изучил основы около 60% html и css, хочу углубиться и найти хорошую практику.

Идите по этой карте и все будет хорошо.

И где найти практику для всего этого +- интерактивную и понятную

Начните с макетов.

Проверяйте фиксированную ширину блоков.
Например, на разрешении от 380 до 395 у вас горизонтальный скролл из-за фиксированной ширины 380px у элемента "searcher__search" и некоторых его потомков.

Скорее всего на других брейкпоинтах таже проблема. Задавайте фиксированную ширину основному слою (у вас это "page"), внтуренним оберткам \ контейнерам задавайте ширину в процентах.



P.S. Моя ошибка, с шириной все ок )
просто нужно смотреть в эмуляторе мобильного устройства, иначе стандартный десктопный скролл будет учитываться в ширине экрана.
Т.е. допустим, у основного слоя фиксированная ширина 380px, десктопный вертикальный скролл съедает несоклько пикселей и по этому, чтобы все влезло, браузер добавляет горизонтальный скролл.
Так что на мобильном все должно быть ок. Но в любом случае для моб устройств делайте резиновую верстку, указывайте ширину в процентах.

Вот здесь и здесь достаточно подробно расписано.

Но если совсем в двух словах:
Gulp - для верстки
Webpack - для js-приложений.

Попробуйте оба в деле. Тогда вопросы отпадут.

Стараюсь придерживаться стратегии Прогрессивного улучшения.
Сначала структура html, потом внешний вид на CSS, потом красивости \ интерактивности на CSS + JS.

Перевести размеры и отступы из px в vh.
Размер экрана меняется => элементы с vh меняют размеры относительно экрана.