Будете много практиковаться и сделаете 7 проектов для портфолио
Отработаете навыки на 250+ задачах в тренажёре
Получите обратную связь от экспертов на проекты, которые сдадите вовремя
Освоите инструменты для вёрстки, которые используют опытные разработчики
Сможете заниматься онлайн в любое время и в своём темпе

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

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

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

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

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

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

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

Как тем, кто никогда не занимался вёрсткой, так и тем, кто уже изучал HTML или 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 помогает учиться

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

Сможете углубиться в вёрстку, если захотите

Это поможет вам не только освоить вёрстку на профессиональном уровне, но и по-настоящему её полюбить

Дополнительные материалы по каждой теме

О типах раскладки, ментальной модели вёрстки, взглядах на адаптивные сайты и о других важных концепциях

Продвинутые технологии и инструменты

Сможете пройти дополнительный курс, где мы собрали темы, которые позволят не просто верстать, а делать это профессионально: кодстайл, линтинг, препроцессоры, автоматизация, шаблонизаторы

1 проект・~17 часов

Бесплатно

Основы HTML и CSS и знакомство с курсом

1 модуль — бесплатно, чтобы вы попробовали себя в роли верстальщика или верстальщицы. Вы узнаете правила HTML-разметки и научитесь работать со стилями. Все знания сразу же будете применять на практике.

Вёрстка
HTML
CSS
CSS-свойства
Первый код
Программа и нагрузка

Что такое вёрстка

Понятие, как вёрстка соотносится с современной веб-разработкой

Первый код

Что делают разработчики, базовые элементы, HTML, CSS

Что такое HTML и CSS

Теги HTML, заголовки, абзац, ссылка, об атрибутах, один тег в другом, изображения, структура HTML-документа, правила CSS, тег style, CSS-файл, блоки, отступы, подпись к обложке, playground

Базовые CSS-свойства

Собрать лендинг, размеры в пикселях, размеры в процентах и долях, цвета в HTML, фон элемента, позиция, размер, повтор фона, прозрачность, коробка в коробке, наследование, типографика

Больше CSS

Пик вёрстки, новая секция, классы, типографика, поток и блочная модель, внешние и внутренние отступы, границы, блочные + строчные, расположение элементов по центру, тени, подвал сайта, центрировать по вертикали

Как всё устроено

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

Изучите основы HTML и CSS, сверстаете обложку для плейлиста и первый сайт, узнаете больше о программе курса и процессе обучения

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 темы・2 проекта・3 недели

Доступность и интерактив

Подготовите графику для работы с разными экранами. Поработаете над адаптивным интерфейсом.

Псевдоклассы
Псевдоэлементы
Кастомные переменные
Препроцессоры
Постпроцессоры

Настройка страницы, мета, встраиваемый контент

Настройки страницы, описание сайта для браузеров и поисковых машин, фавикон, разметка OpenGraph, страница в странице, API YouTube, виджеты-информеры, тег <video>, тег <audio>

Псевдоклассы и псевдоэлементы, доступность

LVHA, фокусы,.:marker,.:selection, скринридеры, базовые правила a11y при вёрстке, дерево доступности, декоративные и контентные изображения, поля форм, ARIA, настройки уменьшения движения и повышения контрастности

Позиционирование элементов, стилизация форм

Статическое, относительное и абсолютное позиционирования, z-index, фиксированное и липкое позиционироване, inset, стилизация полей ввода, кнопок и ярлыков, псевдоклассы валидации, выпадающие списки, accent-color

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

2 темы・2 проекта・3 недели

Дизайн и адаптивность

Освоите приёмы, чтобы корректно отображать страницы на разных устройствах и с разными настройками. Научитесь организовывать код для создания цветовой темы сайта.

Основы дизайна
Адаптивность

Разработка интерфейса для разных устройств

Дизайн в мире множества устройств, разница между резиновой и адаптивной вёрсткой, адаптивный макет, синтаксис медиазапросов, характеристики устройств, пользовательские предпочтения, синтаксис диапазонов, выражения от контейнера

Растровая графика, единицы измерения и функции

Форматы, оптимизация изображений, плотность пикселей, картинки на выбор (браузера), image-set(), loading="lazy", относительные размеры блоков и текстовых элементов, функции calc(), min(), max(), clamp()

Создадите страницу с тёмным и светлым фоном, а также адаптивный сайт с разными цветовыми темами

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

Сверстаете веб‑приложение с муд‑бордами

Вы будете не одни: наши эксперты поддержат на всех этапах обучения

Наставники научат находить ответы

Пояснят теорию и помогут найти решение, если столкнётесь с трудной задачей

Ревьюеры проверят код и проекты

Укажут на ошибки и дадут развивающую обратную связь

Кураторы сделают обучение комфортным

Напомнят о сроках по проектам, пришлют записи воркшопов, выслушают и поддержат

Специалисты поддержки устранят неполадки

Им можно писать 24/7: например, если не открывается учебник

Этот курс может оплатить
ваш работодатель

Полностью или разделив оплату с вами,
например 50/50 или 75/25

Расскажем всё про курс
Поделимся презентацией
Ответим на ваши вопросы
Подготовим договор и счёт

Что ещё важно

Перенесём дедлайн или предложим перейти в следующий поток

Дедлайн сдачи проекта можно сдвинуть на неделю. Если нужно больше времени, куратор поможет перевестись в более поздний поток. Так вы сможете пройти темы и закончить проект в комфортном темпе.

Обучение будет на русском языке

Теория, практические задания и вебинары, а ещё чаты с куратором, наставником и другими студентами.

Вернём деньги за остаток курса, если передумаете

Нужно будет оплатить только время с начала вашего первого потока. Подробнее об условиях — в 7 пункте оферты.

Посмотреть оферту

Выдадим сертификат об обучении

Если пройдёте курс до конца и успешно выполните итоговую работу.

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

Подойдёт ли мне этот курс?

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

Чтобы точно понять, подойдёт ли вам этот курс, вы сможете пройти бесплатную вводную часть.

За 3 месяца правда можно научиться верстать сайты и приложения?

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

Выше можно скачать программу, чтобы оценить количество учебного материала и свои возможности.

Каким требованиям нужно соответствовать?

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

Что делать, если я не справлюсь с нагрузкой?

Если случилось непредвиденное или понадобилось уделить больше времени закреплению материала, напишите своему куратору. Он поможет перенести дедлайн сдачи проекта или перевестись в более поздний поток. На общую стоимость курса это не повлияет.

Если не понравится, я могу вернуть деньги?

Конечно. Если поток ещё не стартовал, вернём всю сумму. Если учёба уже началась, придётся оплатить прошедшие дни со старта вашего первого потока — но мы вернём деньги за остаток курса. Более подробно рассказываем об этом в 7 пункте оферты.

Получу ли я какой-то документ после курса?

Да, вы получите сертификат об обучении.

На каком языке проходит обучение?

Всё будет на русском: теория, практические задания и вебинары, а ещё чаты с куратором, наставником и другими студентами.

У меня останется доступ к курсу после завершения обучения?

Да, доступ к курсу вы получаете навсегда.

Как можно оплатить?

Банковской картой: внести всю сумму сразу или платить ежемесячно.

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

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

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

Напишите, как вас зовут и по какому номеру можно связываться — позвоним и расскажем всё про курсы

Соглашаюсь на обработку персональных данных

Курс «Профессиональная вёрстка на HTML и CSS»