Для демонстрации небольшого объема кода (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 файла стоит разместить на своем сайте, так же возможен вариант написать плагин для хром браузера.

Пример урока

Создание видео урока по веб программированию с использованием: Jsfiddle, SpeechSynthesisUtterance, OBS Studio