[НТМLAcademy] НТМLи CSS. Профессиональная вёрстка сайтов. 7 сентября  8 ноября 2020

195₽

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

  • Статистика по студентам и проектам.
  • Сложности в процессе.

Ваше место в профессии.

  • Что вы узнали в процессе.
  • Что вы уже можете делать.
  • Место на профессиональном пути.

Куда двигаться дальше.

  • Варианты развития.
  • Профессии Академии.
  • Навыки и курсы.
  • Акселератор и Лига А.
Нажмите для раскрытия…

Продолжение здесь: