xmoonlight

Здесь посмотрите.

Один HTML и всё инлайном в нём - один файл и все ресурсы - внутри.
Схемы - исключительно в SVG (тоже внутри этого единственного HTML).

хочется что-то взять чтобы было удобней изучать техническую литературу.

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

Ctrl+Alt+C ->Application->Storage

Я пользуюсь рабочим и хорошо зарекомендовавшим планом действий:

1. Выучите основные принципы грамматики - здесь.
   
2. Всегда переводите каждое незнакомое предложение по словосочетаниям через любой переводчик, если смысл теряется - переводите слова отдельно, чтобы корректно перевести.
   
3. Переведите пару-тройку документаций API с английского на русский (перевода которых ещё нет на русском, но имеющие большую популярность и комьюнити).
   Очень важно: сделать это максимально корректно и литературно.
   Так, чтобы это было всем понятно без чтения исходного английского текста (для сверки верной трактовки перевода).
   

Если Вам нужен интерактив - то только программирование.
Если нужна программа-переплёт статичных страниц - то зависит от выходного формата.
Уточните.

Начинать нужно с правильного построения архитектуры веб-приложения.
Паттерны проектирования лишь помогают "упаковать" логику в созданную архитектуру.