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