Как устроен этот учебник: Сквозь время

«Сквозь время» — учебник веб-разработки, где уроки связаны картой понятий, а материал закрепляют вспоминанием и интервальными повторениями карточек.

Карта, а не оглавление

В обычной книге главы идут одна за другой. Здесь уроки связаны через понятия. Урок про ссылки опирается на урок про теги, а урок про дизайн-системы опирается на уроки про цвет и шрифт. Эти связи нарисованы на карте: уроки это точки, а линии показывают, что из чего вытекает.

Поэтому на карте одни уроки открыты, а другие закрыты. Закрытый урок не запрещён, он просто пока опирается на то, чего вы не видели. Он откроется, как только вы пройдёте уроки, объясняющие нужные ему понятия.

Идти можно по порядку, а можно прыгнуть в любую часть, если всё нужное для неё уже пройдено. Кнопка «Продолжить» на главной всегда ведёт к первому открытому уроку, который ждёт вас.

Проверьте себя: почему урок может быть закрыт?

Потому что в нём используются понятия, которые объясняют другие уроки, а вы их ещё не прошли.

Из чего состоит урок

Каждый урок устроен одинаково, чтобы вы не тратили силы на то, где что искать.

Зачем. Одна фраза о том, что вы сможете после урока.
Теория. Короткие части. После каждой стоит вопрос «Проверьте себя».
Живая схема. То, что можно потрогать: подвигать ползунок, нажать кнопку, увидеть, как устроено.
Практика. Вы делаете кусочек своего сайта, а учебник тут же проверяет, получилось ли.
Тест. Несколько вопросов. Если ответ неверный, объясняется почему и куда посмотреть.
Карточки. Три-пять карточек для повторения позже.
Источники. Откуда взят материал и где читать глубже. Все ссылки открытые.
Дальше. Какие уроки откроются после этого.

Практика есть не в каждом уроке с самого начала: в первых трёх уроках вы заполняете описание своего проекта, а редактор появится в четвёртом.

Почему здесь вспоминают, а не перечитывают

Есть неприятный факт про память. Когда вы перечитываете текст, вам кажется, что вы его знаете, потому что он у вас перед глазами. Но узнать и вспомнить это разные вещи. Узнавание легко, а вспоминать приходится в жизни: на работе, в разговоре, когда вы пишете код и рядом нет конспекта.

В исследованиях по психологии памяти это называют эффектом тестирования: человек, который пытается вспомнить материал, запоминает его заметно прочнее, чем тот, кто просто перечитывает. Сама попытка вспомнить, даже неудачная, укрепляет память.

Из этого выросло устройство уроков. Вопрос после каждой части теории нужен для этого: закройте глаза или прикройте ответ и попробуйте ответить, а потом проверьте. Тест и карточки устроены так же.

Проверьте себя: чем вспомнить отличается от узнать?

Узнать значит увидеть знакомое. Вспомнить значит достать из памяти без подсказки. Закрепляет второе.

Карточки и интервальные повторения

Даже то, что вы вспомнили сегодня, через неделю частично забудется. Забывание идёт по кривой: быстро в первые дни, потом всё медленнее. Если повторить в нужный момент, кривая снова поднимается, и теперь забывание идёт медленнее. Так можно повторять с растущими промежутками: день, три дня, неделя, месяц.

Это называется интервальными повторениями. Не нужно держать расписание в голове: после каждого урока его карточки попадают в раздел «Повторение», и там приложение показывает вам те карточки, которые пора повторить.

Подвигайте промежуток на схеме и посмотрите, как меняется итог.

Одна карточка за 60 дней

С повторениями (20 раз) к 60-му дню: 100%. Без повторений: меньше 1%. Точки на графике: дни, когда вы смотрели карточку. Слишком редко (раз в 30 дней) карточка успевает забыться почти целиком, слишком часто (каждый день) уходит лишний труд. Это схема; реальное расписание считает алгоритм FSRS.

Расписание считает алгоритм FSRS, с открытым кодом и описанием. От вас нужно одно: честно сказать, как вам далась карточка. Четыре кнопки:

Снова: не вспомнили совсем. Карточка вернётся скоро.
Трудно: вспомнили, но с трудом.
Хорошо: вспомнили.
Легко: вспомнили сразу, без усилия.

Если нажать «Легко» там, где вы на самом деле не помните, карточка вернётся нескоро, и вы её забудете. Тут нечестность обманывает только вас.

Проверьте себя: что будет, если нажать «Легко» на карточке, которую вы забыли?

Следующее повторение отодвинется слишком далеко, и к тому времени карточка забудется.

Практика: один сайт сквозь эпохи

Вы будете делать один и тот же сайт снова и снова, в каждой эпохе веба её средствами: в 1996 году просто разметкой, в 2005-м с отдельными стилями, потом на конструкторе, потом адаптивно, и так до наших дней. Так видно не только как делать, но и почему веб стал таким. Подробнее в следующем уроке.

Ваш код работает в закрытой «песочнице»: страница видна в окне предпросмотра, но не может ничего отправить в интернет и не видит ничего, кроме себя. Список проверок рядом с окном сразу показывает, что уже получилось.

Эхо и что делать, если застряли

Эхо это проводник по курсу, и вы будете встречать его рядом с практикой. Он подсказывает по ступеням. Сначала намёк, потом подсказка поконкретнее. Если проверка не проходит, он объяснит, что именно она хочет. Готовое решение можно посмотреть, но только после вашего подтверждения: в нём вы увидите, чем оно отличается от вашего.

Если хочется спрашивать Эхо своими словами, в настройках можно вписать свой ключ от ИИ-сервиса. Без него Эхо отвечает заготовленными подсказками, и это ничего не стоит. Подробнее о ключе в пятом уроке.

Где живёт ваш прогресс

Здесь нет регистрации и нет сервера, который хранил бы ваши данные. Всё, что вы делаете, браузер хранит у себя, на вашем устройстве. Это удобно и приватно, но у этого есть цена: если очистить данные сайта в браузере или сменить компьютер, прогресс исчезнет.

Поэтому время от времени сохраняйте прогресс файлом: «Настройки», «Сохранить прогресс». Этим же файлом прогресс переносится на другой компьютер. Другой копии нет.

Проверьте себя: как перенести прогресс на другой компьютер?

Сохранить его файлом в настройках, а на другом компьютере открыть учебник и загрузить этот файл там же.

Сделайте сейчас

Три небольших дела, ради которых этот урок:

Откройте карту и найдите на ней урок, в названии которого есть слово из вашего проекта или профессии. Посмотрите, какие уроки ведут к нему.
Откройте настройки и впишите в поле «Кто вы, или что за идея» одну фразу о своём проекте. Пока одну: бриф целиком вы заполните в третьем уроке. Если проекта нет, оставьте пример.
Нажмите «Завершить урок» ниже. Его карточки сразу попадут в «Повторение». Ответьте на три из них сегодня, остальные позже.