Матвей Феникс

А препроцессоры есть? scss например.
Я делаю так - ссылка

1 прямоугольник пропорционально масштабируется, 2 нет

$(window).on('scroll load', function () {
    if ((document.documentElement.scrollTop > 20) || (document.body.scrollTop > 20)) {
        $('.header').addClass('header_scroll');
    } else {
        if ($('.header').hasClass('header_scroll')) {
            $('.header').removeClass('header_scroll');
        }
    }
});

Именно такое решение, которое вы написали - самое простое и лучшее.
Либо просто положили внутри relative блока-родителя дочерний блок с absolute и background белого цвета, либо сгенерировали его через псевдоэлемент :before.

Для того, чтобы вам помогли - выкладывайте код демки на codepen или его аналог - никто не захочет гадать по кофейной гуще.

1) Открытие и закрытие делается обычно через .toggleClass('класс').
К примеру - изначально меню скрыто через display: none, при клики через toggleClass вешается или убирается класс active, в котором задан стиль display: none;
Ну или еще можно делать проверку на наличие display: none, и в зависимости от результата делать либо .show() либо .hide()
2) Скрытие по клику вне области блока делается так:

$(function ($) {
    $(document).mouseup(function (e) {
        const block = $(".ваш_блок"); // переменная block - это ваш блок, который скрывается/показывается
        if (!block.is(e.target)
            && block.has(e.target).length === 0) {
            block.removeClass('класс'); // класс который показывает блок, к примеру с display: block
        }
    });
});

Если такое случилось - просто нажми ctrl + c и выполни команду повторно. Если не помогает - перезагрузи bash.

Если есть доступ к jquery - то лучший вариант это jquery validation.
Вот пример реализации, там есть как раз такой функционал для паролей https://github.com/mtvphnx/hate-jquery-validation

Как узнать что поля принадлежат одной и той же форме? Уникализируйте формы (id, class, attr).

Да, можно.

Самые удобные - это Avocode https://avocode.com/ и Zeplin https://zeplin.io/

Так? https://codepen.io/matvey-phoen1x/pen/XxprQd

Если есть деньги - платный курс по основам верстки - https://loftschool.com/course/html-css/
Если нет возможности купить - торренты (неэффективно).

Используй любую библиотеку слайдеров, к примеру эту https://owlcarousel2.github.io/OwlCarousel2/
В ней можно сделать блоки, какие тебе нужны, в блоке слайдера, к примеру так:

<div class="owl-carousel">
  <div><div>Текст</div><div>Картинка</div></div>
</div>

Пиши @include mobile() и все будет работать.

P.S. еще проверь пути, ты обращаешься к 'mixins', а нужно '_mixins.scss'