Веб верстка в Астане

ОПИСАНИЕ КУРСА

• Познакомимся с преподавателями, наставниками и учебным процессом на курсе.
• Рассмотрим устройство веба и чем вы будете заниматься на работе.
• Установим и настроим инструменты для работы.
• Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
• Узнаем, кто такие авторы, кураторы и наставники курса.
• Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
• Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
• Разберём процесс работы над проектом и его защиту Разметка Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.
• Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.
• Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.
• Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.
• Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.
• Графика Экспортируем графику из макета. Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
• Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
• Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере графики.
• Базовая стилизация Выполним базовую стилизацию страниц проекта.
• Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов.
• Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.
• Внедрим контентную и декоративную графику на страницы проекта.
• Подключим шрифты, поработаем с типографикой и зададим фоны элементам. Сетки страниц на флексах
• Построим крупные сетки страниц с помощью флексов. Разберёмся в боксовой модели и познакомимся с типами боксов.
• Научимся анализировать сетки на макетах и определять крупные сетки страниц.
• Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.
• Сетки компонентов на флексах Создадим мелкие сетки компонентов страниц при помощи флексов.
• Разберём особенности мелких сеток. Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
• Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.
• Сетки компонентов на гридах Создадим мелкие сетки компонентов страниц при помощи гридов.
• Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
• Разберём типовые ситуации, когда гриды подходят лучше флексов.
• Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.
• Декоративные элементы Добавим на страницы проектов мелкие декоративные и иконочные графические элементы.
• Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
• Научимся использовать оформительскую и программируемую графику.
• Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.
• Рассмотрим псевдоэлементы и точечное позиционирование элементов.
• Погрузимся в тонкости типографики и визуальные правила оформления контента.
• Попапы, слайдеры, формы Сверстаем всплывающие элементы.
• Разберём приёмы стилизации форм и их элементов.
• Рассмотрим состояния и позиционирование элементов на странице.
• Научимся оформлять нестандартные элементы форм.
• Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
• Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.
• Подготовка к защите Проверим проект на соответствие критериям качества и подготовим его к публикации.
• Доработаем доступность и интерактивность интерфейса.
• Протестируем контент на изменение количества и размеров элементов, текста и графики.
• Проверим проект на соответствие макету и стайлгайду
• Научимся стилизовать интерактивные состояния ссылок и кнопок.