Основы HTML и семантика
Каркас документа, блочные и строчные элементы, семантические теги и живой редактор разметки.
Ваш прогресс по демонстрациям
Отметьте изученные занятия ниже
Занятия и демонстрации
Каждая страница — отдельная тема с теорией, живым примером, разбором кода и заданием для самопроверки.
CSS: Flexbox и Grid
Интерактивная песочница: меняем направление, выравнивание и отступы — сразу видим результат и CSS-код.
Адаптивная вёрстка
Медиазапросы, mobile-first и симулятор устройства: смотрим, как один макет ведёт себя на разных экранах.
JavaScript, DOM и хранилище
Список задач: создание элементов, обработка событий, делегирование и сохранение в localStorage.
Формы и валидация
Constraint Validation API, пользовательские сообщения об ошибках и сбор данных формы в JSON.
Сетевые запросы: Fetch API
async/await, обработка ошибок, состояния загрузки и разбор JSON — на примере реального публичного API.
PWA: офлайн и установка
Манифест, Service Worker, кеширование и установка приложения на устройство — целиком на статике.
Как пользоваться материалами
Если вы были на занятии
Откройте демонстрацию, повторите действия преподавателя и выполните задание в конце страницы. Код можно менять прямо в браузере — ничего не сломается.
Если вы пропустили занятие
Каждая страница содержит теоретическую выжимку, полностью рабочий пример, разбор кода и ссылки на предыдущее/следующее занятие. Порядок прохождения — сверху вниз.
Сайт полностью статический: он работает на любом хостинге без PHP, Node.js и баз данных.
Интерактивность обеспечивают возможности самого браузера.