Оформить
КурсыКак учимсяСтоимостьВопросыБлогВойти
Веб-разработкаСредний уровеньТренажёр

Курс «Продвинутая вёрстка»

Курс для тех, кто прошёл основы HTML и CSS. Вы разберёте современный CSS: таблицы и адаптивные картинки, диалоги, :has() и контейнерные запросы, цвета в oklch, текучие размеры, поповеры, анимации и переходы между страницами, SVG и декоративные эффекты. Сверстаете мобильное приложение банка на каскадных слоях, договоритесь о CSS по БЭМ и CUBE, а потом соберёте проект на Vite и перепишете стили на Sass и Tailwind CSS.

Начать учитьсяПрограмма курса

Входит в подписку на все курсы: 1 500 ₽ в месяц или 15 000 ₽ в год

Оценка 4,9 из 5.45 отзывов в Google55выпускников на Хабр Карьере
Уровень
Средний уровень
Формат
Онлайн, в своём темпе
Проверка
Автопроверка в тренажёре
Доступ
Сразу после оплаты

Кому подойдёт курс

  • 01

    Прошли основы HTML и CSS и хотите верстать на уровне 2026 года

  • 02

    Верстаете вместе с AI-агентом и хотите понимать и править его CSS

Чему вы научитесь

  • Верстать на современном CSS: :has(), контейнерные запросы, oklch, clamp()
  • Делать интерфейсные состояния, поповеры и анимации без JavaScript
  • Работать с SVG изнутри и декоративными эффектами
  • Держать CSS проекта в порядке: слои, БЭМ, CUBE, @scope
  • Собирать проект на Vite и писать стили на Sass и Tailwind CSS
  • Сверстать мобильное приложение банка

Темы и инструменты

  • CSS
  • :has()
  • Контейнерные запросы
  • SVG
  • Sass
  • Vite
  • Tailwind CSS

Как проходит обучение

Каждая тема — это урок, задача и разбор решения.

  1. 1

    Урок

    Короткий текст с примерами кода и схемами

  2. 2

    Задача

    Код в браузерном редакторе, тесты запускаются сразу

  3. 3

    Проверка

    Решение проверяется сразу, с подсказками и разбором

  4. 4

    Проект

    Итоговая работа модуля, которую можно показать

Программа курса

18 модулей, 316 уроков, из них 163 задачи в тренажёре. Все уроки открыты сразу — проходите в удобном порядке.

Модуль 1Таблицы, медиа и адаптивные изображения
  • Таблицы
  • Части таблицы
  • Оформление таблиц
  • Сокращения, термины и правки
  • Код на странице
  • Видео и аудио
  • Раскрывающийся блок
  • Ещё несколько элементов
Модуль 2Диалоги, контейнерные запросы и :has()
  • Элемент dialog
  • Модальный диалог
  • Селекторы атрибутов и :is()
  • Многоточие и переносы
  • Обтекание: float
  • Вложенность и другие возможности CSS
  • Контейнерные запросы
  • Селектор :has()
Модуль 3Современная основа
  • Сброс стилей нового поколения
  • Логические свойства до конца
  • Цвет в oklch()
  • Оттенки через color-mix() и относительные цвета
  • Одна система токенов для светлой и тёмной темы
  • Текучие размеры через clamp()
  • Одна текучая шкала для текста и отступов
Модуль 4Внутренние раскладки
  • Сетка контента с выходом за колонку
  • Сетка без медиазапросов
  • Подсетка для частей карточек
  • Боковая панель, которая переносится сама
  • Единицы контейнера и запросы стиля
  • Слои в одной ячейке грида
  • Безопасное выравнивание и overflow: clip
Модуль 5Отступы, форма и текст
  • Отступы между соседями задаёт родитель
  • Отступ секции зависит от соседей
  • Автоматический внешний отступ
  • Концентрические скругления
  • Длинный текст: перенос, многоточие, обрезка по строкам
  • Картинка, которая держит любую загрузку
  • Цифры одной ширины и подпись по высоте букв
  • Иконка по размеру текста
Модуль 6Интерфейсные состояния
  • Одно кольцо фокуса
  • Ховер только там, где он есть
  • Нажатие: отклик и область больше видимой
  • Вся карточка — одна ссылка
  • :has() для состояния страницы
  • Подсказки формы после ввода
  • Поле, которое растёт с текстом
Модуль 7Показать и скрыть
  • Поповер
  • Привязка к кнопке
  • Полоска, которая едет к активному пункту
  • Появление из display: none
  • Аккордеон с анимацией высоты
  • Раскрытие шторкой через clip-path
Модуль 8Движение
  • Движение по согласию
  • Токены движения
  • Анимируем кастомное свойство
  • Тень без перерисовки
  • Переходы между страницами
  • Анимации по прокрутке

Что ещё входит в подписку

Курс не нужно покупать отдельно: подписка открывает всю школу.

Стоимость обучения

Одна подписка открывает все курсы школы и продлевается автоматически.

Подписка на месяц

1 500 ₽

Подписка на год

15 000 ₽

В любую подписку входит

  • 20 курсов: Вайбкодинг, Claude Code, LLM, AI-агенты, Инференс LLM и ещё 15
  • Новые курсы и обновления без доплат
  • Тренажёр с автопроверкой в браузере: 17 курсов из 20
  • Учёба в своём темпе, без расписания
  • Отмена в любой момент по ссылке из письма об оплате

Оплата на странице Т-Банка: карта, T-Pay или СБП. Доступ открывается сразу после оплаты на courses.moscoding.ru.

Частые вопросы

Что входит в подписку?

Все курсы школы, сейчас их 20: Вайбкодинг, Claude Code, LLM, AI-агенты, Инференс LLM, JavaScript, TypeScript, React, TanStack, Системный дизайн, Python, Алгоритмы, Математика, Solidity, HTML и CSS, Продвинутая вёрстка, Git, SQL, Linux, Rust. Новые курсы и обновления уроков появляются в подписке без доплат.

Нужен ли опыт программирования?

Нет. С нуля начинаются Вайбкодинг, Claude Code, JavaScript, Python, HTML и CSS, Git, SQL и Linux. React, TypeScript, TanStack и Solidity удобнее проходить после основ JavaScript, а LLM, AI-агентов и Rust — когда уже пишете код на любом языке.

Как проходит обучение?

Короткие уроки с примерами и задачи. В 17 курсах из 20 задачи решаются в браузерном тренажёре: решение проверяется сразу, а если не прошло, есть подсказки и разбор. В курсах AI-агенты, TypeScript и React задачи решаете у себя и сверяетесь с разбором. Учитесь в своём темпе, расписания нет.

Нужно ли что-то устанавливать?

Для курсов с тренажёром — нет: редактор кода и тесты работают прямо в браузере, хватит ноутбука или компьютера с интернетом. Для курсов AI-агенты, TypeScript и React понадобится редактор кода на своём компьютере.

Можно попробовать до оплаты?

Да: у 19 из 20 курсов первые уроки бесплатны — от 10 до 23, смотря какой курс. Нажмите «Попробовать бесплатно» на странице курса и оставьте почту: пришлём ссылку, и курс сразу откроется на платформе. Бесплатно открыт один курс за раз: если начнёте другой, прежний закроется, а прогресс в нём сохранится и вернётся после оплаты.

Когда откроется доступ?

Сразу после оплаты. Войдите на courses.moscoding.ru с почтой, которую указали при оформлении, — пришлём ссылку для входа.

Сколько стоит и как платить?

1 500 ₽ в месяц или 15 000 ₽ в год. Оплата картой, через T-Pay или СБП на странице Т-Банка. Подписка продлевается автоматически с той же карты.

Как отменить подписку?

В любой момент по ссылке из письма об оплате или письмом на yo@moscoding.ru. После отмены новых списаний не будет, а доступ сохранится до конца оплаченного периода.

Другие курсы

Начните учиться сегодня

Все курсы за 1 500 ₽ в месяц. Доступ откроется сразу после оплаты, отменить можно в любой момент.

Оформить подпискуВсе курсы

Все курсы в подписке

1 500 ₽ в месяц

Оформить