- Регистрация
- 13.03.2019
- Сообщения
- 48 482
Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени. Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий в GitHub Desktop и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, анимацией, ретиновой графикой, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать личный наставник. Программа курса Неделя 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 Финал Финальная лекция Поговорим о том, как прошёл курс и куда вам двигаться дальше. Результаты курса. Статистика по студентам и проектам. Сложности в процессе. Ваше место в профессии. Что вы узнали в процессе. Что вы уже можете делать. Место на профессиональном пути. Куда двигаться дальше. Варианты развития. Профессии Академии. Навыки и курсы. Акселератор и Лига А. Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть... 
|
