profesor08

Хоть 100 запускай, они распределятся примерно поровну, если один подвиснет, то остальные продолжат работу.

Ноутбуки - очевидный выбор. Тут не нужна никакая периферия, включил и работай. Они компактные. Огромный выбор под любой бюджет. Обучающиеся в дальнейшем, скорее всего, будут пользоваться ноутом, некоторые может возьмут стационар.

Ты мог зайти с другого конца, и не аниммировать margin, а прилепить кнопку в самый низ top:100, а потом slideDown...

Вместо .mouseover лучше используй .on("mouseover", function() {}), а вместо самого mouseover, используй mouseenter. И разберись как они работают изнутри.

И приведи свой код в порядок.

И незачем делать кучу выборок, каждый раз по много раз. Сохрани ссылку на элемент и пользуйся ей.

https://codepen.io/Profesor08/pen/NBMEEr

Хоть сликом не пользуюсь несколько лет, но все еще помню, что там есть slickGoTo, хорошо документированная.
.slick('slickGoTo', 0)

Для этого тебе понадобится morphSVG плагин, с его помощью можешь трансформироваться свою svg как хочешь. В твоем случае, чтоб линия сначала шла до низа, потом вбок.

То есть твой d будет изменяться так:
начальное состояние: d="M272.2.3"
состояние 2: d="M272.2.3l-61 93"
состояние 3: d="M272.2.3l-61 93H0"

Там при каждом движении мышки отправляется на сервер инфа и загружается кусок видео, который воспроизводится. Отсюда и задержки. Возможно оно рендерится прямо на клиенте, так как подгружаются куча картинок. Но так и не понятно в чем тут смысл, если можно сделать на webgl гораздо лучше и удобнее, 60fps и без задержек.

Ну для начала вынеси создание своего tableView в другой класс, тем самым в main будет лишь его вызов. Вынести и распихать по разным функциям и классам можно хоть каждую строчку.

Задаешь секциям фон, потом выставляешь для первой псевдоэлемент в самый низ, для второй в самый верх, задаешь им какой-то фон чтоб отличать, а далее работаешь с clip-path. Все.

https://codepen.io/Profesor08/pen/OwvbwY?editors=0100

Картинки идут с тенью одной картинкой, png/svg. Единственное придется поиграться с margin и z-index, чтоб настроить правильное позиционирование.

Если он в другой ветке или на другом уровне dom дерева, то ничего не выйдет через css. Делай на js, делов там на 5 строк кода.

Слева селект (или любой выпадающий список), посредине инпут, справа кнопка. Задай им фон и правильный бордер. Расположить в ряд можешь задав контейнеру display:flex.

.etot-element {
  display: flex;
}

<div class="etot-element">
  <select>
    <option>Browse</option>
    <option>Blabla</option>
  </select>
  <input type="text" placeholder="Search for Item...">
  <button><div class="search-icon"></div></button>
</div>