Почему не работает событие по нажатию на button?

$(".btn").click(function () {
  $(this).parent(".box").toggleClass("active");
});

Это то, что написано у вас в скрипте по поводу того, что должно происходить при клике на кнопку.
Взять родителя кнопки и если он .box, то задать ему класс. И это всё.

Как сделать поля логина и пароля друг под другом?

Евгений Иванов,

2) Использовать гриды и флоаты (не как я, а органично) рекомендуют многие верстальщики в интернете.
Например грид делит страницу на меню и контент. А меню выравнивает свои пункты флоатом.
Это не я придумал - просто говорю что показывают на ютубе довольно популярные каналы.

Какого года эти каналы и верстальщики?

Флоаты в современной верстке используются только для того, для чего были придуманы изначально: для обтекания одного элемента другими.
В вашем макете такие задачи отсутствуют.

2) Заголовок формы h2. Не очень понятно, почему h2.
Из истории веба - все эти заголовки и прочее использовались для оформления научных документов. Изначально CSS использовали ученые (Дэвид Макфарланд, большая книга css). Ну а потом стали использовать все.
Я не могу сказать, что заголовок формы, это как заголовок документа. Или что это вообще заголовок.

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

Кстати, я потратил 30 минут позиционируя его в грид. У него оказывается margin по умолчанию не 0.
Вот я и думал - что h2 не встает ровно по сетке.

Да, у многих тегов есть свои свойства по умолчанию: отступы, размеры, шрифт и т.д.
Постепенно изучите.

Сетку сделал свою.

Вы задаете фиксированную высоту строкам.
В вебе очень редко задают высоту. Если нужно, то ограничивают её. Мы никогда не знаем сколько контента будет в реальном сайте, не поставит ли пользователь увеличенный шрифт и т.д. При фикс высоте всё развалится.
Можно задавать высоту, например, если нужно вписать картинку с неизвестными размерами в какую-то область.

В данном случае аналогично и с шириной. Вставьте слово подлиннее и посмотрите что будет. Длинное слово не влезет, для двух слов будет перенос, хотя вполне можно и чуть-чуть ужать инпуты.
Ограничение максимальной и минимальной ширины вместо фиксированной, в данном случае, улучшит качество верстки.

---
0. В песочнице jsfiddle есть кнопочки tidy (в других песочницах аналогичные функции), которые форматируют код в читаемый вид лесенкой. Если хотите, чтобы кто-то смотрел ваш код, форматируйте его.

1. У вас лейблы не привязаны к своим инпутам. В моем варианте были привязаны.

2. Кнопки удобнее делать тегом button. input submit это устаревший вариант, когда не было button, который остался для совместимости.
У button есть псевдоэлементы, в него можно вкладывать другие теги => его проще стилизовать. Текст на кнопке является содержимым тега, а не value.

И зачем её абсолют, там же грид сетка, по которой кнопка прекрасно встает на своё место.

3. У вас задан один шрифт, Arial, без указания семейства. А это значит, что если у пользователя вдруг не будет шрифта, то браузер отрисует его каким-то другим, причем возможно, вообще не таким, например, с засечками.
Если на сайте шрифт одинаковый или инпуты, кнопки, текстареа используют тот же шрифт, что и текст, то разумнее писать inherit. Чтобы не было мучительно больно, когда нужно будет изменить шрифт.

4. user-select: none; с этим вообще аккуратнее.

5.

-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

Пользуйтесь автопрефиксером и ну нужно таскать это в песочницы. https://autoprefixer.github.io/ru/

Как правильно сделать иконки в меню?

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

Как в слайдере сделать так, чтобы высота равнялась ширине?

Антон Литвиненко, не, я спросонья ерунду сморозила. Абсолют всё равно нужен.
Но оберток будет меньше.
https://jsfiddle.net/vwka7bn6/

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

Как в слайдере сделать так, чтобы высота равнялась ширине?

Антон Литвиненко, если задавать элементу, то нужен абсолют. Если псевдо, то без абсолюта можно обойтись с помощью гридов.

Как в слайдере сделать так, чтобы высота равнялась ширине?

towncitybr, левый и правый паддинги у .work__item лишние.
В современном мире абсолюты заменяются на гриды, а паддинг 100% задается псевдоэлементу

Как в слайдере сделать так, чтобы высота равнялась ширине?

Гуглить "css всегда квадратный блок" или "css пропорции блока хак с паддингом'. Или ждать aspect-ratio.
Этот вопрос тут уже тысячу раз был.

Почему верстальщики не соблюдают семантику?

Смотрел такие сайты, как туту.ру, кворк, яндекс услуги.
Разве при этом не нарушается семантика?

Им видимо, пофик.

И почему тег section ни на одном из сайтов не используется, разве его зря ввели в html5?

Нет, не зря.
Семантика важна для доступности.

Почему верстальщики не соблюдают семантику?

Названия классов к семантической разметке не имеют отношения. Совсем.

div - это логический блок.
span - блок для текста

Ну и div ни у span нет семантической нагрузки.
Не нужно так писать и тем более вводить в заблуждение других людей.

Как такое нарисовать с помощью linear-gradient?

Так и нарисовать.
Радиальный градиент, в центре прозрачный, снаружи красный.
Как в втором примере по вашей ссылке.

Можно ли задать класс в зависимости от значения data-* атрибута?

Присоединяюсь к вопросу "зачем бы это?"

Как сделать поля логина и пароля друг под другом?

Евгений Иванов, Как-то так хотя бы https://jsfiddle.net/yro9kdxp/

Как сделать поля логина и пароля друг под другом?

Такая разметка имеет право на существование (не будут бить "фейс об тейбл" если так верстать в коммерческих проектах)?

https://jsfiddle.net/Lveh6aok/

Нет не имеет. Бить будут.
Из того, что я написала выше вы заменили только form и даже не убрали флоаты.

В песочнице jsfiddle в каждом окошке с кодом есть волшебные кнопочки tidy - они сделают код читабельным.

Как поменять местами строки и поля таблицы?

Гридами
https://jsfiddle.net/qy0nzso5/

Как добиться такого градиента?

towncitybr, давайте медленно

Один цвет - сразу был прозрачным
Другой - белый с 1.

Слою задали прозрачность 0.2
Умножаем на 0.2, получаем:
Прозрачный - остался прозрачным 0
Полностью белый стал - белый с 0.2

Вы же вместо 0.2 и 0 пишете 0.2 и 0.8.
Было бы удивительно. если бы получилось по макету.

Как добиться такого градиента?

towncitybr, эммммм....

и зачем вы прозрачный сделали на 0.2 непрозрачным?
Ещё раз перечитайте, пожалуйста, что с каким цветом нужно сделать.

Как сделать поля логина и пароля друг под другом?

1. Гремучая смесь гридов и флоатов.
Уж если вы современные верстальщик и уже используете гриды, то откуда же прилетели флоаты? Их для сеток не используют уже много лет.
2. У вас перебор div'ов. Почитайте про семантику.
Форма это тег form.
Её заголовок это h2 (или какой у вас получится по контенту страницы).
Подписи к инпутам это label.
div вокруг инпута просто лишний.

Дальше расставляете всё это тем же гридом или флексом.

Как найти все HTML элементы, попадающие в область другого элемента?

https://developer.mozilla.org/ru/docs/Web/API/Inte...

В css указан один фон, а по факту передаётся другой, в чём причина?

SevenShots, ответы, которые помогли вам в решении проблемы имеет смысл отмечать решениями. Чтобы это помогло и другим тоже. У вас 7 вопросов и ни в одном не нашлось толковых подсказок?

Как сделать так, чтобы Grid сетка занимала высоту элемента?

Huntgold, показывайте в песочнице.
В моей второй песочнице при изменении ширины поля с результатом видно, что обе части ведут себя как описано в вопросе.