Набор открыт Старт — в любой день

HTML и CSS
с нуля до вёрстки
по макету

106 уроков — от первого тега до Flexbox, Grid и адаптива. Сверстаешь сайт фитнес‑студии, лендинг и дипломный проект по макету из Figma.

Оставить заявку 29 900 ₽
10 000+
учеников
fit-studio/index.html
</section>

.news {style.css

}

Что ты сверстаешь за курс

20 практик по ходу курса, каждую проверяет куратор. Четыре главные — ниже.

  • Сайт фитнес‑студии Fit Studio

    Шапка, hero, «Последние новости» и FAQ по макету. Потом адаптив под телефон — и переписываешь код по БЭМ.

    • SVG
    • доступность
    • aria-атрибуты
    • адаптив
    • БЭМ
    Fit Studio — практическая работа курса

  • Страница статьи

    Первая работа: разметка по PDF‑макету, вёрстка по Figma, в конце — адаптив.

  • Таблицы и формы

    Календарь на таблице, форма по примеру и свой checkbox вместо стандартного.

  • Лендинг Nike Air Mag

    Финальная практика по новому макету: бургер-меню, секции, модальное окно. После него — дипломный проект по макету, который выберешь сам.

    • бургер-меню
    • модальное окно
    • адаптив шапки и hero
    Nike Air Mag — работа ученика по финальной практике

Программа: 12 модулей, 106 уроков

Плюс 20 практик с проверкой куратора и 9 тестов. Открой модуль — внутри все уроки по порядку.

index.html

<!DOCTYPE html>

<title>HTML и CSS с нуля: 12 модулей, 106 уроков</title>

<main class="course">

Основы HTML 15 уроков
  1. Введение
  2. Редакторы кода
  3. Знакомство с HTML
  4. Базовая структура HTML документа
  5. Работа с текстом
  6. Списки
  7. Создание ссылок
  8. Вставка изображений
  9. Вставка видео
  10. Пути подключения и комментарии
  11. Блочные и строчные элементы
  12. Тест по пройденным темамтест
  13. Практическое задание (разметка статьи)
  14. Домашнее задание (разметка статьи)практика
  15. Реализация преподавателя (разметка статьи)
  16. Валидность
  17. Введение в семантику

Редактор кода, структура документа, текст, списки, ссылки, картинки и видео. Первая домашка — разметка статьи по PDF‑макету, потом валидность и семантика.

Основы CSS 12 уроков
  1. Начало работы с CSS
  2. Способы стилизации HTML элементов
  3. Основные CSS селекторы
  4. Работа с цветом
  5. Стилизация текста
  6. Каскад, Специфичность, Наследование
  7. Блочная модель и отступы
  8. Ширина и высота
  9. Свойство display
  10. Тест по пройденным темамтест
  11. Единицы измерения
  12. Background
  13. Border и Outline

Селекторы, цвет, текст, каскад и специфичность, блочная модель, отступы, display, единицы измерения, фон и рамки.

Таблицы 4 урока
  1. Таблицы
  2. Семантика таблиц и объединение ячеек
  3. Тест по таблицамтест
  4. Практика по таблицам
  5. Домашнее задание (таблицы)практика
  6. Реализация преподавателя (таблицы)

Таблицы, их семантика и объединение ячеек. Домашка — календарь по примеру.

Формы 5 уроков
  1. Введение в формы
  2. Поля ввода
  3. Checkbox, Radio, Select
  4. Тест по формамтест
  5. Практика по формам
  6. Домашнее задание (формы)практика
  7. Реализация преподавателя (формы)

Поля ввода, checkbox, radio и select. Домашка — форма по примеру.

Практика с Figma 6 уроков
  1. HTML-сущности
  2. Подключение шрифтов
  3. Знакомство с Figma
  4. Советы по работе с кодом
  5. Подготовка к вёрстке статьи
  6. Вёрстка статьи
  7. Домашнее задание (вёрстка статьи)практика

Шрифты, HTML-сущности и знакомство с Figma. Верстаешь статью по макету из Figma и сдаёшь куратору.

Flexbox 5 уроков
  1. Введение в Flexbox
  2. Основные свойства Flex контейнера
  3. Свойства flex-элементов
  4. Тест по Flexboxтест
  5. Практика Flexbox
  6. Домашнее задание (Flexbox)практика
  7. Реализация преподавателя (Flexbox)

Свойства flex-контейнера и flex-элементов. Домашка — шапка сайта на Flexbox.

Продвинутый CSS 13 уроков
  1. Position
  2. Практика по Position
  3. Transform
  4. Псевдоэлементы
  5. Практика по псевдоэлементам
  6. Домашнее задание (доработка статьи)практика
  7. Псевдоклассы
  8. Подробнее про селекторы и псевдоклассы
  9. Переходы и анимации
  10. Свойства видимости
  11. Overflow и работа со скроллом
  12. Тень и градиент
  13. Тест по пройденным темамтест
  14. Практика стилизации формы
  15. Практика стилизации checkbox
  16. Домашнее задание (форма)практика

Position, transform, псевдоэлементы и псевдоклассы, анимации, overflow, тени и градиенты. Дорабатываешь статью и стилизуешь форму со своим checkbox.

Практика вёрстки 11 уроков
  1. SVG
  2. Подготовка к вёрстке главной страницы
  3. Вёрстка шапки
  4. Вёрстка подвала
  5. Домашнее задание (шапка и подвал)практика
  6. Вёрстка Hero
  7. Декорации в Hero
  8. Вёрстка Последние новости
  9. Домашнее задание (hero и новости)практика
  10. Доступность
  11. Добавляем состояния
  12. Aria-атрибуты и микроразметка
  13. Вёрстка секции FAQ
  14. Домашнее задание (FAQ)практика

Сайт Fit Studio с нуля: SVG, шапка и подвал, hero, «Последние новости», FAQ. Плюс доступность, состояния и aria-атрибуты.

Адаптивная вёрстка 7 уроков
  1. Адаптивная вёрстка
  2. Адаптация изображений
  3. Адаптация Hero
  4. Адаптация Последние новости и FAQ
  5. Адаптация страницы статьи
  6. Кроссбраузерность
  7. Тест по пройденным темамтест
  8. Домашнее задание (адаптив)практика
  9. Что дальше?

Адаптация картинок, hero, новостей, FAQ и страницы статьи, кроссбраузерность. Домашка — Fit Studio под телефон.

Grid 7 уроков
  1. Введение в Grid
  2. Неявная сетка
  3. Свойства grid-элементов
  4. Grid Area
  5. Адаптация Grid
  6. Тест по Gridтест
  7. Практика Grid
  8. Домашнее задание (Grid)практика
  9. Реализация преподавателя (Grid)

Явная и неявная сетка, свойства grid-элементов, grid-area и адаптация сетки.

БЭМ 5 уроков
  1. Введение в методологию БЭМ
  2. Практика по БЭМ
  3. Домашнее задание (БЭМ)практика
  4. Реализация преподавателя (БЭМ)
  5. CSS переменные
  6. CSS import
  7. Тест по пройденным темамтест

Методология БЭМ, CSS-переменные и импорт. Домашка — переписать Fit Studio по БЭМ.

Финальная практика 16 уроков
  1. Начало вёрстки нового макета
  2. Вёрстка шапки
  3. Адаптация шапки
  4. Бургер-меню
  5. Домашнее задание (шапка)практика
  6. Вёрстка Hero
  7. Адаптация Hero
  8. Домашнее задание (hero)практика
  9. Вёрстка секции Air Mag
  10. Общие улучшения по проекту
  11. Домашнее задание (Air Mag)практика
  12. Вёрстка секции Размеры, часть 1
  13. Вёрстка секции Размеры, часть 2
  14. Доработка секции Размеры
  15. Домашнее задание (Размеры)практика
  16. Вёрстка секции Характеристики
  17. Вёрстка секции Топ модели
  18. Домашнее задание (Топ модели и Характеристики)практика
  19. Вёрстка Подвала
  20. Добавляем модальное окно
  21. Домашнее задание (заключение)практика
  22. Заключение
  23. Дипломный проектдиплом

Новый макет — лендинг Nike Air Mag: шапка и бургер-меню, hero, секции, подвал и модальное окно. В конце — дипломный проект по макету, который выберешь сам.

Финал — дипломный проект: вёрстка по макету из Figma, который выберешь сам

</main>

Автор курса

Даниил Винакович

Фронтенд-разработчик с большим опытом. Ведёт Telegram-канал и YouTube — рассказывает там про нейросети и разработку.

Telegram ↗ YouTube ↗
Этот курс — третий модуль флагмана «Профессия: Веб‑разработчик». Там же у Даниила — JavaScript, Git и GitHub, продвинутая вёрстка. Программа флагмана →

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

Вёрстка — первый шаг в веб‑разработке: с неё начинаются и JavaScript, и WordPress, и первые заказы.

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

Уроки на платформе, практика с разбором куратора и вебинары.

Платформа Aroken: курсы ученика с прогрессом по каждому Урок «Знакомство с HTML» на платформе и программа курса справа Форма домашней работы на платформе: отчёт, вопрос куратору и файлы

Выпускники флагмана: были студентами, грузчиками и поварами — стали веб‑разработчиками

Все истории — выпускников флагмана «Профессия: Веб‑разработчик», где этот курс идёт третьим модулем. Своим голосом рассказывают, сколько зарабатывали до и сколько сейчас.

4,95/ 5 средняя оценка по отзывам учеников в группе @lovearokenru ↗ Подробнее

100 000 ₽+

в месяц — средний доход выпускников флагмана

Канал @aroken_result

Чеки учеников — как есть

Ученики сами выкладывают скрины оплат и сданные заказы в открытый канал. С сентября 2025 в канале 560+ скринов. Здесь — только часть.

Все скрины — в канале ↗
Скрин оплаты: +2 000 ₽, 26 августа Отрисовка картинки png в вектор Скрин оплаты: +12 000 ₽, 24 августа Редизайн веб платформы в Figma 40к Скрин оплаты: +8 500 ₽, 21 августа Доработка верстки и лендинга на тильде Скрин оплаты: +5 000 ₽, 24 августа 10к Верстка страницы 8 блоков Скрин оплаты: +15 000 ₽, 3 сентября 20к за лендинг, 5к премия Скрин оплаты: +10 000 ₽, 25 августа Предоплата 1/2 за лендинг Скрин оплаты: +12 500 ₽, 10 августа Закрыл первый заказ) Скрин оплаты: +2 000 ₽, 6 августа 1. За двухминутные правки(восстановление… Скрин оплаты: +114 792 ₽ 2 таких платежа для второй части оплаты… Скрин оплаты: +170 300 ₽, 6 августа Так, ну что ж. Настало и моё время… Скрин оплаты: +45 000 ₽, 3 августа Начинаем август с приятных сумм. Оплата за… Скрин оплаты: +25 000 ₽, 19 июля Доработки, ВАЙБКОДИНГ и публикация закрытой… Скрин оплаты: +2 000 ₽ Доработка стилей на bitrix Скрин оплаты: +5 000 ₽ 2/2 Часть оплаты за редизайн сайта Скрин оплаты: +2 000 ₽ Создание мобильного меню на сайте Скрин оплаты: +1 500 ₽ 2/2 часть оплаты за небольшое сео страницы… Скрин оплаты: +1 500 ₽ 1/2 часть оплаты за небольшое сео страницы… Скрин оплаты: +3 600 ₽ Доработка формы заказа на сайте Скрин оплаты: +4 000 ₽ Доработка сайта на Wordpress Скрин оплаты: +5 000 ₽ 1 Часть оплаты за редизайн сайта Скрин оплаты: +12 500 ₽ Верстка страницы по макету Figma Скрин оплаты: +1 000 ₽ Быстренькая доработка страницы на сайте Скрин оплаты: +800 ₽ Реализация 2 блоков в Elementor Скрин оплаты: +10 500 ₽ Оплата 1 и 2 части оплаты за натяжку сайта… Скрин оплаты: +3 750 ₽ Оплата 2 части за доработки по сайту Скрин оплаты: +10 000 ₽, 30 мая Предоплата за сайтик Скрин оплаты: +5 000 ₽, 24 мая Сайты с девочками красивыми Скрин оплаты: +22 000 ₽ Верстка сайта и натяжка этой верстки на WP Скрин оплаты: +1 000 ₽ Быстрая доработка сайта Скрин оплаты: +2 000 ₽ Доработка сайта на Elementor Скрин оплаты: +3 000 ₽, 14 мая Лендос братку Скрин оплаты: +10 000 ₽, 12 мая Верстка лендоса Скрин оплаты: +2 750 ₽ Доработка сайта на Elementor Скрин оплаты: +4 000 ₽ Верстка лендинга (1 блок) - 1.500₽ Скрин оплаты: +15 000 ₽, 5 мая доработки верстки Скрин оплаты: +2 000 ₽, 28 апреля Доработки WordPress Скрин оплаты: +2 000 ₽ Верстка двух страниц. Скрин оплаты: +1 000 ₽ Доработка сайта для постоянника Скрин оплаты: +5 500 ₽ 50% предоплаты за 3/3 часть по созданию… Скрин оплаты: +3 000 ₽ 50% Предоплаты по доработкам сайта на… Скрин оплаты: +800 ₽ Создание визитки в Figma Скрин оплаты: +3 750 ₽, 7 апреля Доработка сайта на Elementor Pro Скрин оплаты: +15 000 ₽ Создание сайта на Elementor Pro Скрин оплаты: +9 000 ₽ 30% предоплата Скрин оплаты: +8 000 ₽, 15 марта Верстка одной секции с тестом (это и есть… Скрин оплаты: +10 000 ₽ Верстка сайта на html, css, js Скрин оплаты: +3 000 ₽ Оплата первой и второй части за первый… Скрин оплаты: +35 000 ₽, 17 февраля 1/2 за сайт визитку Скрин оплаты: +500 ₽, 11 февраля Добавление кнопки на сайт Скрин оплаты: +20 000 ₽, 5 февраля Тильда, 5 дней по 3-4 часа работы Скрин оплаты: +40 701,20 ₽, 22 января Закрыл заказ Скрин оплаты: +30 000 ₽, 19 января 1/2 часть денег за создание… Скрин оплаты: +1 500 ₽ Доработка сайта от постоянника Скрин оплаты: +2 000 ₽ Доработка сайта от постоянника Скрин оплаты: +8 000 ₽, 20 декабря Сделал плагин для оставления отзывов… Скрин оплаты: +2 500 ₽ Доработка сайта от постоянника Скрин оплаты: +3 000 ₽ Доработка, добавление 2 страниц на сайт вп… Скрин оплаты: +500 ₽, 28 ноября Вписать готовый скрипт в нижнюю часть тега… Скрин оплаты: +10 000 ₽, 18 ноября Верстка небольшого сайта за ~12ч… Скрин оплаты: +8 500 ₽, 18 ноября Переделал слайдер на slider revolution, ибо… Скрин оплаты: +500 ₽ Поменять иконку на другую в верстке Скрин оплаты: +5 000 ₽, 10 ноября 2025 Пришел аванс доработок на 25к от постонника Скрин оплаты: +10 000 ₽, 2 ноября Первые 3к за ускорение сайта, сделал за 30… Скрин оплаты: +3 500 ₽, 9 сентября 2025 СЕО оптимизация, вставил теги, заголовки… Скрин оплаты: +23 000 ₽, 4 июня Закрыл заказ) Скрин оплаты: +7 920 ₽, 9 июня За день закрыл заказ, нужно было сделать 7… Скрин оплаты: +2 000 ₽, 22 апреля Мной был закрыт заказ на 3к, договорились… Скрин оплаты: +3 500 ₽, 6 апреля 2025 Закрыл заказ, нужно было сделать ряд…
Видеоинтервью выпускников20+ интервью и видеоотзывов — на странице результатов

Стоимость

Одна цена за весь курс. Платишь один раз — материалы остаются навсегда, проверка практик куратором — 3 месяца.

HTML и CSS с нуля

29 900 ₽

разовым платежом за весь курс

  • 106 уроков и 9 тестов в 12 модулях
  • 20 практик и 3 работы в портфолио
  • Куратор проверяет практики и отвечает до 15 часов
  • Вечный доступ к материалам курса

Сертификат об окончании, 13% (3 887 ₽) вернёшь налоговым вычетом — учим по государственной лицензии.

Купить курс Задать вопрос
Если нужна профессия целиком

Вёрстка — только начало профессии.

«Профессия: Веб‑разработчик»: этот курс там третьим модулем, после него — JavaScript, WordPress и фриланс, 9 проектов и возврат 100%, если не будет заказов. В рассрочку — 6 208 ₽/мес, первый месяц 0 ₽.

Смотреть флагман →

Вопросы перед стартом

Тест-драйв бесплатно4 урока по 10–15 минут с наставником Попробовать

Заявка на курс «HTML и CSS с нуля»

Напишем в Telegram, ответим на вопросы и поможем выбрать: этот курс или сразу профессия. Без продаж и давления.

Что будет дальше

  1. Напишем тебе в Telegram в течение дня
  2. Разберём цель, уровень и сколько времени есть
  3. Предложим маршрут: курс «HTML и CSS с нуля» или флагман

Оставь заявку

Имя и Telegram — этого достаточно. Ответит человек, не бот, в течение дня.

Твой уровень

Оставь контакты

Напишем в течение дня — ответит человек, не бот. Дальше сможешь сразу выбрать способ оплаты.

Заявка отправлена

Напишем тебе в Telegram в течение дня. А пока загляни в канал — там разборы, отзывы и скрины оплат учеников.

Открыть канал ↗