17 уроков

Курс HTML и CSS с нуля

Страница с нуля: от первого тега до готовой вёрстки

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

Задание ниже на этой же странице. Ничего заполнять не нужно.

17уроков с домашней работой к каждому
170заданий с проверкой в браузере
0 ₽курс с погружением — бесплатно
14 часовстолько уходит на уровень
Первый урок · без регистрации Урок 1 · «Страница — это текст с пометками» — с него начинается курс 2 минуты

Что это вообще такое

Откройте любой сайт и нажмите Ctrl+U — браузер покажет то, из чего страница сделана. Там будет текст, а вокруг него — угловые скобки.

Это и есть HTML. Не язык программирования: в нём нет ни вычислений, ни условий, ни памяти. Это текст с пометками — способ сказать браузеру, где здесь заголовок, где абзац, а где ссылка.

<p>Привет!</p>

Браузер покажет: Привет! отдельным абзацем

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

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

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

Весь урок целиком →

Задание из урока 1

Что такое HTML?

  • Карту не спрашиваем ни на каком шаге
  • Прогресс хранится в аккаунте — с телефона и с компьютера одинаково
  • Через 2, 7 и 30 дней курс сам вернёт задания, чтобы выученное не забылось
  • Письма — только о ваших занятиях, отписка одной кнопкой
Программа курса 1 уровень · 17 уроков · контрольная уровня с сертификатом

Программа

Уровень 1 — страница с нуля 17 уроков · контрольная на 20 заданий

Разметка от первого тега до формы, затем CSS до flexbox и адаптивности. В конце — своя страница, которая прилично выглядит и на телефоне.

01
Страница — это текст с пометками

Понять, что HTML размечает смысл, а не вид, написать первые теги и научиться закрывать их так, чтобы ничего не поехало.

около 29 минут · домашняя работа
02
Скелет документа

Собрать страницу целиком: доктайп, html, head и body, разобраться, что делает кодировка и название, и научиться писать атрибуты.

около 28 минут · домашняя работа
03
Текст: выделение, переносы, цитаты

Научиться выделять по смыслу, а не по виду, понять, почему пробелы схлопываются, и записывать знаки, которые браузер иначе примет за разметку.

около 28 минут · домашняя работа
04
Списки

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

около 33 минут · домашняя работа
05
Ссылки

Научиться связывать страницы: писать адреса трёх видов, ставить якоря внутри страницы и оборачивать ссылкой целые блоки.

около 32 минут · домашняя работа
06
Картинки

Вставлять картинки правильно: писать описание, задавать пропорции, добавлять подпись и отличать содержание от оформления.

около 33 минут · домашняя работа
07
Блоки, обёртки и классы

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

около 28 минут · домашняя работа
08
Таблицы

Собирать таблицы из строк и ячеек, делить их на шапку и тело, объединять ячейки без поломок и отличать данные от раскладки.

около 33 минут · домашняя работа
09
Формы

Собирать формы, которые работают: с именами полей, связанными подписями, правильными типами и проверкой до отправки.

около 33 минут · домашняя работа
10
Первый CSS

Написать первое правило, разобраться, куда его класть, научиться выбирать нужные элементы селекторами и понимать, какое правило победит.

около 33 минут · домашняя работа
11
Цвет и фон

Научиться записывать цвет, красить текст и фон, пользоваться прозрачностью и градиентом и проверять, читается ли получившееся.

около 33 минут · домашняя работа
12
Текст и шрифты

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

около 34 минут · домашняя работа
13
Коробочная модель

Понять, из чего состоит коробка элемента, научиться задавать отступы, разобраться с box-sizing и схлопыванием и ограничивать ширину.

около 34 минут · домашняя работа
14
Рамки, скругления, тени

Научиться оформлять блоки: рамка и её стороны, скругление углов, тень как признак высоты и состояния при наведении и с клавиатуры.

около 34 минут · домашняя работа
15
Flexbox: блоки в строку

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

около 36 минут · домашняя работа
16
Страница на телефоне

Научиться делать страницу пригодной для узкого экрана: мета-тег viewport, медиазапросы, порядок «сначала узкий» и четыре типовые починки.

около 35 минут · домашняя работа
17
Проект: страница целиком

Собрать страницу от DOCTYPE до подвала: каркас документа, смысловая разметка, файл стилей в правильном порядке — и пройти по списку проверки перед сдачей.

около 36 минут · домашняя работа
Кому как объяснять тема одна, различаются примеры и язык

Начало урока «Страница — это текст с пометками» — нажмите подачу и посмотрите, как это написано для вас

Базовая подача Так урок написан для всех, пока подача не выбрана.

Откройте любой сайт и нажмите Ctrl+U — браузер покажет то, из чего страница сделана. Там будет текст, а вокруг него — угловые скобки.

Как устроен урок. Урок — одна страница: главы подряд, внутри них встроенная практика, в конце итог и домашняя работа. Порог 70%, пересдача через сутки новым набором.

Сертификат. За сданную контрольную уровня — именной, с кодом проверки подлинности; от 95% с отличием.

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

Частые вопросы
Сколько занимает курс «HTML и CSS»?

Уровень 1 — это 17 уроков примерно на 14 часов вместе с домашними работами и контрольной. Заниматься можно в любом темпе: прогресс сохраняется.

Нужно ли платить?

Нет: курс с погружением бесплатный — уроки, домашние работы, контрольная и сертификат. Регистрация нужна только для того, чтобы сохранялся прогресс.

С чего начать, если я ничего не знаю о теме?

С первого уровня: он написан с нуля и не требует подготовки. Уровни — это глубина, а не точка входа: второй продолжает первый без повторов.

Что такое подача и какую выбрать?

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

Как проверяются задания?

Каждое задание проверяет сервер: ответы не хранятся в браузере, а разбор приходит после ответа. Домашняя работа — 6 заданий из банка, порог 70%, пересдача через сутки новым набором.

Есть ли сертификат?

Да. За сданную контрольную уровня выдаётся именной сертификат с кодом проверки подлинности; от 95% — с отличием. Проверить код может любой на странице /check.

Дальше — весь курс с сохранением прогресса

Регистрацию можно отложить: первые уроки открыты целиком, а прогресс появится, как только заведёте аккаунт.

Зарегистрироваться