О профессииКак учимПрограммаСтоимость
Компаниям
Начать учиться

О чём этот курс и зачем изучать вёрстку

Вёрстка — один из базовых навыков разработчиков интерфейсов

На курсе вы изучите современные теги HTML и свойства CSS, освоите нужные инструменты и научитесь смотреть на макет глазами опытных разработчиков.

HTML и CSS — база, на которой основана вся разработка интерфейсов. Мода на инструменты меняется, а HTML и CSS остаются.

Чему вы научитесь за 3 месяца практики

  • Писать код на HTML и CSS по современным стандартам
  • Превращать дизайн-макеты в страницы сайта
  • Создавать сайты под разные устройства
  • Делать веб-страницы быстрыми и производительными
  • Создавать анимации на CSS
  • Адаптировать сайты для людей с разными типами восприятия и условиями

Какие инструменты и технологии освоите

HTML
CSS
Sass и SCSS
PostCSS
Pug
IDE
Prettier и Stylelint
Gulp
Node.js и NPM
GitHub
CSS Layouts
Logical Properties
Custom Properties
БЭМ и Atomic CSS
Доступность
Типографика
2D- и 3D-анимации
SVG
Адаптивная вёрстка
Декорирование

После обучения у вас будет 7 проектов для портфолио

  • Мобильная версия сайта
  • Одностраничный лендинг
  • Страница с фоном из видео
  • Сайт с медиаконтентом
  • Текстовая страница со светлой и тёмной темой
  • Адаптивный сайт с разными цветовыми гаммами
  • Сайт для создания мудбордов

Что будет на курсе

Мы учим на практике: студенты пишут код с первых уроков. Чтобы интерес не терялся, задания постепенно усложняются.

Наглядная теория и пространство для экспериментов

С первого дня начнёте практиковаться и писать код в интерактивном учебнике — там сразу видно результат и легко исправлять ошибки. А ещё сможете изучать вёрстку по видео, где разбираются работы студентов — в любое время и удобном темпе.

250+ задач для оттачивания навыков

Задания в тренажёре всегда доступны и проверяются автоматически.

Вебинары с наставниками

Опытные разработчики ответят на вопросы и поддержат, если что-то не получится с первого раза.

Обратная связь по проектам

Если будете сдавать проекты вовремя, их подробно разберут наши эксперты и отметят все плюсы и минусы. За несколько итераций доведёте работу до идеала, чтобы смело добавить её в портфолио.

Сверстаете свою первую мобильную страницу «С чистого листа» с текстом про страх чистого листа. Узнаете на практике, какой потенциал заложен в вёрстке.

YandexGPT помогает учиться

Когда в теории что-то непонятно, нейросеть объяснит это другими словами. А в конце каждого урока подготовит краткий пересказ о самом главном.

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

Учёбе нужно уделять не меньше 15 часов в неделю. Можно заниматься в любое время, главное — не пропускать воркшопы и вовремя сдавать проекты.
Скачать программу в PDF
1 проект・~17 часов
Бесплатно
Основы HTML и CSS и знакомство с курсом
1 модуль — бесплатно, чтобы вы попробовали себя в роли верстальщика или верстальщицы. Вы узнаете правила HTML-разметки и научитесь работать со стилями. Все знания сразу же будете применять на практике.
  • Вёрстка
  • HTML
  • CSS
  • CSS-свойства
  • Первый код
  • Программа и нагрузка
Что такое вёрстка
Понятие, как вёрстка соотносится с современной веб-разработкой
Первый код
Что делают разработчики, базовые элементы, HTML, CSS
Что такое HTML и CSS
Теги HTML, заголовки, абзац, ссылка, об атрибутах, один тег в другом, изображения, структура HTML-документа, правила CSS, тег style, CSS-файл, блоки, отступы, подпись к обложке, playground
Базовые CSS-свойства
Собрать лендинг, размеры в пикселях, размеры в процентах и долях, цвета в HTML, фон элемента, позиция, размер, повтор фона, прозрачность, коробка в коробке, наследование, типографика
Больше CSS
Пик вёрстки, новая секция, классы, типографика, поток и блочная модель, внешние и внутренние отступы, границы, блочные + строчные, расположение элементов по центру, тени, подвал сайта, центрировать по вертикали
Как всё устроено
Знакомство с платформой и командой курса, сколько времени нужно на учёбу, что вы будете изучать и какие проекты вам предстоят
Изучите основы HTML и CSS, сверстаете обложку для плейлиста и первый сайт, узнаете больше о программе курса и процессе обучения
2
5 тем・2 проекта・3 недели
Семантика и лэйаут
Научитесь работать со шрифтами в вебе. Разберётесь, как писать код, корректный с точки зрения браузеров и поисковых систем. Изучите способы организации каркаса веб-страницы. Узнаете, как менялся подход к организации элементов.
  • Вёрстка
  • Bash
  • Git
  • Шрифты
  • Типографика
  • Семантика
  • Grid Layout
  • Кодстайл
  • БЭМ
  • Atomic
Bash и Git
Основы, установка Git, командная строка, настройка и подключение Git к проекту, первый коммит, командная работа, регистрация на GitHub, SSH-ключи, локальный и удалённый репозитории, клонирование репозитория
Шрифты и типографика
Подключение шрифтов к странице, настройки шрифтов, подключение внешних шрифтов, оформление текста, переполнение текстовых блоков
Семантика и глобальные атрибуты
Контейнеры HTML5, семантика и выразительность HTML, таблицы, приведение кода в порядок, язык документа и его элементов, идентификаторы
Флексбокс-вёрстка
Флекс-контейнер, направление внутри флекс-контейнера, выравнивание по основной и дополнительной осям, перенос флекс-элементов, gap, свойства флекс-элементов, flex basis, flex-grow и flex-shrink
Grid Layout
Гриды, терминология гридов, столбцы и строки внутри грид-контейнера, отступы, функция repeat(), фракция, расположение элементов, грид-области, выравнивание сетки и содержимого грид-областей, наложение элементов
Сверстаете мобильную страницу с текстом и cайт для аукциона. Отработаете разные виды лэйаутов и узнаете, как делать навигацию.
Пример проекта
Пример проекта
3
3 темы・2 проекта・3 недели
Доступность и интерактив
Подготовите графику для работы с разными экранами. Поработаете над адаптивным интерфейсом.
  • Псевдоклассы
  • Псевдоэлементы
  • Кастомные переменные
  • Препроцессоры
  • Постпроцессоры
Настройка страницы, мета, встраиваемый контент
Настройки страницы, описание сайта для браузеров и поисковых машин, фавикон, разметка OpenGraph, страница в странице, API YouTube, виджеты-информеры, тег <video>, тег <audio>
Псевдоклассы и псевдоэлементы, доступность
LVHA, фокусы,.:marker,.:selection, скринридеры, базовые правила a11y при вёрстке, дерево доступности, декоративные и контентные изображения, поля форм, ARIA, настройки уменьшения движения и повышения контрастности
Позиционирование элементов, стилизация форм
Статическое, относительное и абсолютное позиционирования, z-index, фиксированное и липкое позиционироване, inset, стилизация полей ввода, кнопок и ярлыков, псевдоклассы валидации, выпадающие списки, accent-color
Сделаете страницу с видеофоном и сайт с медиаконтентом
Пример проекта
Пример проекта
4
2 темы・2 проекта・3 недели
Дизайн и адаптивность
Освоите приёмы, чтобы корректно отображать страницы на разных устройствах и с разными настройками. Научитесь организовывать код для создания цветовой темы сайта.
  • Основы дизайна
  • Адаптивность
Разработка интерфейса для разных устройств
Дизайн в мире множества устройств, разница между резиновой и адаптивной вёрсткой, адаптивный макет, синтаксис медиазапросов, характеристики устройств, пользовательские предпочтения, синтаксис диапазонов, выражения от контейнера
Растровая графика, единицы измерения и функции
Форматы, оптимизация изображений, плотность пикселей, картинки на выбор (браузера), image-set(), loading="lazy", относительные размеры блоков и текстовых элементов, функции calc(), min(), max(), clamp()
Создадите страницу с тёмным и светлым фоном, а также адаптивный сайт с разными цветовыми темами
Пример проекта
Пример проекта
5
5 тем・1 проект・3 недели
Красотища
Разберёте инструменты декорирования ваших страниц. Градиенты, тени, фильтры, режимы смешивания — всё это здесь. Научитесь использовать векторную графику на страницах и пользоваться интерактивными инструментами, которые встроены в HTML. Вишенка на торте спринта — анимации страниц.
  • Анимации
  • Декорирование
  • 3D-трансформации
  • Модальные окна
SVG
Экспорт svg, использование svg: инлайн, <img>, фон, use, fill, stroke, анимация и оптимизация svg, svg-маски
2D-трансформации и транзишены
Transition, матрица трансформаций, transform, transform-origin, translate, rotate, skew, scale, применение нескольких трансформаций
Анимации
Animation (name, duration, iteration-count, direction, timing-function, delay, play-state, fill-mode), @keyframes, дешёвые свойства для анимации, will-change
Декорирование
Бордер-имидж, фильтры, тени, линейный, радиальный и конический градиенты, репит-градиент, множественные градиенты, бленд-мод
3D-трансформации
Матрица 3D-преобразований, transform-style, perspective и perspective-origin, backface-visibility
Сверстаете веб‑приложение с муд‑бордами
Пример проекта
Этот курс может оплатить
ваш работодатель
Полностью или разделив оплату с вами,
например 50/50 или 75/25
  • Расскажем всё про курс
  • Поделимся презентацией
  • Ответим на ваши вопросы
  • Подготовим договор и счёт

Отвечаем на вопросы

Подойдёт ли мне этот курс?
Вы будете изучать вёрстку с нуля, поэтому курс подойдёт вам, даже если вы раньше ничего не верстали. Если у вас уже есть опыт, то курс поможет разобраться, как дизайн превращается в код, освежить и структурировать знания по HTML и CSS.

Чтобы точно понять, подойдёт ли вам этот курс, вы сможете пройти бесплатную вводную часть.
За 3 месяца правда можно научиться верстать сайты и приложения?
Да, но нужно уделять занятиям порядка 15 часов в неделю, решать задачи, верстать проекты и общаться с наставниками.

Выше можно скачать программу, чтобы оценить количество учебного материала и свои возможности.
Каким требованиям нужно соответствовать?
Вам не понадобятся специальные навыки или опыт — мы обучим всему с нуля. Главное — иметь компьютер и достаточно времени для занятий. Выше можно посмотреть программу, чтобы оценить количество учебного материала и свои возможности.
Что делать, если я не справлюсь с нагрузкой?
Если случилось непредвиденное или понадобилось уделить больше времени закреплению материала, напишите своему куратору. Он поможет перенести дедлайн сдачи проекта или перевестись в более поздний поток. На общую стоимость курса это не повлияет.
Если не понравится, я могу вернуть деньги?
Конечно. Если поток ещё не стартовал, вернём всю сумму. Если учёба уже началась, придётся оплатить прошедшие дни со старта вашего первого потока — но мы вернём деньги за остаток курса. Более подробно рассказываем об этом в 7 пункте оферты.
Получу ли я какой-то документ после курса?
Мы отправим вам свидетельство об обучении — официальный документ о дополнительном образовании.
Что такое налоговый вычет на обучение и как его получить?
Налоговый вычет может оформить тот, кто работает по трудовому договору и является налоговым резидентом Российской Федерации, то есть 183 дня в году находится на территории страны.

Заявление на налоговый вычет нужно подать через личный кабинет на сайте nalog.ru (в него можно войти через аккаунт на Госуслугах).

К заявлению нужно приложить:
  • Справку 2-НДФЛ от работодателя.
  • Договор на обучение, в вашем случае это оферта Практикума.
  • Лицензию на образовательную деятельность. Вот наша.
  • Чек об оплате обучения. Мы отправляем его на электронную почту. Если не найдёте чек у себя в почте, напишите в чат службы поддержки — вышлем копию.
  • Справку о получении образовательных услуг — её тоже нужно запросить в чате поддержки.
Подробнее о налоговом вычете — на сайте Федеральной налоговой службы.
Можно ли оплатить курс за счёт работодателя?
Да, работодатель может оплатить учёбу полностью или разделить оплату с вами: например, поделить сумму 50/50 или 75/25.

Такая оплата пройдёт по счёту или двустороннему договору, а ИП могут оплатить с бизнес-счёта. Если работодатель купит обучение сразу 10 сотрудникам или больше, сделаем скидку 10%.

Условия предоставления услуг для юридических лиц могут отличаться — чтобы узнать подробнее, оставьте заявку или уточните у вашего менеджера.
У меня останется доступ к курсу после завершения обучения?
Да, доступ к курсу вы получаете навсегда.
Как можно оплатить?
Банковской картой: внести всю сумму сразу или платить ежемесячно.

Ежемесячные платежи работают так: вы вносите первую оплату, и в этот момент привязывается карта. С этой карты автоматически будут списываться следующие платежи каждые 30 календарных дней. Например, оплатили 25 марта — следующий платёж пройдёт 24 апреля. Обучение будет стоить меньше, если оплатить весь курс сразу.

Через компанию: юридические лица — резиденты РФ также могут оплатить обучение в Практикуме. Условия предоставления услуг для юридических лиц могут отличаться — чтобы узнать подробнее, оставьте заявку или уточните у вашего менеджера.

Давайте поможем

Мы перезваниваем в течение 30 минут каждый день с 10:00 до 19:00. Если оставите заявку сейчас, то перезвоним уже в рабочее время.

Как планируете учиться?