Записаться на курс

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

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

Записаться на курс

29 900 ₽ за весь курс, старт в любой день

29 900 ₽ 4,95/ 5 оценка по отзывам учеников в Telegram @lovearokenru
fit-studio/index.html
</section>

.news {style.css

}

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

  • Никогда не верстал

    Хочешь понять, как устроены сайты, и начать с первой страницы

  • Учил JavaScript

    А страница по макету всё равно не собирается

  • Хочешь сам брать заказы

    Сверстать страницу по макету и сделать адаптив

С вёрстки начинаются и JavaScript, и WordPress, и первые заказы

Например, страница по макету Figma за 12 500 ₽

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

20 практик, каждую проверяет куратор. От первой статьи по PDF‑макету до лендинга с бургер‑меню.

Модуль 1Разметка статьи по PDF‑макету
ПнВтСрЧтПтСбВс
123456
78910111213
14151617181920
21222324252627
282930
Модули 3, 4 и 7Календарь на таблице, форма и свой checkbox
Лендинг Nike Air Mag: работа ученика по финальной практике курса
Модуль 12, работа ученикаЛендинг 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>

Как учим и кто ведёт

Уроки на нашей платформе и практика с разбором куратора

  1. Учишься на нашей платформе

    Мы сами её разработали: свой плеер, уроки в студийном качестве, конспекты и тесты после тем. Уроки открываются и с телефона

  2. Проходишь курс в своём темпе

    Дедлайнов нет: 106 уроков и 20 практик, когда удобно. Уроки и платформа остаются навсегда

  3. Сдаёшь домашку, куратор разбирает

    Отчёт, вопрос и файлы прямо в уроке. Куратор отвечает в течение 15 часов и проверяет практики 3 месяца

  • Максим, основатель

    Создал школу, преподаёт и сам работает разработчиком на фрилансе

    Максим · основатель Арокена

  • Даниил Винакович, автор курса

    Написал этот курс и ещё три модуля в Aroken: JavaScript, Git и GitHub, продвинутую вёрстку. Ведёт Telegram-канал и YouTube про нейросети и разработку

    Даниил · автор курса

  • Кураторы проверяют практику

    Смотрят каждую домашку и показывают, что поправить

    Альберт · куратор

Истории выпускников своим голосом: сколько зарабатывали до учёбы и сколько сейчас

Учились в «Профессии: Веб‑разработчик», вёрстка там идёт третьим модулем

  • Лера, выпускница Aroken

    Лера, 19

    80 000 ₽/мес

    до учёбы: студентка колледжа, 20 000 ₽

    4:28
  • Даниил, выпускник Aroken

    Даниил, 22

    100 000 ₽/мес

    до учёбы: студент, 50 000 ₽

    7:12
  • Дмитрий, выпускник Aroken

    Дмитрий, 31

    270 000 ₽/мес

    до учёбы: мастер-приёмщик в автосервисе, 50 000 ₽

    5:20
  • Тим, выпускник Aroken

    Тим, 25

    158 000 ₽/мес

    до учёбы: работник доставки, 30 000 ₽

    2:29
  • Вадим, выпускник Aroken

    Вадим, 28

    50 000+ ₽/мес

    до учёбы: тех. руководитель в «Газпроме»

    8:17
  • Максим, выпускник Aroken

    Максим, 20

    100 000 ₽/мес

    до учёбы: грузчик, мебельщик, 30 000 ₽

    2:35
  • Алмаз, выпускник Aroken

    Алмаз, 20

    110 000 ₽/мес

    до учёбы: школьник (листовки)

    9:36
  • Майя, выпускница Aroken

    Майя, 20

    70 000 ₽/мес

    до учёбы: курьер + клининг, 40 000 ₽

    9:49
  • Денис, выпускник Aroken

    Денис, 30+

    350 000 ₽/меслучший месяц

    до учёбы: повар, ИП, 150 000 ₽

    1:53
  • Антон, выпускник Aroken

    Антон, 25

    110 000 ₽/мес

    до учёбы: повар-сушист, 30 000 ₽

    2:37
  • Виталий, выпускник Aroken

    Виталий, 27

    250 000 ₽/мес

    до учёбы: управляющий в «Додо Пицце», 160 000 ₽

    0:39
  • Александр, выпускник Aroken

    Александр, 44

    280 000 ₽/мес

    до учёбы: офисный сотрудник, 140 000 ₽

    5:35
  • Андрей, выпускник Aroken

    Андрей, 25

    200 000 ₽/мес

    до учёбы: редактор статей, 120 000 ₽

    1:13
  • Виктор, выпускник Aroken

    Виктор, 24

    509 000 ₽/мес

    до учёбы: офисный работник, 100 000 ₽

    8:03
  • Аля, выпускница Aroken

    Аля, 22

    140 000 ₽/меслучший месяц

    до учёбы: бариста, 25 000 ₽

    18:42
  • Александр, выпускник Aroken

    Александр, 23

    160 000 ₽/мес

    до учёбы: студент, 4 000 ₽

    сейчас: веб-разработчик в IT-компании

  • Илья, выпускник Aroken

    Илья, 26

    160 000 ₽/мес

    до учёбы: лаборант в больнице

  • Салават, выпускник Aroken

    Салават, 27

    150 000 ₽/мес

    до учёбы: работник РЖД, 70 000 ₽

  • Артемий, выпускник Aroken

    Артемий, 26

    123 000 ₽/мес

    до учёбы: проектировщик отопления

4,95 из 5 по отзывам учеников в @lovearokenru, 560+ чеков в открытом канале с сентября 2025

Стоимость

Одна цена за весь курс: 106 уроков, 20 практик и проверка куратора. Платишь один раз, уроки и платформа остаются навсегда.

HTML и CSS с нуля

29 900 ₽

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

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

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

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

Профессия: Веб‑разработчик

Вёрстка только начало: здесь она третий модуль, дальше JavaScript и WordPress. Первые заказы через 2–3 месяца, или вернём 100%. В рассрочку 7 048 ₽/мес, первый месяц 0 ₽.

Смотреть программу →

ЧЁРНАЯ ПЯТНИЦА AROKEN Т-Банк

Месяц с куратором в подарок от Т-Банка

Оформи рассрочку на обучение за 2 минуты и получи +1 месяц кураторской поддержки

+1месяц

ОЦЕНИВАЙТЕ СВОИ ФИНАНСОВЫЕ ВОЗМОЖНОСТИ И РИСКИ · АО «ТБАНК», ЛИЦЕНЗИЯ №2673

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

Не нашёл ответ? Задай вопрос ниже

Остались вопросы?
Оставь заявку, ответим на все

Разберём твою ситуацию за 15 минут

Посчитаем под твои часы, хватит ли тебе курса «HTML и CSS с нуля» или нужна профессия целиком. Решаешь сам, без давления.

  1. Напишем в Telegram в течение дня
  2. Созвонимся на 15 минут
  3. Пришлём план по месяцам

Или напиши нам в Telegram: @HelloAroken

Где ты сейчас?

Выбери вариант: так мы быстрее поймём, чем помочь

Оставь заявку на обучение
Максим · основатель Арокена

Без обязательств.

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

Свяжемся с тобой в течение дня. А пока загляни в канал: там разборы, отзывы и скрины оплат учеников.

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