Neyury

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

Вариант на чистом js

var test = document.querySelector(".test-1");
var demo = document.querySelector(".demo-1");
if( test.classList.contains("active"){
     demo.classList.add("active");
} else{
     demo.classList.remove("active");
}

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

О том как добавлять, проверять, удалять, переключать классы на нативном js можно почитать на learn.javascript.ru

На какое событие вешать код - зависит от фраемворка. О том как повесить на элемент событие, можно почитать на learn.javascript.ru (вторая ссылка)

В любом случае ему понадобятся знания по html и css, для их изучения хорошо подойдет htmlacademy

Из полезного могу порекомендовать эти справочники по html и css

Как вариант (помимо стартовой ya.ru), это расширение "визуальные закладки" от яндекса, которое отображается при открытии новой вкладки

Один из вариантов реализации, это установить у этого блока фон, аналогичный основному и спозиционировать его

Возможно вам потребуется такое свойство как
background-attachment: fixed;
Оно устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.

Я пользуюсь этим сайтом, чтобы вспомнить свойства или теги и их атрибуты

Полное руководство по центрированию (и по горизонтале и по вертикале)

В большинстве случаев использую px (шрифты, высота блоков, максимальная ширина, отступы внешние и внутренние, бордюры и т.д) Проценты использую тогда, когда нужно, чтобы дочерний элемент был по размерам как и его блок-родитель(или не больше, чем блок-родитель) и в адаптивной верстке, когда нужно выстраить несколько блоков друг за другом (плитка товаров или sidebar + content) (хотя часто даже без % обхожусь, используя flex и min/max-width дочерник элементов)

Советую прочитать эту статью, там описаны все варианты центрирования по горизонтали и вертикали для строчных (включая inline-block) и блочных элементов.

Если это активный элемент

.item.active{ 
    border-bottom: 1px solid blue;
}

или так

.item.active{ 
    border-color: blue;
}

Соответственно до этого бордер прозрачный, либо цвета фона.

Больше о border можно почитать тут

Изучаю питон, версию 3.x
Могу ответить на два вопроса.

Какая самая простая библиотека для GUI? Я пробовал pyQT, возможно есть что-то легче для новичка?

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

Как будет работать такое приложение если у пользователя на win нет питона

Интерпритатор встраивается в exe

Относительно реляционных СУБД проектировать можно так.

• Подробно описываешь предметную область
  
• Выписываешь из предметной области все существительные и глаголы
  
• Определяешь среди существительных что является сущностью, а что атрибутами сущности (атрибут является атомарным значением)
  
• Строишь таблички (на каждую сущность - таблица) где указываешь атрибуты, у атрибутов тип данных и ключи (первичные и внешние), дописываешь недостающие атрибуты
  
• На основе сущностей строишь блок-схему со связями между сущностями (на этом этапе допускается связь много ко многим)
  
• Смотришь на эту схему и устраняешь очевидные недостатки, исправляешь места, в которых есть связь много ко многим (допустим с помощью ассоциативной таблицы)
  
• Поздравляю, у тебя готова схема базы данных, а именно сущности (таблицы), атрибуты сущностей (столбцы), а так же связи между таблицами
  

Я бы реализовал псевдоэлемнтом как уже написал Сергей.

Второй вариант это использовать фоновое изображение у контейнера, которое отцентровано по вертикали и повторяется по горизонтали.