Полгода назад мы решили заново создать курс, с которого начинают знакомство с HTML и CSS большинство студентов Академии. Чтобы сделать его действительно понятным, мы регулярно тестировали новые задания на новичках и собирали обратную связь. Обновлённый курс ориентирован в первую очередь на начинающих. Но будет полезен и тем, кто хочет освежить знания и разобраться с новыми атрибутами и значениями привычных тегов.

«Что здесь происходит? Сейчас расскажем!»

Курс состоит из шести глав. Его прохождение займёт около 5 часов и 40 минут:

Каждая глава заканчивается испытанием. Так вы закрепите теорию практикой. Что ещё ждёт вас в новом курсе?

Актуальная теория и конспекты глав

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

В конце каждой главы теперь есть конспект — выжимка всей теоретической части главы. Мы протестировали это нововведение ещё в курсе «Основы JavaScript». К конспекту удобно обращаться, чтобы освежить в памяти информацию по курсу и подготовиться к испытанию.

Во вторую главу «Структура HTML-документа» добавили информацию о семантических тегахкоторая раньше была только в платной главе «Знакомство с HTML5».

Единый курс по HTML и CSS

Вместо двух курсов «Основы HTML» и «Основы CSS» теперь один бесплатный, в котором вы познакомитесь с вёрсткой страницы целиком.

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

Сейчас главы в старых курсах помечены в интерфейсе как архивные. Со временем мы исключим их из программы.

Сквозной сюжет

В прошлом курсе все главы были отдельными, не особо связанными общей историей. А кое-где никакой истории не было вовсе. Чтобы сделать курс увлекательнее, мы придумали сквозной сюжет.

Сначала инструктор Кекс попросит вас помочь с редактированием его сайта. А потом даст задание посерьёзнее — сверстать сайт для начинающего верстальщика. Вы сделаете главную страницу и несколько контентных страниц с записями блога. В конце каждой главы можно скачать архив с написанным вами кодом сайта.

Новые интерфейсные решения

Мы разработали и внедрили во все курсы новые элементы интерфейса:

Центр валидации HTML-кода

Если вы неправильно закрыли тег или забыли прописать доктайп, интерфейс сообщит об этом:

Cкриншот интерфейса

Мини-браузер в интерфейсе курсов, точно также как и обычный браузер, старается автоматически исправить все ошибки в вёрстке. На зачёт задач в задании это не влияет. В наших планах расширить валидатор кода HTML и добавить такие же валидаторы для CSS и JavaScript.

Улучшение автозапуска и индикации изменённого кода

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

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

Cкриншот интерфейса

Новая механика перехода по ссылкам

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

Cкриншот интерфейса

Автоматическа прокрутка мини-браузера

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

Автоматическая прокрутка и выделение участков кода в редакторах

Частенько количество кода может занимать по высоте больше одного «экрана». Скроллить редактор вручную или искать глазами участок, с которым нужно работать, было не очень удобно. Поэтому мы сделали предустановленную прокрутку и автоматическое выделение участков кода. Вы закрываете теорию и сразу приступаете к решению задания.

Cкриншот интерфейса

Режим зануды

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

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

Cкриншот интерфейса

Кстати, появился блок «кстати». Это тоже дополнительная информация, но уже непосредственно касающаяся задания. Её желательно не пропускать. Вот так выглядит блок.

Cкриншот интерфейса

Всплывающий Кекс

В заданиях, особенно в первой главе, теперь появляется инструктор Кекс. Он будет что-то подсказывать, комментировать или подбадривать вас. Теперь вам не будет одиноко наедине с кодом.

Cкриншот интерфейса

А ещё

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

Уже прошли новый курс?

Если вы хотите поделиться впечатлениями — напишите нам на форуме, на почту, во «Вконтакте» или на Фейсбук.

Хорошего обучения!