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

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

На курсе вы изучите современные теги 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 проектов для портфолио

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

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

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

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

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

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

Учёбе нужно уделять не меньше 15 часов в неделю. Можно заниматься в любое время, главное — не пропускать воркшопы и вовремя сдавать проекты.
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
Сверстаете веб‑приложение с муд‑бордами
Пример проекта

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

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

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

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

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

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

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

Подробнее о налоговом вычете — на сайте Федеральной налоговой службы.
Можно ли оплатить курс за счёт работодателя?
Да, работодатель может оплатить учёбу полностью или разделить оплату с вами: например, поделить сумму 50/50 или 75/25.

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

Чтобы получить счёт на оплату через компанию, оставьте заявку или напишите нам в чат поддержки.
У меня останется доступ к курсу после завершения обучения?
Да, доступ к курсу вы получаете навсегда.

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

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