Создание семантической разметки по макету

Описание навыка

Профессиональная задача:

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

Зачем нужен этот навык:

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

Расположение относительно других навыков:

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

Минимальные требования для освоения:

Пройдены три части тренажёра Знакомство с HTML и CSS:

Состав навыка

Подготовительный материал

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

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

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

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

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

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

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

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

Фрагмент методики по созданию разметки

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

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

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

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

Так выглядят некоторые страницы кейсов:

Некоторые страницы демонстрационных кейсов

Интерактивные пошаговые разборы кейсов

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

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

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

Так выглядит один из шагов разбора кейса «Новости культуры»:

Шаг интерактивного разбора