ОТ ЛЮБОПЫТСТВА — К ПЕРВОМУ САЙТУ

НОВИЧОК

Учимся с нуля

ТВОЙ ПРОГРЕСС0 из 21

Один шаг за раз.Ты справишься.

УРОК 01

5–8 минут

ОДНА ИДЕЯ ЗА РАЗ

Почему это работает?

Объясни на примере

КАК ЭТО ВЫГЛЯДИТ В КОДЕHTML

«Объяснить элемент» → выбери слово, кнопку или объект в результате.

Сначала один маленький шаг.

Попробуй и посмотриТВОЙ ПОЛИГОН ДЛЯ ИДЕЙ

index.html

HTMLTab: отступ · Ctrl + Enter: проверить

Результат

LIVE

Ширина телефона: до 320 px

Шпаргалка к этому уроку

CODE//LAB : КОНСОЛЬЛОКАЛЬНЫЙ СИМУЛЯТОР

DevToolsCODE//LAB · учебный инспектор

Dock

REAL · DOM и CSSСправа · потяни границу

Elements — дерево DOM (Document Object Model, структура элементов страницы). Здесь данные из твоего превью.

Где это в настоящем F12?

Chrome → F12 → Elements. Выбери узел в дереве; Styles показывает правила CSS (Cascading Style Sheets, оформление), Computed — рассчитанные браузером значения.

Попробуй: найди h1 и сравни с h2

Выбери h1 в дереве или превью. Ctrl + клик (на Mac — ⌘) по h2 добавит второй узел. Открой Computed → «Сравнить CSS». Обычный клик снова оставит один узел. Если h2 нет, добавь его во вкладке HTML редактора.

Правки живут в превью. Редактор и ответы урока сохраняются отдельно. Обновление превью сбрасывает правки.

Выбери узел → измени HTML или Styles → сравни Computed.

Выбрано: 0

Выбрать из списка

Элемент

Твоя лаборатория

Открой нужный инструмент, когда захочется исследовать чуть больше.

Объяснить элемент

Верхняя кнопка включает выбор. Наведи на интерфейс, код, инспектор или превью и нажми: откроется разбор без выполнения действия. Escape или закрытие карточки завершает режим. С клавиатуры — Tab и Alt + /.

Шрифт интерфейса и кода

Настройка уменьшения движения в системе учитывается автоматически.

Alt + T — перейти в консоль.
Ctrl + Enter — применить или проверить код.

Прогресс, достижения и твой код — в одной копии. Перенос выполняется вручную, без сети.

В черновиках могут быть личные данные или секреты, которые ты ввёл сам. Не публикуй копию и храни её в надёжном месте.

Сохранить копию

Все 21 урок: результаты, подсказки, ответы и код обоих редакторов.

Импортировать

Выбери JSON до 2 МиБ (2 097 152 байта) или вставь текст. Проверка ничего не записывает.

Файл копии Или текст JSON

Предпросмотр изменений

Как применить копию Объединить Заменить

При конфликте брать ввод из копии

Сейчас → копия → результат
Данные	Сейчас	Копия	Итог

Перед применением — резервная копия

Сохрани текущие данные: скачай копию или открой JSON и скопируй его. Отправка файла браузеру ещё не означает, что он сохранён.

Я сохранил файл или скопировал резервную копию текущих данных

Как работает сохранение

Здесь, в браузере: localStorage — локальное хранилище сайта. Для HTTPS оно разделено по origin: протоколу, домену и порту. На другом адресе эти данные не появляются автоматически. Для file:// поведение зависит от браузера: другой путь к HTML может получить отдельное хранилище.
Копия в твоих руках: Другой браузер, профиль или устройство имеет своё хранилище. Очистка данных сайта, приватный режим и переустановка могут лишить тебя прогресса. Экспорт создаёт снимок, импорт переносит его в текущий браузер. Новые изменения сами в копию не попадут.
Аккаунты — позже: Будущая облачная синхронизация потребует сервера, входа в аккаунт и разрешения конфликтов между устройствами. Сейчас сервер и аккаунты не подключены. Пароли и токены не нужны; копии никуда не отправляются.