Ankhena

Владислав Валабуев: быстрее писать с emmet. На мой взгляд с эммет и без препроцессоров вообще выйдет быстрее, чем с препроцессорами, но без эммет. Лично у меня больше времени уходит на выдумывание имен классов или на размышления как бы обойтись меньшим числом тегов или на вздохи, что дизайнер сделал правые отступы 17 точек, а левые 19, чем на фактическое написание задуманного.

Соотвественно: emmet, livereload и отрабатывать скилы быстро-думанья.

А я могу и по звездам.

Почему

Потому что у .user стоит float или position типа absolute.

Перечислять все фантазийные варианты решения проблемы не хочется. Поэтому будет код на jsfiddle - будет и вариант как поправить.

Спозиционируйте блок bottom:0
В начальном классе высота 0, в другом какая нужно.

Либо на JQ slideUp(), slideDown() http://jquery.page2page.ru/index.php5/Разворачиван...

На мобильных у вас должно быть по одному блоку на строчку. Значит ширина каждого по 100% (считая, что используется box-sizing: border-box).

Выкладывайте проблемный код в песочницу https://jsfiddle.net/ или давайте ссылку на сайт. По скринам гадать, что у вас в коде не очень удобно.

В конце вашего блока добавить

<div class="star-wrap">
    <i class="fa fa-star" aria-hidden="true"></i>
  </div>

добавить стили:

#layer1 {
  position: relative;
}
.star-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}

https://jsfiddle.net/7fnx1p2e/

Второй вариант, получше:
вот в этом примере вообще не надо ничего вставлять в html https://jsfiddle.net/jb255aka/
нужно только дописать для блочиков в CSS:

.service-item::before {
  content:"\f005";
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}

2. Обернуть видео в контейнер

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  /* 56.25% задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-wrap iframe,
.video-wrap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 800px;
}

1. и 3. Выложите код в песочницу, уж не первый вопрос тут задаете.

1. При наведении вместо border использовать outline или box-shadox (можно внутренюю).
2. Вместо input использовать атирибут contenteditable="true" https://jsfiddle.net/qnbzbL0p/

А логику включить?

Чем лучше делать отсупы(margin, padding) — rem или %?

А вы как верстаете? Не глядя в макеты дизайнера вообще?

Сами ответьте на вопрос
В чем вы будете задавать отступы в CSS, если:
1. В макете дизайнера все отступы на всех разрешениях равны 23 пикселям.
2. На десктопе шрифт задан 16px и отступы по 16px, на мобильных шрифт 20px и отступы тоже по 20px.
3. В стайлгайде написано человеческим языком: делай отступы 3% от ширины блока.
4. Тоже самое, но делай отступы в 2 символа.

Использовать тег <picture> или media условия или SVG
https://webref.ru/html/picture

Что можно изучить по этой теме? В каком направлении двигаться?

1. Геометрию.
2. media условия
3. немного JS/JQ
4. оптимизицию изображений, отличия графики для ретины