Профессиональный навык

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

Подробное описание навыка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тренировочный материал

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

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

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

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

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

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

Продажа закрыта