[HTML Academy] НТМL и CSS. Профессиональная вёрстка сайтов. Сентябрь 2023

ОНО · 9 Июл 2023

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

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

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

Что входит в программу курса
Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий на сайте 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
Попапы, слайдеры, формы
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.

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