The_KEK

https://yandex.ru/search/?text=masonry+layout&lr=2...

Я вообще не понимаю этих приколов где учить css/верстку. На ютубе единицы каналов, ты просто смотришь видосы и тебе по аннотации кидает других атворов и через неделю обучения ты уже подписан на всех.
1.Фрилансер по жизни - канал посвящен исключительно верстки, очень много углубленных тем.
2.Анна блок - канал тоже исключительно про верстку, вот с неё советовал бы начинать, у неё более легкие и короткие объяснения
3.Если вообще только прям начал, то webdev, там есть видео css с нуля и html с нуля, которые около трех часов оба, затем на канале есть два часовых ролика про флексбоксы и гриды(мастхев для верстки)
4.MaxGraph - канал тоже про верстку, но тут уже больше тем для среднего уровня, про гсап-анимации-сборщики
5.От 0 до 1 - канал тоже про верстку, тут есть много видосов больших, по котором верстаются целые сайты, можешь посмотреть как человек на коммерческой основе делает с нуля какие-то вещи до релиза
6.Codmark/easy tutorial - два канал где можно подсмотреть какие-то интересные решения по началу
7.Вадим макеев, это не про обучение верстки(ну тут уроков нет), но это гуро верстки и просто будет интересно послушать как профессионал своего дела мыслит и транслирует информацию, что и как должен делать верстальщик
ну вот этим лично я пользовался-пользуюсь, возможно найдешь для себя из моего списка что-то полезное

тот или иной фреймворк решает различные задачи,

Если имеются ввиду angular, react, vue - чушь это всё собачья. Решают они одни и те же задачи, просто разными методами и философиями.

А что вы хотите услышать?

Каким образом вы выбираете себе автомобиль? Их так много, но все они решают одну и ту же задачу. Vue и React - это как мерседес и BMW. Вечное противостояние 2х философий. Обе машины прекрасны, дороги и комфортны, но у каждой так или иначе своя философия.

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

Один спец. скажет вам, что реакт, другой скажет, что vue.
Третий скажет, что реакт это вообще даунгрейд по сравнению с vue(и тут я согласен).
Четвёртый скажет, что реакт для мужиков, на него больше вакансий, они дороже и проще найти работу.
Пятый скажет, что на реакте есть куча всяких штучек дручек и т.п.
Шестой будет молчать, т.к. юзает ангуляр и не знает никаких проблем и с насмешкой смотрит на этих 2х. Потому что это ещё одна, совсем не похожая на других философия. Где за тебя уже всё придумали, сделали и сказали как делать дальше.

Вы не получите полноценную картину.

От себя скажу так, если вы любите работать с html берите vue. Vue для меня гораздо лучше, чем react. В react гораздо больше писанины кода, чем в vue. Я терпеть не могу jsx(во vue он тоже есть), отвратительная штука, но это вкусовщина. Обязательно найдутся те, кто скажет иначе, ради бога. В vue шаблоны - это родной и привычный мне html с очень удобным и понятным шаблонизатором. Любите работать с html, вперёд.

Если вы не любите верстать и вам больше нравится сам процесс писанины js, писать стили на js, берите реакт.
Если вы любите типизацию, если вы за строгий контроль кода и вообще, вы считаете себя "тру" прогером, берите ангуляр, если коротко.

Заметьте, я чаще всего сравниваю react и vue, а ангулар где-то в стороне. angular - это как volvo, тебе ничего больше не нужно, у тебя и так всё хорошо.

User JavaScript and CSS

Можно так, но стоит денег:

https://www.pullrequest.com/
https://www.codementor.io/html_css-experts

Это путь от выходного css файла, а не от sass файла, в котором он написан.
Чувствуете разницу?

В sass до сих пор не встроен резолвер путей к файлам, в отличие от других препроцессоров.
То есть пути к файлам никак не обрабатываются, и отправляются на выход как етсь.
Это проблема.
Например у вас такая структура:

dist/
  css/
    style.css
  images/
    image.png
src/
  images/
    image.png
  sass/
    blocks/
      logo.scss
    styles.scss

пока вы пишете прямо в styles.scss, все отлично
.logo { background: url(../images/image.png); }
Путь совпадает и в ваших исподниках, и в билде. Шторм радостно выдает подсказки.

Как только вы решите писать в отдельном файле blocks/logo.scss, путь к картинке в исходниках становится другим, но в билде остается прежним. Шторм не может выдать подсказку.
В других препроцессорах можно писать исходный путь
.logo { background: url(../../images/image.png); }
Они преобразуют путь на выходе до корректоного.
В sass - нет.

Если вы используете webpack в качестве сборщика, то для него есть resolve-url-loader, который худо-бедно исправляет данных недостаток.

Другое решение - использовать пути от корня.

.logo { background: url(/images/image.png); }

Тут шторм сможет подсказывать. Нужно только папку dist пометить как Resource root.

https://swiperjs.com/swiper-api#parameters
в breakpoints параметр slidesPerView

НУ например так

<form>
    <div class="search">
     <input type="search" name="q">
     <input type="submit" value="Subscribe">
   </div>
  </form>

.search {
    border: 1px solid #000; 
    min-height: 20px; 
    padding:4px;
    border-radius:8px;
    display: flex;
    justify-content: space-between;
   }
   
input[type="search"] {
    border: none; 
    outline: none; 
    -webkit-appearance: none; 
    flex-grow: 2;
   }
   
input[type="submit"] {
    border: none; 
    height:40px;
    background: #2e6eff; 
    border-radius: 8px;
   }