Andrew

https://codepen.io/kickerock/pen/zJjBxy
Так?
П.с. Ток введите в инпут чет сначала.

Программа специальности не дает мне представления о том, смогу ли я улучшить навыки программирования

Нет.
Ту, которая самому больше интересна и в которой хотелось бы разобраться.

:)
99 / 99 - это не два двузначных числа, а 4 однозначных, на каждой позиции по числу.

9 - Represents a numeric character (0-9)

Поэтому вам нужно плясать либо в сторону того, чтобы первое число, если не заполнено само, заполнялось нулём, либо чтобы оно скрывалось.
П.С. Для таких нужд я бы юзал input[type=range], а не масочки, там можно и минимум и максимум задать.

else if
switch

Вы в функцию download точно никакие параметры не хотите передать?

success: function() {
                        download(param1,param2,param3);
                        $('form').trigger('reset');
                        send_modal_form();
                    },

param1 - сам контент:

массив Array из объектов ArrayBuffer, ArrayBufferView, Blob, DOMString, или смесь любых из подобных объектов, которая может быть размещена внутри Blob. DOMStrings представлены в кодировке UTF-8.

param2 - имя нового файла
param3 - Тип файла.

type, with a default value of "", that represents the MIME type of the content of the array that will be put in the blob.

Отсюда

Загрузилась страница->Совершилось действие(завершение загрузки страницы, допустим)->Ajax запрос к серверу->Ответ от сервера и получение массива с записями -> Рендер в нужном виде.
Как еще это может работать?

Слать кучу аякс-запросов после загрузки самой страницы тоже на вариант как я понимаю.

То есть? Откуда страница(сервер) знает какие вам записи нужны? Или предполагается, что на этой странице уже известны нужные записи в таблице?

.js'ы где?
Читайте

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Оно?
Или я не правильно понял задачу?

flex-direction: column, оно?

А как вы думаете оно должно работать? Структуру чуть поменяйте. Сделайте иконку(стрелочку) по клику на которую оно будет появляться и исчезать.

Looping is encoded into the GIF itself, not the img tag. Open the GIF in an image editor and change the mode to loop, or use a different GIF. The loop attribute is an invalid, deprecated attribute only meant to work when the src is a video.

Отсюда
Можете поиграться с загрузкой изображения заново, каждые 2 секунды после hover'а, но лучше за'loop'те gif'ку.

<input type="email">
Во время сабмита, по-дефолту проверяет(и выводит сообщение), если неправильно введёно мыло(#@#.#) и введены символы.