Осваивать новые технологии непросто: нужны мотивация, усидчивость и интерес к теме. С чего начать обучение, чтобы не потерять запал? Изучать документацию для новичка трудно, читать учебники — просто скучно. Но решение есть. Например, интерактивный тренажёр «Знакомство с HTML и CSS» разработан для тех, кто хочет попробовать технологию на практике и создавать простые странички.

Тренажёр состоит из пяти частей, которые раскрывают основы HTML и CSS: структура страницы, основы стилизации, разметка и оформление текста и оформление картинок и ссылок.

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

Изображение сайта-портфолио
Так выглядит первый экран сайта-портфолио

Давайте рассмотрим, в чём основные фишки этого тренажёра.

Понятная теория и упражнения для проверки

Учить теорию в отрыве от практики быстро надоедает. Мы придумали конкретную задачу: создать страничку начинающего верстальщика. Руководит юным падаваном, конечно, пушистый инструктор Кекс.

Источник теории для тренажёра — официальная спецификация и документация, изложенная простым языком. Каждое задание — мини-блок теории и практика для её отработки. Для тех, кто любит изучать всё досконально, авторы предусмотрели вкладку «Режим зануды», где подробно описываются тонкости теории. На вкладке «Кстати» авторы делятся интересными фактами по теме и дают советы.

Подсветка элементов в тренажёре
Подсветка различных элементов для большей наглядности

Чтобы проще было возвращаться к теории, каждая часть тренажёра завершается кратким конспектом. Кстати, мы уже подробно рассказывали о том, как правильно вести конспекты, чтобы учиться эффективнее.

Испытания по вёрстке

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

Как выглядит режим наложения
В режиме наложения хорошо видно отличия

Автоматическая проверка заданий

Поскольку интерактивный тренажёр не подразумевает участия учителя в обучении, мы предусмотрели автоматизированные проверки. Интерфейс тренажёра не только быстро проверяет задания, но и указывает на ошибки при написании кода. Это учит ответственно подходить к написанию кода и экономить время в поисках той самой кавычки, из-за которой программа не засчитывает задание.

Как выглядит подсветка ошибок
Ошибки подсвечиваются в коде и выводятся в консоли

Дополнительная практика

Проходить тренажёр обычно довольно легко: минимальный объём теории тут же проверяется в задании. Но одних тренажёров, для того чтобы хорошенько отработать тему, мало: настоящему верстальщику нужна тренировка на реальных задачах. Для этого создан дополнительный раздел «Практика», где к каждой из частей тренажёра предлагается 4-5 испытаний разного уровня сложности.

Задания спроектированы таким образом, чтобы помочь применить на практике всю изученную теорию. Такие задания знакомят с реальными типовыми интерфейсами, которые зачастую создаются по общепринятым в индустрии практикам.

Домашние задания

У учителей важность домашней работы не вызывает никаких сомнений. Как бы хорошо не прошёл урок, нужно, чтобы студент остался с материалом один на один и самостоятельно проработал тему. У нас, конечно, не классическая школа, но домашки мы тоже придумали. И не просто скучные упражнения, а целый проект, по итогам которого у студента получается страничка-портфолио.

Домашние задания идут после каждой части и содержат полезные материалы по работе со структурой страницы, гитхабом, подключению разных стилевых файлов и подробный алгоритм выполнения заданий. По сути, домашняя работа — это квинтэссенция всей учёбы на тренажёре (и приятный бонус в виде готового сайта-портфолио).

Пройти тренажёр можно примерно за 6 часов, поэтому если вы начнёте учиться прямо сейчас, то сможете уже через пару дней пополнить своё резюме знанием основ HTML и CSS.

Познакомьтесь с HTML и CSS прямо сейчас

Пройдите тренажёр и соберите свой первый сайт.

Хочу свой сайт