Задача верстальщика — создать рабочий интерфейс, используя грамотный и валидный код. Но как самостоятельно проверить, что с кодом всё хорошо? Чтобы помочь с ответом, мы собрали примеры решения реальных задач и подготовили подробные инструкции для каждой из них.
Навык — инструкция по решению конкретной задачи, поэтому в навык входят теория, демонстрации и кейсы. Это помогает разобраться в вопросе, посмотреть, как задача устроена изнутри, и решить похожие задачи своими руками, чтобы закрепить навык.
Кроме верстальщиков, навыки пригодятся преподавателям веб-разработки. По сути, каждый навык — готовая методичка с практическими примерам для отработки темы.
Рассмотрим навык «Создание семантической разметки по макету». Правильная разметка делает страницу понятной и удобной для использования и браузеру, и пользователю. Создавать её важно для проектов любой сложности, от простых лендингов до сложных многостраничных интерфейсов.
Теория на человеческом языке
Навык начинается с подробного алгоритма разметки страницы с примерами и интересными фактами. Это тот случай, когда теорию читать нескучно и познавательно.
В методике приведены примеры вёрстки из реальных проектов. В особо сложных случаях есть ссылки на статьи и дополнительные материалы, чтобы было проще разобраться.
Для тех, кто знаком с темой, предусмотрен раздел с углубленной теорией — там есть информация про спецификации, подходы к верстке и типовые ошибки в использовании тегов.
Интерактивные демонстрации
Демки — песочница для будущего верстальщика. Пошаговые инструкции помогут разобраться в теории и пошагово создать структуру будущего сайта на основе дизайна из задания. Задания в демках отличаются по сложности: от простых страничек ученики переходят к продвинутым проектам, пошагово разбирая все этапы создания разметки.
Интерфейс помогает лучше усвоить тему: новые строчки кода подсвечены в редакторе, а в разметку добавлено цветовое кодирование важных частей сетки макета.
Тренировочные кейсы
Тренировочные кейсы помогают закрепить навык на практике.
Каждый кейс содержит макет страницы, все тексты и скриншоты того, что должно получиться в результате. Задача ученика — разметить страницу максимально близко к образцу. После этого нужно загрузить решение на сайт — система проверит код по заданным критериям и, если есть замечания, укажет на проблемные места. Чтобы довести проект до идеала, можно отправить решение несколько раз.
Преподаватели могут использовать тренировочный кейс как зачёт по теме — это способ проверить знания и умения учеников и сэкономить время на проверке.
В полном комплекте навыка пользователю доступно 3 демонстрационных (по одному на каждый уровень сложности) и 6 тренировочных кейсов. Бонус для тех, у кого есть подписка HTML Academy — ещё 3 тренировочных кейса в подарок.
Семантическая разметка текста — основа работы верстальщика.