Открылась «Кодовёрстка» — бесплатный учебник по вёрстке от NEXORA

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

Без регистрации, без рекламы и без платных тарифов.

Научиться верстать сегодня несложно — сложно научиться понимать, что ты

делаешь. Курсов много, но большинство из них устроены одинаково: посмотри

видео, повтори за преподавателем, получи работающую страницу. Проблема

вылезает через месяц, когда макет чуть отличается от учебного, а объяснить

собственный код человек не может.

«Кодовёрстка» построена от обратного. Каждый урок — это короткий кусок

теории, живой пример, который можно тут же сломать и починить, разбор

типичных ошибок и задание с настоящей проверкой. Не «сверься с ответом»,

а разбор твоей разметки и вычисленных стилей с объяснением, что именно

не сходится.

Что внутри

Курс первый — «HTML и CSS с нуля». Двадцать пять уроков от «что такое

тег» до готового лендинга: структура документа, семантика, формы, доступность,

селекторы и каскад, блочная модель, Flexbox и Grid, адаптивность, переходы

и анимации.

Курс второй — «Кодовёрстка Про». Ещё двадцать пять уроков о том, как

верстают на работе. Слои каскада `@layer`, родительский селектор `:has()`,

запросы к контейнеру, `subgrid`, логические свойства. SVG изнутри и анимация

контуров, обрезка и маски, фильтры, типографика. Именование, дизайн-токены

и темы, Sass по делу, порядок в проекте на пять тысяч строк. Почему сайт

тормозит и как это измерить, доступность уровня production, кроссбраузерность.

И пять законченных проектов: лендинг, дашборд, интернет-магазин, портфолио.

Разборы, которые можно потрогать

В уроках сорок один интерактивный разбор — и это не картинки со стрелочками.

Слои каскада можно перетаскивать и смотреть, какое правило побеждает и почему

вес селектора здесь ни при чём. Точки в редакторе `clip-path` тянутся мышью,

и готовый CSS обновляется на лету. Есть подбор фильтров, конструктор дизайн-токенов,

инспектор ARIA, шкала специфичности, сравнение подходов к CSS-архитектуре.

Каждый разбор — отдельный маленький инструмент, а не иллюстрация.

Редактор прямо в уроке

Примеры не статичные: под каждым — редактор с подсветкой, автозакрытием тегов,

собственной отменой по Ctrl+Z, комментированием по Ctrl+/ и переносом строк

по Alt+↑↓. Правишь код — превью обновляется. Тот же редактор работает

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

и отправить кому угодно.

Ничего не уходит на сервер

У «Кодовёрстки» нет аккаунтов, нет базы данных и нет аналитики, следящей

за учеником. Прогресс, результаты тестов, заметки к урокам и избранное

в шпаргалках лежат в браузере — там же, где остаются и после закрытия вкладки.

На другом устройстве прогресс начнётся заново, и это честная плата

за отсутствие регистрации.

Если хранилище недоступно или переполнено, сайт не делает вид, что всё

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

Сертификат за курс тоже не приходит письмом — он рисуется прямо в браузере,

имя вводит сам ученик, и файл скачивается на устройство.

Учебник, сверстанный по своим же правилам

Отдельная история — как сделан сам сайт. Учебник, который учит писать CSS

руками, не имеет права быть собранным на чужом.

Здесь нет ни одного фреймворка: чистый PHP на сервере, нативные ES-модули

в браузере, весь CSS написан вручную. Ни Bootstrap, ни Tailwind, ни jQuery,

ни React, ни сборщиков. Подсветка синтаксиса своя, редактор кода свой —

вместо готовой библиотеки.

Ни одной растровой картинки в проекте тоже нет: логотип, иллюстрации к урокам,

сертификат и заставка нарисованы кодом. Все демонстрации выполняются

в изолированном `iframe`, и права на выполнение скриптов и доступ к документу

никогда не выдаются вместе.

Сайт целиком читается с выключенным JavaScript, полностью проходится

с клавиатуры, уважает системную настройку «меньше движения» и печатается

на бумагу в одну колонку без интерфейса.

Что дальше

Следующим шагом станет курс по JavaScript — движок с самого начала рассчитан

на несколько курсов, и начатое не потеряется.

«Кодовёрстка» открыта: кодоверстка.нексора.рф

Пятьдесят уроков, сорок один разбор, тринадцать часов чистого чтения.

Бесплатно, без регистрации и без рекламы.