HTML и CSS — вёрстка

Пошаговый курс:
верстаем адаптивный лендинг

HTML и CSS — от макета в Figma до адаптивной страницы: Flexbox, Grid, hover и медиа-запросы
Сверстайте реальный лендинг: 12 уроков, 5 секций макета, готовый проект в портфолио
Pixel Perfect по макету — от Header до Footer с адаптивом
Начните карьеру мечты в IT — работайте удалённо из любой точки мира
Посмотреть программу Получить бесплатно
Пошаговый курс: верстаем адаптивный лендинг от макета Figma до адаптивной страницы
✓
Проверен и
рекомендован
специалистами
IT-индустрии
Подробнее

Для кого этот курс?

🚀

Абсолютным новичкам

Никогда не верстали? Курс стартует с минимума HTML и CSS, показывает Figma и ведёт пошагово до готового лендинга. Первый сайт в портфолио и понимание, как устроена вёрстка.

🎨

Дизайнерам

Делаете макеты и хотите доводить их до кода сами? Научитесь читать Figma, экспортировать ресурсы и собирать секции в HTML и CSS — меньше потерь при передаче в разработку.

💻

Фрилансерам

Берёте заказы на лендинги, но пока только в конструкторах? Освоите ручную вёрстку по макету: Header, Hero, блоки Features, адаптив — результат, который можно показать заказчику.

🔄

Тем, кто меняет профессию

Хотите в IT с понятного первого шага? Соберёте реальный адаптивный лендинг — не абстрактные упражнения, а полный цикл от макета до адаптивной страницы.

📚

Перед курсами HTML и CSS

Планируете большие курсы, но хотите сначала увидеть весь процесс? Курс покажет, как выглядит работа верстальщика на одном проекте — потом легче идти в глубину HTML и CSS.

🌱

Junior-разработчикам

Пишете на JS, а вёрстка по макету даётся с трудом? Закрепите Flexbox, Grid и адаптив на законченном лендинге — меньше правок, когда нужно быстро поправить UI.

О курсе

Консультация и обучение
Вы пройдёте 12 уроков — от знакомства с макетом и Figma до готового адаптивного лендинга. Каждый урок добавляет новую секцию или дорабатывает страницу — без отрыва от реального проекта.
Вёрстка — мост между дизайном и разработкой: Вы учитесь читать макет, экспортировать ресурсы, писать семантичный HTML и стилизовать через Flexbox и Grid. Навык нужен каждому, кто хочет в frontend — и полезен дизайнерам, маркетологам и фрилансерам на лендингах.
После курса у Вас готовый лендинг в портфолио и понимание полного цикла: макет → код → адаптив. Это старт перед полными курсами HTML и CSS — здесь Вы видите весь процесс на одном проекте, а не разрозненных упражнениях.
1–2
Недели
5
Модулей
12
Уроков
40+
Тестов
1
Проект

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

Модуль 1: Введение и старт проекта
Осваиваете «Введение и старт проекта» — шаг за шагом, с примерами и практикой.
  • • 👋 Приветствие и знакомство с проектом
  • • 📄 HTML и CSS: минимум для вёрстки
  • • 🎨 Разбираемся в Figma и настраиваем проект
  • • 🛠️ Старт проекта: архив, разметка, стили, фавикон и шрифты
Поймёте цель курса и минимум HTML/CSS для вёрстки. Научитесь читать макет в Figma: отступы, палитра, типографика, экспорт картинок. Соберёте каркас проекта — index.html, css/style.css, фавикон, шрифты и базовые :root-стили из макета.
Модуль 2: Вёрстка секций
Осваиваете «Вёрстка секций» — шаг за шагом, с примерами и практикой.
  • • 💻 Верстаем Header
  • • 💻 Верстаем Hero
  • • 💻 Верстаем How it works
  • • 💻 Верстаем Features
  • • 💻 Верстаем Footer
Сверстаете лендинг RollingBoard секция за секцией: header с навигацией и кнопками, hero с CTA, «How it works» из трёх карточек, features с чередованием текста и иллюстраций, footer с соцсетями. Flexbox и Grid — на живом макете, результат как у эталона на десктопе.
Модуль 3: Оживление страницы
Осваиваете «Оживление страницы» — шаг за шагом, с примерами и практикой.
  • • ✨ Оживляем сайт: hover и transition
Добавите hover на ссылки, кнопки и карточки, настроите плавные transition — сайт оживёт без JavaScript. Разберётесь, что анимировать и как не перегрузить интерфейс; кратко — про prefers-reduced-motion и поведение на тач-устройствах.
Модуль 4: Адаптив и качество
Осваиваете «Адаптив и качество» — шаг за шагом, с примерами и практикой.
  • • 📱 Делаем сайт адаптивным
Подключите viewport и медиа-запросы под планшет и телефон. Перестроите header, hero, карточки и footer: колонки → одна колонка, размеры шрифтов и отступы — лендинг будет читаться на разных экранах.
Модуль 5: Заключение
Осваиваете «Заключение» — шаг за шагом, с примерами и практикой.
  • • 🏆 Заключение гайда
Зафиксируете итог: полный цикл макет → код → адаптив, готовый лендинг в портфолио и понятные следующие шаги — курсам HTML и CSS в академии. Бейдж за прохождение основного трека.

Ваш старт — от макета до готового лендинга

1
Познакомитесь с адаптивным лендингом, HTML и CSS и разберёте макет в Figma: отступы, цвета, шрифты, экспорт картинок. Соберёте каркас проекта — index.html, css/style.css, шрифты и фавикон.
уроки 1–4
2
Сверстаете Header с навигацией и кнопками, Hero с CTA, секцию How it works с тремя карточками — Flexbox и Grid в реальном макете.
уроки 5–7
3
Добавите Features с чередованием текста и картинок, Footer с соцсетями и копирайтом. Страница совпадёт с эталоном по десктопу.
уроки 8–9
4
Оживите кнопки и ссылки через hover и transition, сделаете адаптив под планшет и телефон. Финал — готовый адаптивный лендинг в портфолио.
уроки 10–12

Это ваш первый сайт — от Figma до адаптивной страницы в портфолио

Финальный проект

На курсе вы реализуете реальный проект с современными технологиями, профессиональным подходом и получите ценный опыт веб-разработки. После завершения у вас будет готовый проект для портфолио — отличный старт для дальнейшего развития!

🎯 Финальная работа
Адаптивный лендинг на HTML и CSS — desktop, tablet и mobile
Посмотреть проект

Адаптивный лендинг

Лендинг приложения для управления проектами: Header с навигацией, Hero с CTA, секция How it works, Features с чередованием блоков, Footer с соцсетями. Вёрстка по макету из Figma — Flexbox, Grid, hover-состояния и адаптив под мобильные устройства.

✓ Готовый лендинг для портфолио
✓ Реальный опыт вёрстки по макету
✓ Pixel Perfect и адаптив в одном проекте
HTML5 CSS3 Flexbox Grid Адаптив

Что вы научитесь делать:

✔ Читать макет в Figma и переносить стили в CSS
📐 Собирать секции лендинга семантичной разметкой
🔗 Раскладывать блоки через Flexbox и Grid
🎨 Добавлять hover и transition без JavaScript
📱 Делать адаптив через медиа-запросы
📁 Структурировать проект: HTML, CSS, шрифты, изображения
cup

Итоговый результат

После завершения у вас будет готовый адаптивный лендинг — страница, которую можно открыть в браузере, выложить на GitHub и показать работодателю. Вы пройдёте полный цикл вёрстки на одном проекте.

Почему выбирают наши курсы?

Практика с первого дня

Не просто теория — сразу применяете знания на практике. Каждый урок = новый навык, который закрепляете практическими заданиями.

Современные технологии

Изучаете теорию и прорабатываете на практике актуальные инструменты — то, что используют в реальных проектах.

Поддержка в удобное время

Преподаватели на связи с 10:00 до 22:00 МСК. Вопросы? Проблемы? Поможем разобраться и не бросим на полпути.

Профессиональные навыки

Полный набор знаний вёрстки уже после курса. Показываете работодателям — получаете офферы.

Помощь с трудоустройством

В пакетах HTML + CSS + JS и JS + TS — 3 месяца поддержки наставника после выпуска. При покупке одного курса — платные консультации и мок.

Сертификат о прохождении

Получите именной сертификат, подтверждающий ваши знания и навыки. Документ, который ценится работодателями.

Гибкий график обучения

Всего 20-40 минут в день на обучение. Учитесь в удобное время. Подходит для работающих и студентов.

Гарантия возврата средств

Не понравился курс? Возврат средств пропорционально неосвоенному материалу курса.

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

А если мне не понравится обучение?
Возврат рассчитывается пропорционально неиспользованной части курса.
Нужен ли опыт или подготовка перед началом?
Нет. Курс для новичков: минимум HTML и CSS объясняем в начале. Рекомендуем перед стартом бесплатные курсы «Настройка окружения» и «Git: Пошаговые основы» — но это не обязательное требование.
Сколько времени нужно уделять учёбе?
При темпе примерно 30–60 минут в день курс займёт 1–2 недели. 12 пошаговых уроков по 5–35 минут; можно быстрее или растянуть — график гибкий.
А если я что-то не пойму?
Вы не останетесь одни. Ревьюеры разбирают вёрстку и задания, техподдержка в Telegram с 10:00 до 22:00 МСК. В каждом уроке — пошаговые инструкции и эталон для сверки.
Почему нет пожизненного доступа к курсам?
Доступ к курсу действует 1 год с момента покупки. Для этого курса этого более чем достаточно — можно вернуться к любому уроку и пересобрать проект. Если нужна пауза — напишите нам.
Будет ли сертификат после окончания?
Да, после прохождения основного трека Вы получите именной сертификат и бейдж final_layout_guide. Плюс готовый адаптивный лендинг в портфолио. Это сертификат нашей школы, не диплом о профессиональной переподготовке. Подробнее о документах.
Чем этот курс отличается от курсов HTML и CSS?
Этот курс — один проект от макета до адаптива: Вы видите весь путь на одном лендинге. Курсы HTML (30 уроков) и CSS (114 уроков) — глубокая теория, много практик и отдельные финальные работы. Здесь — быстрый старт и «я смог сверстать сайт»; HTML и CSS — профессиональная база без пробелов.
Что нужно для старта — компьютер и программы?
Компьютер или ноутбук, браузер и бесплатный VS Code. В уроке 4 настраиваем проект и Live Server — подробно, по шагам. Макет открываем в браузерной Figma; архив с картинками и шрифтами выдаётся в курсе.
💰 Как получить скидку на курс?

Есть несколько способов сэкономить на обучении:

🎁
Бонусные рубли

Внутренняя валюта платформы. 1 бонус = 1 рубль скидки. Можно тратить на курсы, личные консультации, аудит резюме и другие услуги.

🎓
Ученикам других школ программирования

Скидка до 25% на пакеты курсов для тех, кто уже учился в других образовательных проектах. Подробности — на странице «Скидка для учеников других школ».

📦
Пакеты курсов

Выгодная цена при покупке нескольких курсов.

👥
Приведи друга

После оплаты курса вашим другом — по 5 000 ₽ на бонусный счёт вам и другу. Друг также получает бесплатную консультацию.

Не нашли ответа на свой вопрос?
Напишите нам в Telegram

Получить курс бесплатно

✓ Доступ к урокам сразу после регистрации
✓ Без привязки карты
✓ 12 уроков и готовый лендинг в портфолио
HTML и CSS — вёрстка

Пошаговый курс: верстаем адаптивный лендинг

От макета в Figma до адаптивной страницы: HTML, CSS, Flexbox, Grid, hover и медиа-запросы — готовый проект в портфолио

📅
1–2 недели
в комфортном темпе
📚
5 модулей
пошагово
📖
12 уроков
с практикой
✅
40+ тестов
для проверки знаний
💻
1 проект
Адаптивный лендинг
💬
Опытные кураторы
Поддержат в обучении и ответят на все вопросы
Сверстайте первый лендинг уже сегодня!
Зарегистрируйтесь и откройте курс — тот же формат, что на главной, без оплаты.
Цена:
Бесплатно
🎁 Без привязки карты
* Записываясь на курс Вы соглашаетесь с Офертой и Политикой обработки персональных данных
Мы используем cookie-файлы. Это нужно для лучшей работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с этим.