- Регистрация
- 26.05.2022
- Сообщения
- 26 724
- Реакции
- 187
- Баллы
- 63
[HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов [17 января — 21 марта 2022]
Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий в GitHub Desktop и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать личный наставник.
Программа курса
Раздел 1
Старт
ЛайвПонедельник с 19:00 до 21:00
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.
Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
Узнаем, кто такие авторы, кураторы и наставники курса.
Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
Разберём процесс работы над проектом и его защиту.
Статьи
Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы браузеров, Git и GitHub.
Проекты
Выбираем наставника.
Настраиваем инструменты разработки, создаём репозитории проектов.
Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.
Раздел 2
Разметка
ЛайвЧетверг с 19:00 до 21:00
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.
Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.
Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.
Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.
Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.
Демонстрации
Интерактивные демонстрации по разметке учебного проекта.
Тренажёры
Статьи
Тренажёры для знакомства с HTML.
Статьи о том, как правильно создавать семантическую HTML-разметку.
Проекты
Получаем макеты в Figma.
Создаём и размечаем страницы проекта.
Вторая неделя
Раздел 3
Графика и базовая стилизация
ЛайвЧетверг с 19:00 до 21:00
Экспортируем графику из макета и выполним базовую стилизацию страниц проекта.
Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов и графики.
Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.
Внедрим контентную и декоративную графику на страницы проекта.
Подключим шрифты, поработаем с типографикой и зададим фоны элементам.
Демонстрации
Интерактивные демонстрации по базовой стилизации учебного проекта.
Тренажёры
Статьи
Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.
Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.
Проекты
Экспортируем растровую и векторную графику из Figma.
Подключаем контентную графику в разметку.
Выполняем базовую стилизацию: текстовые параметры, фоны крупных блоков, текстуры.
Третья неделя
Раздел 4
Сетки страниц на флексах
ЛайвЧетверг с 19:00 до 21:00
Построим крупные сетки страниц с помощью флексов.
Разберёмся в боксовой модели и познакомимся с типами боксов.
Научимся анализировать сетки на макетах и определять крупные сетки страниц.
Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов, растяжение, сужение и базовый размер флексов.
Демонстрации
Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.
ТренажёрыСтатьи
Статьи, которые помогут разобраться с особенностями флексов, блочной модели и приёмами построения сеток.
Тренажёры для знакомства с блочной моделью документа, флексами и приёмами построения сеток.
Проекты
Описываем крупные сетки страниц на флексах.
Сравниваем вёрстку с макетом.
Четвёртая неделя
Раздел 5
Сетки компонентов на флексах
ЛайвПонедельник с 19:00 до 21:00
Создадим мелкие сетки компонентов страниц при помощи флексов.
Разберём особенности мелких сеток.
Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.
Демонстрации
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.
ТренажёрыСтатьи
Статьи, которые помогут разобраться с особенностями многострочных флексов.
Тренажёры для погружения в работу с флексами.
Проекты
Описываем мелкие сетки компонентов страниц на флексах.
Сравниваем вёрстку с макетом.
Пятая неделя
Раздел 6
Сетки компонентов на гридах
ЛайвПонедельник с 19:00 до 21:00
Создадим мелкие сетки компонентов страниц при помощи гридов.
Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
Разберём типовые ситуации, когда гриды подходят лучше флексов.
Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.
Демонстрации
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.
Тренажёры
Статьи
Тренажёры для знакомства с гридами.
Статьи, которые помогут разобраться с особенностями гридов.
Проекты
Описываем мелкие сетки компонентов страниц на гридах.
Сравниваем вёрстку с макетом.
Шестая неделя
ЗАЩИТА ПРОЕКТАПодготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.
Раздел 7
Декоративные элементы
ЛайвПонедельник с 19:00 до 21:00
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
Научимся использовать оформительскую и программируемую графику.
Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.
Рассмотрим псевдоэлементы и точечное позиционирование элементов.
Погрузимся в тонкости типографики и визуальные правила оформления контента.
Научимся стилизовать интерактивные состояния ссылок и кнопок.
Демонстрации
Интерактивные демонстрации со стилизацией декоративных и контентных элементов учебного проекта.
Тренажёры
Статьи
Тренажёры для закрепления навыков создания декоративных элементов.
Проекты
Добавляем мелкие декоративные и иконочные графические элементы.
Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
Раздел 8
Попапы, слайдеры, формы
ЛайвЧетверг с 19:00 до 21:00
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.
Научимся оформлять нестандартные элементы форм.
Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.
Демонстрации
Интерактивные демонстрации с вёрсткой всплывающих элементов, стилизацией форм и состояний интерактивных элементов учебного проекта.
Проекты
Добавляем разметку и стилизацию всплывающих элементов и слайдеров.
Стилизуем формы и элементы форм.
Добавляем состояния интерактивных элементов.
Первая неделя защиты
Завершение работы над проектом и подготовка к итоговой защите.
Седьмая неделя
Раздел 9
Шлифовка
ЛайвЧетверг с 19:00 до 21:00
Проверим проект на соответствие критериям качества и подготовим его к публикации.
Доработаем доступность и интерактивность интерфейса.
Протестируем контент на изменение количества и размеров элементов, текста и графики.
Проверим проект на соответствие макету и стайлгайду.
Демонстрации
Интерактивные демонстрации с тестированием и корректировками учебного проекта.
Проекты
Тестируем вёрстку в соответствии с чеклистом приёмки проекта.
Вносим корректировки в соответствии с критериями.
Добиваемся полного совпадения вёрстки с макетом и стайлгайдом.
Вторая неделя защиты
Первая оценка проекта проверяющим наставником по критериям качества.
Восьмая неделя
Третья неделя защиты
Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.
Девятая неделя
Четвёртая неделя защиты
Внесение финальных правок и получение итоговой оценки.
Раздел 10
Финал
ФиналСреда с 19:00 до 20:00
Поговорим о том, как прошёл курс и куда вам двигаться дальше.
Результаты курса.
Сделаем обзор статистики по студентам и проектам.
Обсудим, что вы узнали в процессе курса и что уже можете делать.
Поговорим о вариантах вашего дальнейшего развития.
Продажник
Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий в GitHub Desktop и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать личный наставник.
Программа курса
Раздел 1
Старт
ЛайвПонедельник с 19:00 до 21:00
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.
Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
Узнаем, кто такие авторы, кураторы и наставники курса.
Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
Разберём процесс работы над проектом и его защиту.
Статьи
Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы браузеров, Git и GitHub.
Проекты
Выбираем наставника.
Настраиваем инструменты разработки, создаём репозитории проектов.
Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.
Раздел 2
Разметка
ЛайвЧетверг с 19:00 до 21:00
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.
Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.
Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.
Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.
Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.
Демонстрации
Интерактивные демонстрации по разметке учебного проекта.
Тренажёры
Статьи
Тренажёры для знакомства с HTML.
Статьи о том, как правильно создавать семантическую HTML-разметку.
Проекты
Получаем макеты в Figma.
Создаём и размечаем страницы проекта.
Вторая неделя
Раздел 3
Графика и базовая стилизация
ЛайвЧетверг с 19:00 до 21:00
Экспортируем графику из макета и выполним базовую стилизацию страниц проекта.
Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов и графики.
Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.
Внедрим контентную и декоративную графику на страницы проекта.
Подключим шрифты, поработаем с типографикой и зададим фоны элементам.
Демонстрации
Интерактивные демонстрации по базовой стилизации учебного проекта.
Тренажёры
Статьи
Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.
Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.
Проекты
Экспортируем растровую и векторную графику из Figma.
Подключаем контентную графику в разметку.
Выполняем базовую стилизацию: текстовые параметры, фоны крупных блоков, текстуры.
Третья неделя
Раздел 4
Сетки страниц на флексах
ЛайвЧетверг с 19:00 до 21:00
Построим крупные сетки страниц с помощью флексов.
Разберёмся в боксовой модели и познакомимся с типами боксов.
Научимся анализировать сетки на макетах и определять крупные сетки страниц.
Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов, растяжение, сужение и базовый размер флексов.
Демонстрации
Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.
ТренажёрыСтатьи
Статьи, которые помогут разобраться с особенностями флексов, блочной модели и приёмами построения сеток.
Тренажёры для знакомства с блочной моделью документа, флексами и приёмами построения сеток.
Проекты
Описываем крупные сетки страниц на флексах.
Сравниваем вёрстку с макетом.
Четвёртая неделя
Раздел 5
Сетки компонентов на флексах
ЛайвПонедельник с 19:00 до 21:00
Создадим мелкие сетки компонентов страниц при помощи флексов.
Разберём особенности мелких сеток.
Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.
Демонстрации
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.
ТренажёрыСтатьи
Статьи, которые помогут разобраться с особенностями многострочных флексов.
Тренажёры для погружения в работу с флексами.
Проекты
Описываем мелкие сетки компонентов страниц на флексах.
Сравниваем вёрстку с макетом.
Пятая неделя
Раздел 6
Сетки компонентов на гридах
ЛайвПонедельник с 19:00 до 21:00
Создадим мелкие сетки компонентов страниц при помощи гридов.
Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
Разберём типовые ситуации, когда гриды подходят лучше флексов.
Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.
Демонстрации
Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.
Тренажёры
Статьи
Тренажёры для знакомства с гридами.
Статьи, которые помогут разобраться с особенностями гридов.
Проекты
Описываем мелкие сетки компонентов страниц на гридах.
Сравниваем вёрстку с макетом.
Шестая неделя
ЗАЩИТА ПРОЕКТАПодготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.
Раздел 7
Декоративные элементы
ЛайвПонедельник с 19:00 до 21:00
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
Научимся использовать оформительскую и программируемую графику.
Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.
Рассмотрим псевдоэлементы и точечное позиционирование элементов.
Погрузимся в тонкости типографики и визуальные правила оформления контента.
Научимся стилизовать интерактивные состояния ссылок и кнопок.
Демонстрации
Интерактивные демонстрации со стилизацией декоративных и контентных элементов учебного проекта.
Тренажёры
Статьи
Тренажёры для закрепления навыков создания декоративных элементов.
Проекты
Добавляем мелкие декоративные и иконочные графические элементы.
Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
Раздел 8
Попапы, слайдеры, формы
ЛайвЧетверг с 19:00 до 21:00
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.
Научимся оформлять нестандартные элементы форм.
Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.
Демонстрации
Интерактивные демонстрации с вёрсткой всплывающих элементов, стилизацией форм и состояний интерактивных элементов учебного проекта.
Проекты
Добавляем разметку и стилизацию всплывающих элементов и слайдеров.
Стилизуем формы и элементы форм.
Добавляем состояния интерактивных элементов.
Первая неделя защиты
Завершение работы над проектом и подготовка к итоговой защите.
Седьмая неделя
Раздел 9
Шлифовка
ЛайвЧетверг с 19:00 до 21:00
Проверим проект на соответствие критериям качества и подготовим его к публикации.
Доработаем доступность и интерактивность интерфейса.
Протестируем контент на изменение количества и размеров элементов, текста и графики.
Проверим проект на соответствие макету и стайлгайду.
Демонстрации
Интерактивные демонстрации с тестированием и корректировками учебного проекта.
Проекты
Тестируем вёрстку в соответствии с чеклистом приёмки проекта.
Вносим корректировки в соответствии с критериями.
Добиваемся полного совпадения вёрстки с макетом и стайлгайдом.
Вторая неделя защиты
Первая оценка проекта проверяющим наставником по критериям качества.
Восьмая неделя
Третья неделя защиты
Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.
Девятая неделя
Четвёртая неделя защиты
Внесение финальных правок и получение итоговой оценки.
Раздел 10
Финал
ФиналСреда с 19:00 до 20:00
Поговорим о том, как прошёл курс и куда вам двигаться дальше.
Результаты курса.
Сделаем обзор статистики по студентам и проектам.
Обсудим, что вы узнали в процессе курса и что уже можете делать.
Поговорим о вариантах вашего дальнейшего развития.
Продажник
