Найти тему
HTML Academy

Основы HTML и CSS: без учебников, без спецификаций, бесплатно и интерактивно

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

Пытаться разобраться в официальной документации для новичка, как правило, бывает трудно. Читать учебники или искать ещё не устаревшие видео на Ютубе — просто скучно и долго.

Но есть выход. Например, интерактивный тренажёры «Знакомство с веб-разработкой» и «Знакомство с HTML и CSS» разработаны для тех, кто хочет попробовать технологию на практике и создавать простые странички.

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

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

"Немного магии" и у вас уже готов первый экран сайта-портфолио
"Немного магии" и у вас уже готов первый экран сайта-портфолио

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

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

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

Источник теории для тренажёров — официальная спецификация и документация, изложенная простым языком.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С подпиской рекламы не будет

Подключите Дзен Про за 159 ₽ в месяц