[HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов (2021)

[serafim]

[HTML Academy] HTML и CSS. Профессиональная вёрстка сайтов (2021)


Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.

Программа курса:

Первая неделя
Познакомимся с участниками и процессом на курсе, рассмотрим устройство веба и ваше место в профессии, подготовим инструменты для работы.

Как проходит курс.

• Обзор личных проектов. Техническое задание и критерии качества. Структура курса. Авторы, кураторы, наставники. Работа с наставником. Защита личного проекта.

Кто и как делает сайты.

• Из чего состоит сайт в интернете: сервер, браузер, вёрстка. Кто делает сайты: дизайн, вёрстка, бэкенд. Ответственность верстальщика: удобство, доступность, перфоманс.

Инструменты и процесс.

• Редакторы и инспекторы графики: Figma, Photoshop. Редакторы кода, браузеры, отладчики. Система контроля версий. Процесс работы над проектом.

Раздел 2
Разметка

Проанализируем макет перед вёрсткой, узнаем синтаксис HTML и базовую структуру страницы, посмотрим как работает спецификация и разберём сложные случаи разметки.

Создание страниц по макету.

• Анализ макета. Структура проекта.

Синтаксис HTML

• Парные и одиночные теги. Вложенность и дерево документа. Типы атрибутов.

Базовая структура страницы.

• Метаданные и подключение ресурсов. Контент страницы. Теги для вывода и подключения.

Семантика и спецификации.

• Стандарты и спецификации. Категории тегов. Разбор правил вкладывания

Вторая неделя
Раздел 3
Стилизация

Разделим макет на блоки, создадим структуру стилей, погрузимся в основы CSS, поработаем с типографикой и подключим шрифты.

Устройство и логические части макета.

• Выделение блоков из макета. Уникальные и повторяющиеся блоки. Создание переменных для цветов.

Файлы и структура для блоков.

• Подключение стилей на страницу.

Погружение в стили для блоков.

• Разделение контента и интерфейса. Именование классами и по тегам. Селектор, блок правил, свойство-значение. Сложные и простые селекторы. Почему используются классы.

Наследование, каскад, специфичность

• Какие свойства наследуются, какие нет. Чем font-size отличается от background-color. Каскадирование и специфичность.

Размеры и центрирование макета.

• Измерение блоков в Figma.

Шрифты.

• Использование системных шрифтов. Подключение шрифтов проекта. Использование и настройка Google Fonts. Использование шрифтов в стилях.

Раздел 4
Графика

Посмотрим, какие есть редакторы и инспекторы графики, изучим интерфейс Figma, разберёмся в форматах графики, научимся выбирать правильные, экспортировать и оптимизировать.

Отличия редактора от инспектора.

• Обзор редакторов: Photoshop, Illustrator, Sketch, Figma. Обзор инспекторов: Zeplin, Avocode. Выбор подходящего инструмента.

Интерфейс Figma и работа с макетом.

• Страницы, фреймы, слои, инспектор. Параметры блоков: прозрачность, фон, тени, координаты. Параметры текста: семейство, начертание, размер.

Форматы графики и принцип выбора.

• Растровая, векторная и генерируемая графика. Форматы GIF, JPEG, PNG, WebP и SVG. Выбор формата по детализации изображения. Настройки экспорта графики из Figma.

Оптимизация графики после экспорта.

• Установка Squoosh и SVGOMG на десктоп. Оптимальные настройки Squoosh и SVGOMG. Пакетная оптимизация графики.

Файловая структура и указание путей.

• Структура папок для хранения графики. Пути к ресурсам на примере графики.

Третья неделя
Раздел 5
Сетки на гридах

Научимся понимать систему сеток и раскладку блоков на примере Grid Layout. Научимся выделять сетки на макетах. Разберёмся в блочной модели.

Модульная система и сетки.

• Направляющие, колонки, строки и отступы. Сетка как основа, но не строгое правило.

Спецификация Grid Layout и раскладка по сетке макета.

• Устройство шаблонов: строки, колонки, линии, отступы. Ручная и автоматическая раскладка. Спецификация Box Alignment и выравнивание внутри сетки.

Блочная модель.

• Устройство, типы и переключение блочной модели. Явная и автоматическая ширина, центрирование.

Раздел 6
Сетки на флексах

Научимся понимать систему сеток и раскладку блоков на примере Flexible Boxes. Научимся выбирать случаи, когда флексы подходят лучше гридов.

Спецификация Flexible Boxes и раскладка внутри блоков.

• Оси: основная, поперечная, направление. Расположение на основной и поперечной оси. Растяжение, сужение, базовый размер флексов.

Флексы и гриды.

• Особенности систем раскладки. Ситуации, подходящие для гридов. Ситуации, подходящие для флексов. Совместное использование.

Четвёртая неделя
Раздел 7
Декоративные элементы

Поговорим о том, какими правилами оперирует дизайн при построении макетов. Рассмотрим состояния и позиционирование элементов на странице. Сделаем интерфейс устойчивым к переполнению.

Контентная и оформительская графика в вебе.

• Отличия контентной и оформительской графики. Вставка оформительской в стили и разметку. Программируемая графика, уместное использование.

Визуальные правила и типографика.

• Теория близости и оптическая компенсация. Типографика и характеристики текста.

Интерактивность интерфейса.

• Состояния и события элементов интерфейса. Переходы, анимация, плавность интерфейса.

Раскладка контента: мультиколонки и флоаты.

• Колонки для текста и блоков, перетекание и запреты. Обтекание блоков текстом, схлопывание и клиаринг.

Переполнение контента.

• Изменение числа элементов в списках. Вставка картинок и видео. Длинные и короткие слова, многострочность и переносы.

Пятая неделя
Раздел 8
Оформление контента

Узнаем как стилизовать содержание внутренних страниц, которые наполняются из CMS. Начнём готовиться к защите личного проекта.

Практикуемся в вёрстке элементов содержимого.

• Сверстаем текстовую страницу проекта. Подготовим универсальные стили содержания, которые будут хорошо работать при наполнении страницы из CMS. Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм. Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

Разбираем типовые случаи переполнения и способы борьбы с ними.

Раздел 9
Доступность и формы

Поговорим про доступность, рассмотрим возможности улучшения удобства интерфейсов. Поработаем с инструментами проверки и отладки доступности.

Ситуации с неудобным интерфейсом, введение в доступность.

• Неконтрастные цвета, подложки для текста. Универсальный доступ, условия и физиология. Альтернативные средства: поисковики, режимы чтения, скринридеры.

Доступность встроенных в HTML элементов.

• Встроенные интерактивные элементы. Ориентиры и навигация в скринридерах.

Способы взаимодействия с интерфейсом.

• Мышь и ховер. Клавиатура и фокус. Клавиатура и голос.

Популярные паттерны интерфейса.

• Кнопки-ссылки. Радиокнопки, чекбоксы, селект.

Подписи к интерактивным и контентным элементам.

• Заголовки областей контента. Подписи к контентным элементам: картинки, видео, фреймы. Доступная инлайновая вставка SVG. Формы и подписи к полям. Добавление подписей в сложных случаях: заголовки, иконки.

Инструменты проверки и отладки доступности.

• Дерево доступности в браузерных отладчиках. Расширения для проверки доступности: aXe, Siteimprove. Демонстрация скринридера.

Шестая неделя
Раздел 10
Оживление интерфейса

Поговорим о том, где применяется JavaScript, чем отличается DOM и HTML-дерево. Подключим и настроим JavaScript-компоненты.

JavaScript в браузерах.

• JavaScript-движки в браузерах и не только. Отличия DOM и HTML-дерева. Работа с DOM: поиск элементов и сохранение в переменных. Создание функций, вызов и передача параметров.

Интерактивные компоненты Барбершопа.

• Обзор требований технического задания учебного проекта. Подключение JavaScript-файлов на страницу. Настройка компонентов.

Раздел 11
Финал

Поговорим о том, как прошёл курс и куда вам двигаться дальше.

Результаты курса.

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

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

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

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

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

ПРОДАЖНИК
Онлайн-курс «HTML и CSS. Профессиональная вёрстка сайтов»
СКАЧАТЬ

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.