Сергей delphinpro

Даже не знаю, что здесь может не получиться...

Убрать высоту, добавить внутренние отступы.

Кроме самых основ:
React - Vue - Angular, в порядке востребованности.
Typescript уже по умолчанию идет в них.
Webpack/Vite тоже по дефолту.
Разумеется, предполагается хорошее знание нативного javascript.
Узкопрофильные API джаваскрипта, webgl, assembly и т.п. можно пока опустить, может и не понадобятся.
Препроцессинг для css. Тут лидирует Scss.
Ну jquery хорошо бы знать, если придется ковырять легаси. Много где используется.

Поле загрузки файла заполнить невозможно.

Селект можно

<?php
$selected = $_POST['group'] ?? null;
?>
<select id="group" name="group" class="form-control form-control-sm">
      <option value="#">Выберите группу</option>
      <option value="00001" <?= $selected == '00001' ? 'selected' : '' ?> >Группа 1</option>
      <option value="00002" <?= $selected == '00002' ? 'selected' : '' ?> >Группа 2</option>
      <option value="00003" <?= $selected == '00003' ? 'selected' : '' ?> >Группа 3</option>
</select>

нужно создать форму

<form action="receive_data.php" method="post">
  <input name="username">
  <button type="submit">Send</button>
</form>

В файле receive_data.php, получить переданные данные и, например, отправить их вам на почту.
А потом сделать редирект на другую страницу.

<?php

$name = $_POST['username'];
$to      = 'nobody@example.com';
$subject = 'the subject';
$message = 'hello '.$name;
$headers = 'From: webmaster@example.com';
mail($to, $subject, $message, $headers);

header('Location: /other_page.php');

1. Нужно изменить либо формулы, либо бокс-модель. Второе проще box-sizing: border-box;
2. У вас три колонки, а значит два промежутка по 30px: width: calc((100% - 30px * 2) / 3);
3. В жопу марджины. Для указания промежутков есть специальное свойство gap: 20px 30px;

Итог:

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}

.item {
  box-sizing: border-box;
  width: calc((100% - 30px * 2) / 3);
  text-decoration: none;
  color: #000;
  padding: 20px;
  border: 1px solid #000;
}

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

function makeItem(title) {
  return `<a class="dropdown-item"><i class="icon icon-line-circle"></i><span>${title}</span></a>`;
}

fetch('../russia.json')
  .then(response => response.json())
  .then(json => {
    const itemsHtmlString = json.map(item => makeItem(item.city)).join()
    $('.search__city .dropdown-menu').html(itemsHtmlString);
  });

для .container установлен min-height:100vh
вот он и становится равным 100vh

А чем, по-вашему, свойство baсkground-image отличается от всех других?

.block {
  background-image: url('image.jpg');
}
@media (max-width: 700px) {
  .block {
    background-image: url('image-small.jpg');
  }
}

<div class="servers">
  <p class="server-name">НМ</p>
  <p class="server-name">???</p>
  <img class="servers_image" src="content/nm11.png">
  <img class="servers_image" src="content/dont_know.png">
</div>

.servers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  row-gap: 3em;
}
.server-name{
    /* display: inline-block; */
    /* width: 10px; */
    /* position: relative; */
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
    /* position: relative; */
    /* top: 25px; */
    /* left: 85px; */
  text-align: center;
}
.servers_image{
   height: 300px;
   /* width: 230px; */
   border-radius: 35px;
   /* margin-bottom: 3em; */
   /* margin-right: 50px; */
}

https://codepen.io/delphinpro/pen/RwJgaLa
Попробуйте убрать высоту у html и body и посмотрите, что станет с красным блоком.

Объяснение: высота (в т.ч. минимальная), заданная в процентах, может быть рассчитана только, если у родителя она явно задана.