Сергей delphinpro

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

Ну так структурируйте свои знания. Хотя бы отсюда начните https://developer.mozilla.org/ru/docs/Learn/CSS

Однако, это даст вам только знание инструмента, т.е. языка (языков). Методики верстки, типовые кейсы нарабатываются опытом. Разумеется есть какие-то книги. Может некоторые даже не плохи. Но они быстро устаревают.
Тут как уже отметили путь один – мониторить интернет. Сайты типа css-triks (en) и css-live (ru), тот же хабр и прочие. Также есть отличный банк готовых решений – https://codepen.io – подпишитесь на рассылку интересностей.
Ну и практика, практика, практика.

Ну погуглить же можно минутку
https://habr.com/ru/post/262833/
https://codepen.io/BlackShabat/pen/pJZooM (из статьи)

В идеале следует джаваскриптом высчитывать высоту блока и ставить ее.

Чисто css решение тоже есть, но оно неидеально. Тут вместо height используется max-height с заведомо большим значением, но не слишком превышающим предполагаемую высоту.

https://yandex.ru/search/?text=css%20100%25%20height
https://habr.com/ru/post/189252/

38 минут ждёте ответа здесь, вместо того, чтобы моментально получить его в поисковике.

Непонятно.
Если он не может быть меньше 1200, то задавайте min-width:1200px

Миксины пишутся в scss-файлах. И подключать нужно соответственно.

@import 'file2.scss';

p {
    @include font-color;
}

По умолчанию INPUT имеет свойство

input {
  display: inline-block;
}

Будьте внимательнее.

так

<div id="hide_forever">
  Div, который прячется навсегда
</div>
<button id="button1">Скрыть DIV</button>
<script>
  const div = document.getElementById('hide_forever');
  const button = document.getElementById('button1');
  const status = localStorage.getItem('div_hidden');
  if (status) {
    div.style.display = 'none';
  }
  button.addEventListener('click', () => {
    localStorage.setItem('div_hidden', '1');
    div.style.display = 'none';
  });
</script>

Используйте auto-fill

Мы готовый обычно используем
ionden.com/a/plugins/ion.rangeSlider/demo.html

в css подобное реализуется с помощью position: sticky

Dezzly, В макете центрированный заголовок.

<h1>
Hi there! We are the new kids on the block
and we build awesome websites and mobile apps.
</h1>

h1 {
  max-width: 600px; // Подобрать, чтобы текст не расползался по всей ширине
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}