DIGITAL ДЛЯ БИЗНЕСА · АРСЕНИЙ АСЯНОВ
EN RU

Разбор · Учебный сайт

Три кита веба

Учебный одностраничник о трёх технологиях, из которых сделан любой сайт: что такое HTML, CSS и JavaScript, чем они отличаются и как работают вместе. Собран ровно из этих трёх технологий — с живыми демонстрациями, песочницей для кода и мини-тестом.

Тип
Учебный сайт, личный проект
Сроки
9 сентября 2026, 1 коммит
Стек
HTML, CSS, JS в трёх файлах без зависимостей · 1251 строка
Ссылки
живая страница ↗
код на GitHub ↗

Первый экран, ширина 1440px.

Телефон, 393px.

Песочница на телефоне.

01

Для кого и зачем

Страница для тех, кто только начинает: объяснить основы фронтенда за один вечер простым языком и сразу дать попробовать самому. Вместо сухих определений — аналогия (HTML — скелет, CSS — одежда, JavaScript — умение двигаться), примеры кода с кнопкой «Копировать» и демонстрации, где результат виден сразу.

Заодно это показ самого подхода: никаких фреймворков, сборщиков и веб-шрифтов — три файла, которые открываются двойным кликом и работают без интернета.

02

Что сделано

  1. Первый экран«HTML, CSS и JavaScript — из чего сделан любой сайт» и три карточки-аналогии с примером кода
  2. HTMLтеги и атрибуты, скелет документа, семантическая вёрстка
  3. CSSселекторы, блочная модель, каскад и специфичность; живая демонстрация на кнопках
  4. JavaScriptпеременные, функции, условия, циклы, DOM и события; счётчик как пример
  5. Как они работают вместечто происходит, пока страница грузится, и таблица сравнения трёх технологий
  6. Песочницаредактор с вкладками HTML / CSS / JS и живым превью
  7. Мини-тестпять вопросов с пояснениями и итогом
  8. Маршрут новичкас чего начинать и что читать дальше
  • Файлыindex.html — 442 строки, style.css — 478, script.js — 331. Ни фреймворков, ни сборщика, ни подключаемых шрифтов.
  • ТемыТёмная по умолчанию и светлая; переключатель в шапке запоминает выбор.
  • НавигацияПолоса прогресса чтения, подсветка текущего раздела в меню и кнопка «наверх».
  • АдаптивДве точки перелома — 900 и 720px; на узком экране меню прячется за кнопку ☰. При «уменьшить движение» анимации выключаются.

03

Решения, на которые стоит посмотреть

  • У каждой технологии свой цвет

    HTML — оранжевый #e8622c, CSS — синий #3a8ee0, JavaScript — жёлтый #ecc72c. Эти три переменные красят подсветку кода, карточки разделов, заголовки колонок в таблице сравнения и полосу прогресса вверху — по цвету сразу понятно, о какой технологии речь.

  • Песочница собирает страницу в iframe

    Три поля — HTML, CSS и JS — склеиваются в один документ и попадают в iframe через srcdoc. Превью обновляется через 350 мс после последнего нажатия, а не на каждый символ. В собранную страницу подмешивается window.onerror, поэтому ошибка в коде посетителя показывается прямо в превью, а не теряется в консоли. Клавиша Tab в редакторе вставляет два пробела.

  • Демонстрация сама пишет CSS

    Кнопки «Круглый», «Градиент», «Повернуть» и «Тень» включают и выключают свойства у блока, а под ним сразу собирается получившийся код. Включённые свойства хранятся в Map, поэтому порядок строк в коде совпадает с порядком нажатий, а «Сбросить» возвращает блок и код в исходное состояние.

  • Работает, даже если открыть файл с диска

    При открытии через file:// часть браузерных возможностей недоступна. Тема сохраняется в localStorage внутри try/catch — если хранилище запрещено, выбор просто не запомнится, а страница не сломается. Кнопка «Копировать» пробует Clipboard API, а без защищённого соединения копирует через скрытое поле ввода.

  • Тест собирается из данных

    Вопросы — массив объектов с вариантами, номером правильного ответа и пояснением, карточки строит скрипт. После ответа варианты блокируются, правильный подсвечивается и появляется пояснение, а после пятого вопроса — итог со счётом и плавная прокрутка к нему.

Что стоит доработать

  • Во всех пяти вопросах теста правильный ответ — второй вариант, поэтому тест можно пройти, не читая.
  • Tab в редакторе песочницы вставляет отступ, и с клавиатуры из поля не выйти клавишей Tab.
  • Кнопка меню ☰ не сообщает экранным дикторам, открыто ли меню: у неё нет aria-expanded.
  • Кнопка «наверх» прокручивает плавно даже при «уменьшить движение»: плавность задана в скрипте, и CSS-настройка на неё не влияет.

04

Как проверить

  • Поменять код в песочнице и посмотреть превью песочница ↗
  • Пройти мини-тест из пяти вопросов тест ↗
  • Скачать три файла и открыть index.html с диска GitHub ↗

Связь со мной

Есть задача?
Пиши.