Для демонстрации небольшого объема кода (html, js, css), удобно пользовать онлайн редактором Jsfiddle.

У меня возникла мысль. Как вывести объяснения кода в виде информационных баннеров и озвучить их при помощи SpeechSynthesisUtterance

Мое решение подключить в консоли браузера хром: css, js и создать див с id=”info_mysmx” для отображения текста.

var link = document.createElement("link"); 
link.href = 'https://maxshevtsov.com/w/style.css';
link.rel = 'stylesheet';
document.head.appendChild(link); 

g = document.createElement('div');
g.setAttribute("id", "info_mysmx");
document.body.appendChild(g);   

var script = document.createElement("script"); 
script.src = 'https://maxshevtsov.com/w/script.js';
document.head.appendChild(script);

Файл https://maxshevtsov.com/w/style.css содержит стили отображения окна

body{
  font-family: Arial;
}
#info_mysmx{
  display: none;
  min-width: 200px;
  border: 1px solid #00008B;
  padding: 20px;
  position: absolute;
  left:calc(50% - 100px);
  top:10px;
  background-color: #00BFFF;
  color: white;
  font-size: 20px!important;
}
.show{
  display: block!important;
}
.hide{
  display: none;
}

Файл https://maxshevtsov.com/w/script.js содержит управление листанием слайдеров посредством кнопок PageUp / PageDown и возврата на первый слайдер с помощью кнопки Home. А так же озвучивание при помощи SpeechSynthesisUtterance. 

let text_mysmx = [
'Разберем простую html форму состоящую из html, css и javascript.',
'Html предназначен для создания сайтов в интернете и состоит из тегов, это как правило блоки имеющий открывающий тег например html и закрывающий /html.',
'Внутри тегов может быть расположен как текст так и другие теги.',
'Простая структура документа состоит из обязательных тегов html, head, body.',
'Html – общий тег всего документа.',
'Head – заголовок, в нем расположены теги об странице например title выводящий названия.',
'Charset – устанавливает кодировку, по умолчанию это utf-8 используется на 90% сайтов.',
'Тег body содержит основную часть страницы.',
'h1 – h6 – служит для вывода заголовков разных размеров где h1 самый высокий.',
'Блок form – объединяет набор тегов в форму с именем login-form.',
'Span – логическое выделение текста в форме, а input – это блоки ввода текста.',
'У каждого input есть имя, которое необходимо для проверки введенных значений.',
'У тега div есть атриб��та  class которая создает управляемы класс, мы будем им управлять из css или javascript. В нашем случае в блоке css clear  both делает вывод со следующей строки.',
'Button – необходим для рисования кнопки отправки формы.',
'Также я показал места куда необходимо вставить код в случае запуска не в jsfiddle',
'Перейдем к javascript части',
'Submit  onclick – добавляем события клика по кнопке с id = submit.',
'Определяем переменную login которая берет значения с поля с советующим именем на форме, посредством функции getElementsByName, так же определяем переменную password.',
'Пустую переменную result для вывода результата  и объект resultEl для изменения отображения результата.',
'Проверяем если логин = max и пароль = 123 выводим надпись: Access is allowe',
'И добавляем css класс success который подкрашивает надпись в зеленый цвет, CSS предназначен для управления внешним видом html.',
'Проверяем результат работы.',
'На этом первый урок закончен.'

],
i_mysmx = -1,
show_mysmx = false,
u_mysmx = new SpeechSynthesisUtterance(),
t_mysmx;



document.addEventListener('keydown', function(event) {
  show_mysmx = false;
  if(event.code == 'Home'){
    i_mysmx = 0;
    show_mysmx = true;
  }
  if(event.code == 'PageDown'){
    if(i_mysmx<text_mysmx.length-1) {
      i_mysmx++;
    } else {
      i_mysmx = 0;
    }
    show_mysmx = true;
  }
  if(event.code == 'PageUp'){
    if(i_mysmx>0) {
      i_mysmx--;
    } else {
      i_mysmx = text_mysmx.length-1;
    }
    show_mysmx = true;
  }
  if(show_mysmx){
     document.getElementById("info_mysmx").innerHTML  = text_mysmx[i_mysmx];
     document.getElementById("info_mysmx").classList.add("show");
     u_mysmx.text = text_mysmx[i_mysmx];
     speechSynthesis.speak(u_mysmx);
  } else {
     document.getElementById("info_mysmx").classList.remove("show");
  }
});


speechSynthesis.cancel()

u_mysmx.onstart = function (event) {
    t_mysmx = event.timeStamp;
};

u_mysmx.onend = function (event) {
    t_mysmx = event.timeStamp-t_mysmx;
};

Так же в массиве text_mysmx я прописал все текстовые фразы для показа.

Эти 2 файла стоит разместить на своем сайте, так же возможен вариант написать плагин для хром браузера.

Пример урока