Спойлер: Программа курса
Неделя 1 Раздел 1
Старт
Вводная лекция Познакомимся с участниками и процессом на курсе, рассмотрим устройство веба и ваше место в профессии, подготовим инструменты для работы.
Как проходит курс. - Обзор личных проектов.
- Техническое задание и критерии качества.
- Структура курса.
- Авторы, кураторы, наставники.
- Работа с наставником.
- Защита личного проекта.
Кто и как делает сайты. - Из чего состоит сайт в интернете: сервер, браузер, вёрстка.
- Кто делает сайты: дизайн, вёрстка, бэкенд.
- Ответственность верстальщика: удобство, доступность, перфоманс.
Инструменты и процесс. - Редакторы и инспекторы графики: Figma, Photoshop.
- Редакторы кода, браузеры, отладчики.
- Система контроля версий.
- Процесс работы над проектом.
Раздел 2
Введение в HTML
Основы семантичной разметки Проанализируем макет перед вёрсткой, узнаем синтаксис HTML и базовую структуру страницы, посмотрим как работает спецификация и разберём сложные случаи разметки.
Создание страниц по макету. - Анализ макета.
- Структура проекта.
Синтаксис HTML - Парные и одиночные теги.
- Вложенность и дерево документа.
- Типы атрибутов.
Базовая структура страницы. - Метаданные и подключение ресурсов.
- Контент страницы.
- Теги для вывода и подключения.
Семантика и спецификации. - Стандарты и спецификации.
- Категории тегов.
- Разбор правил вкладывания.
Неочевидные сложности разметки. - Альтернативные средства просмотра.
- Поисковики, скринридеры, режимы чтения.
- Визуальное против смыслового.
Вторая неделя Раздел 3
Введение в CSS
Основы современных стилей Разделим макет на блоки, создадим структуру стилей, погрузимся в основы CSS, поработаем с типографикой и подключим шрифты.
Устройство и логические части макета. - Выделение блоков из макета.
- Уникальные и повторяющиеся блоки.
- Создание переменных для цветов.
Файлы и структура для блоков. - Создание отдельных файлов для блоков.
- Импорт глобальных и блочных стилей.
- Подключение стилей на страницу.
Погружение в стили для блоков. - Разделение контента и интерфейса.
- Именование классами и по тегам.
- Селектор, блок правил, свойство-значение.
- Сложные и простые селекторы.
- Почему используются классы.
Наследование, каскад, специфичность - Какие свойства наследуются, какие нет.
- Чем font-size отличается от background-color.
- Каскадирование и специфичность.
Размеры и центрирование макета. - Измерение блоков в Figma.
- Центрирование макета с помощью значения auto.
Шрифты. - Использование системных шрифтов.
- Подключение шрифтов проекта.
- Использование и настройка Google Fonts.
- Использование шрифтов в стилях.
Раздел 4
Редакторы и инспекторы графики
Инструменты и форматы графики Посмотрим, какие есть редакторы и инспекторы графики, изучим интерфейс Figma, разберёмся в форматах графики, научимся выбирать правильные, экспортировать и оптимизировать.
Отличия редактора от инспектора. - Обзор редакторов: Photoshop, Illustrator, Sketch, Figma.
- Обзор инспекторов: Zeplin, Avocode.
- Выбор подходящего инструмента.
Интерфейс Figma и работа с макетом. - Страницы, фреймы, слои, инспектор.
- Параметры блоков: прозрачность, фон, тени, координаты.
- Параметры текста: семейство, начертание, размер.
Форматы графики и принцип выбора. - Растровая, векторная и генерируемая графика.
- Форматы GIF, JPEG, PNG, WebP и SVG.
- Выбор формата по детализации изображения.
- Настройки экспорта графики из Figma.
Оптимизация графики после экспорта. - Установка Squoosh и SVGOMG на десктоп.
- Оптимальные настройки Squoosh и SVGOMG.
- Пакетная оптимизация графики.
Файловая структура и указание путей. - Структура папок для хранения графики.
- Пути к ресурсам на примере графики.
Третья неделя Раздел 5
Сетки и раскладки Введение в модульные сеткиПонедельник с 19:00 до 21:00Лектор: Вадим Макеев
Научимся понимать систему сеток и раскладку блоков, рассмотрим принципы работы Grid Layout и Flexible Boxes, научимся предусматривать переполнение сетки и разберёмся в блочной модели.
Модульная система и сетки. - Направляющие, колонки, строки и отступы.
- Сетка как основа, но не строгое правило.
Спецификация Grid Layout и раскладка по сетке макета. - Устройство шаблонов: строки, колонки, линии, отступы.
- Ручная и автоматическая раскладка.
- Спецификация Box Alignment и выравнивание внутри сетки.
Спецификация Flexible Boxes и раскладка внутри блоков. - Оси: основная, поперечная, направление.
- Расположение на основной и поперечной оси.
- Растяжение, сужение, базовый размер флексов.
Переполнение сеток. - Отступы при малом количестве блоков.
- Многострочные списки блоков.
- Концевые блоки: резина, выравнивание.
Блочная модель. - Устройство, типы и переключение блочной модели.
- Явная и автоматическая ширина, центрирование.
Раздел 6
Декоративные и контентные элементы Визуальное отображение элементов страницы
Поговорим о том, какими правилами оперирует дизайн при построении макетов. Рассмотрим состояния и позиционирование элементов на странице. Сделаем интерфейс устойчивым к переполнению.
К
онтентная и оформительская графика в вебе. - Отличия контентной и оформительской графики.
- Вставка оформительской в стили и разметку.
- Программируемая графика, уместное использование.
Визуальные правила и типографика. - Теория близости и оптическая компенсация.
- Типографика и характеристики текста.
Интерактивность интерфейса. - Состояния и события элементов интерфейса.
- Переходы, анимация, плавность интерфейса.
Раскладка контента: мультиколонки и флоаты. - Колонки для текста и блоков, перетекание и запреты.
- Обтекание блоков текстом, схлопывание и клиаринг.
Переполнение контента. - Изменение числа элементов в списках.
- Вставка картинок и видео.
- Длинные и короткие слова, многострочность и переносы
Четвёртая неделя Раздел 7
Доступность
Основы доступности интерфейсов Поговорим про доступность, рассмотрим возможности улучшения удобства интерфейсов. Поработаем с инструментами проверки и отладки доступности.
Ситуации с неудобным интерфейсом, введение в доступность. - Неконтрастные цвета, подложки для текста.
- Универсальный доступ, условия и физиология.
- Альтернативные средства: поисковики, режимы чтения, скринридеры.
Доступность встроенных в HTML элементов. - Встроенные интерактивные элементы.
- Ориентиры и навигация в скринридерах.
Способы взаимодействия с интерфейсом. - Мышь и ховер.
- Клавиатура и фокус.
- Клавиатура и голос.
Популярные паттерны интерфейса. - Кнопки-ссылки.
- Радиокнопки, чекбоксы, селект.
- Выпадающие меню, спойлеры.
- Карусели, табы, модалки.
Подписи к интерактивным и контентным элементам. - Заголовки областей контента.
- Подписи к контентным элементам: картинки, видео, фреймы.
- Доступная инлайновая вставка SVG.
- Формы и подписи к полям.
- Добавление подписей в сложных случаях: заголовки, иконки.
Инструменты проверки и отладки доступности. - Дерево доступности в браузерных отладчиках.
- Расширения для проверки доступности: aXe, Siteimprove.
- Обзор скринридеров: VoiceOver, NVDA, JAWS.
Пятая неделя Раздел 8
JavaScript в вёрстке
Основы JavaScrpipt Поговорим о том, где применяется JavaScript, чем отличается DOM и HTML-дерево. Подключим и настроим JavaScript-компоненты.
Скрипты в веб-интерфейсах. - Встроенные в браузер виджеты.
- Состояния интерфейса, зачем нужен JavaScript.
- Плохая интерактивность на чистом CSS.
- Примеры работы скриптов в интерфейсах.
- Современная архитектура, SPA.
JavaScript в браузерах. - JavaScript-движки в браузерах и не только.
- Отличия DOM и HTML-дерева.
- Работа с DOM: поиск элементов и сохранение в переменных.
- Создание функций, вызов и передача параметров.
Интерактивные компоненты Барбершопа. - Обзор требований технического задания учебного проекта.
- Подключение JavaScript-файлов на страницу.
- Настройка компонентов.
Девятая неделя Раздел 9
Финал
Финальная лекция Поговорим о том, как прошёл курс и куда вам двигаться дальше.
Результаты курса. - Статистика по студентам и проектам.
- Сложности в процессе.
Ваше место в профессии. - Что вы узнали в процессе.
- Что вы уже можете делать.
- Место на профессиональном пути.
Куда двигаться дальше. - Варианты развития.
- Профессии Академии.
- Навыки и курсы.
- Акселератор и Лига А.