[Html Academy] Создание семантической разметки по макету. Тариф «Полный комплект»

Профессиональная задача:
Опираясь на графический макет, нужно спроектировать информационную архитектуру страниц и написать корректную, семантичную и выразительную HTML-разметку.

Зачем нужен этот навык:
Вёрстка любой веб-страницы начинается с написания HTML-кода, то есть с её разметки. Качественно сделанная разметка при создании интерфейсов так же важна, как правильно заложенный фундамент при строительстве дома.

Расположение относительно других навыков:
Это стартовый навык, который является фундаментом для остальных навыков. В

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

он находится на самом верху, а значит осваивать его можно сразу после получения базовых знаний по HTML и CSS.

Минимальные требования для освоения:
Пройдены три главы курса Знакомство с HTML и CSS:

• Основы HTML и CSS,
• Структура HTML-документа,
• Разметка текста.

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

Углублённая теория

7 разделов углублённой теории, общим объёмом 29 страниц.

Включает следующую информацию:

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

Инструкция создания разметки по макету

Методика семантической разметки, общий объём 25 страниц.

Включает пошаговый алгоритм создания разметки по принципу «от крупных блоков к мелким» и подробное описание каждого шага с примерами макетов, рекомендациями по разметке и примерами кода.

Демонстрационные кейсы

Три демонстрационных кейса, по одному для каждого уровня сложности.

Показывают как применять описанную выше инструкцию для создания разметки реальных проектов.

В каждом кейсе в качестве входных данных мы получаем дизайн страниц. Затем, используя предложенную методику, пошагово создаём разметку. На выходе получаем готовую разметку. Все шаги детально описаны.
Интерактивные пошаговые разборы кейсов

Один или несколько разборов для каждого демо-кейса.

Разборы кейсов выполнены в виде специальных интерактивных демонстраций. В них вы видите каждое изменение кода, результат его работы и пояснение к этому изменению.

Для кейсов по разметке мы подготовили специальное оформление, которое «подсвечивает» важные блоки.

Тренировочный материал
Кейсы с возрастающей сложностью и эталонными решения, на которых вы и тренируете навык.

Шесть тренировочных кейса, по два для каждого уровня сложности.

В качестве входных данных вы получаете дизайны страниц, на выходе должна получиться разметка без стилизации.

Для тренировочных кейсов нет подробных разборов, но есть эталонное решение от авторов, которое можно сравнить со своим.