Курс «HTML и CSS» переписан: семнадцать уроков и код прямо на странице

Курс вёрстки написан заново — не дополнен, а собран с первой строки. Адрес прежний, а внутри другое устройство: семнадцать уроков, у каждого своя домашняя работа, в конце контрольная и именной сертификат.

Код пишется в уроке, а страница видна рядом

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

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

От первого тега до страницы, которая держится на телефоне

Первая половина курса — разметка: теги и структура документа, текст, списки, ссылки, картинки, таблицы и формы. Вторая — CSS: как выбрать элемент, какое правило победит, цвет и фон, шрифты, отступы, рамки и тени.

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

Последний урок — своя страница целиком, от первой строки документа до списка проверки перед сдачей.

Четыре подачи — выбираете вы

Один и тот же урок написан по-разному для четырёх читателей, и подачу вы выбираете сами:

«Я с нуля» — без предположений о прошлом опыте: каждое слово объясняется там, где встречается впервые. «Перехожу из дизайна» — примеры от макета: как он ложится на сетку, откуда берутся отступы и почему шрифт выглядит не так. «Я программирую на другом» — сразу про дерево, каскад и специфичность, и про то, чем вёрстка не похожа на код. «Мне для работы рядом» — тестировщику, маркетологу, аналитику: читать чужой HTML, править вёрстку письма и находить, из-за чего поехало.

Подача меняется в любой момент, прогресс при этом остаётся.

Кому подойдёт

Курс рассчитан на 15 лет и старше и не требует ничего, кроме браузера. Времени — около пятнадцати часов, если идти по уроку за раз.

Заниматься можно прямо здесь, а посмотреть, что внутри, — на странице курса. Дальше логично идёт JavaScript, который оживляет то, что вы научились рисовать; рядом — другие курсы о программировании.

Прогресс по старому курсу не переносится: устройство другое, и переносить нечего. Зато все уроки открыты сразу, и начать можно с любого.