Описание

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

Учим делать правильно

• Актуальные стандарты качества: не нужно переучиваться после курса.
• Понимание полного цикла работы верстальщика.
• Фундаментальные и структурированные знания необходимых технологий.
• Опыт работы с дедлайнами и планирования работы.

Что входит в программу курса
Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий на сайте github.com и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать наставник.
Макет в Figma
Доступная разметка
Современные стили
Удобная сетка

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

• Раздел 1. Старт
  Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.
• Раздел 2.Разметка
  Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.
• Раздел 3. Графика
  Экспортируем графику из макета.
• Раздел 5. Сетки страниц на флексах
  Построим крупные сетки страниц с помощью флексов.
• Раздел 6. Сетки компонентов на флексах
  Создадим мелкие сетки компонентов страниц при помощи флексов.
• Раздел 7. Сетки компонентов на гридах
  Создадим мелкие сетки компонентов страниц при помощи гридов.
• Раздел 8. Декоративные элементы
  Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
• Раздел 9. Попапы, слайдеры, формы
  Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.

Программа курса подробнее

Раздел 1
Старт
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.

• Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
• Узнаем, кто такие авторы, кураторы и наставники курса.
• Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
• Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
• Разберём процесс работы над проектом и его защиту.

Статьи

• Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы браузеров, Git и GitHub.

Проекты

• Выбираем наставника.
• Настраиваем инструменты разработки, создаём репозитории проектов.
• Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.

Раздел 2
Разметка
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.

• Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.
• Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.
• Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.
• Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.

Демонстрации
Интерактивные демонстрации по разметке учебного проекта.

ТренажёрыСтатьи

• Тренажёры для знакомства с HTML.
• Статьи о том, как правильно создавать семантическую HTML-разметку.

Проекты

• Получаем макеты в Figma.
• Создаём и размечаем страницы проекта.

Раздел 3
Графика
Экспортируем графику из макета.

• Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
• Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
• Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере графики.

Демонстрации
Интерактивные демонстрации по внедрению графики учебного проекта.

ТренажёрыСтатьи
Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.

Проекты

• Экспортируем растровую и векторную графику из Figma.
• Подключаем контентную графику в разметку.

Раздел 4
Базовая стилизация
Выполним базовую стилизацию страниц проекта.

• Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов.
• Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.
• Внедрим контентную и декоративную графику на страницы проекта.
• Подключим шрифты, поработаем с типографикой и зададим фоны элементам.

Демонстрации
Интерактивные демонстрации по базовой стилизации учебного проекта.

ТренажёрыСтатьи
Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.

Проекты

• Подключаем шрифты.
• Выполняем базовую стилизацию: текстовые параметры, фоны крупных блоков, текстуры.

Раздел 5
Сетки страниц на флексах
Построим крупные сетки страниц с помощью флексов.

• Разберёмся в боксовой модели и познакомимся с типами боксов.
• Научимся анализировать сетки на макетах и определять крупные сетки страниц.
• Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.

Демонстрации
Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.

ТренажёрыСтатьи

• Статьи, которые помогут разобраться с особенностями флексов, блочной модели и приёмами построения сеток.
• Тренажёры для знакомства с блочной моделью документа, флексами и приёмами построения сеток.

Проекты

• Описываем крупные сетки страниц на флексах.
• Сравниваем вёрстку с макетом.

Раздел 6
Сетки компонентов на флексах
Создадим мелкие сетки компонентов страниц при помощи флексов.

• Разберём особенности мелких сеток.
• Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
• Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.

Демонстрации
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.

ТренажёрыСтатьи

• Статьи, которые помогут разобраться с особенностями многострочных флексов.
• Тренажёры для погружения в работу с флексами.

Проекты

• Описываем мелкие сетки компонентов страниц на флексах.
• Сравниваем вёрстку с макетом.

Раздел 7
Сетки компонентов на гридах
Создадим мелкие сетки компонентов страниц при помощи гридов.

• Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
• Разберём типовые ситуации, когда гриды подходят лучше флексов.
• Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.

Демонстрации
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.

ТренажёрыСтатьи

• Тренажёры для знакомства с гридами.
• Статьи, которые помогут разобраться с особенностями гридов.

Проекты

• Описываем мелкие сетки компонентов страниц на гридах.
• Сравниваем вёрстку с макетом.

Раздел 8
Декоративные элементы
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.

• Научимся использовать оформительскую и программируемую графику.
• Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.
• Рассмотрим псевдоэлементы и точечное позиционирование элементов.
• Погрузимся в тонкости типографики и визуальные правила оформления контента.
• Научимся стилизовать интерактивные состояния ссылок и кнопок.

Демонстрации
Интерактивные демонстрации со стилизацией декоративных и контентных элементов учебного проекта.

Тренажёрытатьи
Тренажёры для закрепления навыков создания декоративных элементов.

Проекты

• Добавляем мелкие декоративные и иконочные графические элементы.
• Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.

Раздел 9
Попапы, слайдеры, формы
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.

• Научимся оформлять нестандартные элементы форм.
• Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
• Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.