wowITwowIT
Курсы

язык

сложность

1

HTML

HTML собирает страницу из блоков. Заголовок, текст, кнопка, картинка. Сам по себе он не считает. Это каркас экрана, который видит человек.

Молодые студенты всё чаще идут в верстальщики. У джуна около 70 000 ₽ в месяц, у мидла около 140 000 ₽, у сеньора около 220 000 ₽.

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

Дальше часто рядом CSS и немного JavaScript. Можно пойти во фронтенд или просто научиться собирать понятные страницы. Начинаем с абзаца и заголовка.

36 блоков · 380 уроков

Начать обучениеПолный доступ · 899 ₽

Профессию к этому языку можно взять парой за 1199 ₽. Выбрать профессию

прогресс

0%

блок 1

Первые шаги

Страница, абзац, заголовок, текст.

  1. 1

    Что такое HTML

  2. 2

    Абзац с другим словом

  3. 3

    Заголовок

  4. 4

    Страница начинается с html

  5. 5

    Тело страницы

  6. 6

    Два абзаца

  7. 7

    Заголовок и абзац

  8. 8

    Пробел в тексте

  9. 9

    Маленькая буква в теге

  10. 10

    Закрыть то, что открыл

  11. 11

    Короткий экран

  12. 12

    Проверка связи страницы

  13. Проверка блока

блок 2

Ссылки и картинки

a, href, img, alt.

  1. 1

    Ссылка

  2. 2

    Другой адрес

  3. 3

    Картинка

  4. 4

    Подпись картинки

  5. 5

    Ссылка вокруг слова ок

  6. 6

    Абзац и ссылка

  7. 7

    Картинка под заголовком

  8. 8

    Ссылка на якорь-слово

  9. 9

    Две ссылки

  10. 10

    Картинка это не абзац

  11. 11

    Кнопка-ссылка словами

  12. 12

    Короткая витрина

  13. Проверка блока

блок 3

Списки

ul, ol, li.

курс
  1. 1

    Маркированный список

  2. 2

    Один пункт

  3. 3

    Нумерованный список

  4. 4

    Порядок пунктов

  5. 5

    Список под заголовком

  6. 6

    Два пункта товаров

  7. 7

    Нумерованные шаги

  8. 8

    Пункт со ссылкой

  9. 9

    Пустой не оставляй коробку без пункта

  10. 10

    Три пункта коротко

  11. 11

    Заголовок и два пункта

  12. 12

    Короткое меню

  13. Проверка блока

блок 4

Классы и подписи

class, span, маленький кусок.

курс
  1. 1

    Класс это наклейка

  2. 2

    Другая наклейка

  3. 3

    Класс у заголовка

  4. 4

    span это кусок внутри

  5. 5

    Пометить важное слово

  6. 6

    Два абзаца с классами

  7. 7

    Класс if как пометка ветки

  8. 8

    Класс else

  9. 9

    Подпись поля

  10. 10

    Мелкий комментарий в разметке

  11. 11

    Наклейка списка

  12. 12

    Короткая карточка

  13. Проверка блока

блок 5

Форма

input, button, name.

курс
  1. 1

    Поле ввода

  2. 2

    Поле с другим именем

  3. 3

    Кнопка

  4. 4

    Кнопка иначе

  5. 5

    Подпись и поле

  6. 6

    Форма-коробка

  7. 7

    Поле внутри формы

  8. 8

    Кнопка submit словами

  9. 9

    Поле пароля

  10. 10

    Две подписи

  11. 11

    Кнопка отмены словом

  12. 12

    Короткая форма входа

  13. Проверка блока

блок 6

Таблица

table, tr, td, th.

курс
  1. 1

    Ячейка

  2. 2

    Две ячейки в ряду

  3. 3

    Два ряда

  4. 4

    Шапка таблицы

  5. 5

    Шапка и значение

  6. 6

    Две колонки шапки

  7. 7

    Строка товара

  8. 8

    Два товара

  9. 9

    Пустая ячейка не нужна

  10. 10

    Таблица с одним словом ок

  11. 11

    Шапка день и ячейка смена

  12. 12

    Короткий отчёт кассы

  13. Проверка блока

блок 7

Блоки страницы

div, секции, обёртка.

курс
  1. 1

    div это коробка

  2. 2

    Коробка с абзацем

  3. 3

    Класс на коробке

  4. 4

    Две коробки

  5. 5

    Шапка сайта header

  6. 6

    Низ footer

  7. 7

    Середина main

  8. 8

    Шапка и середина

  9. 9

    Три пояса

  10. 10

    Коробка меню

  11. 11

    Карточка из трёх

  12. 12

    Короткий каркас

  13. Проверка блока

блок 8

Карточка товара

Составные куски витрины.

курс
  1. 1

    Название товара

  2. 2

    Цена абзацем

  3. 3

    Название и цена

  4. 4

    Кнопка взять

  5. 5

    Собрать карточку

  6. 6

    Вторая карточка

  7. 7

    Две карточки витрины

  8. 8

    Карточка со ссылкой

  9. 9

    Карточка с картинкой

  10. 10

    Нет в наличии

  11. 11

    Есть в наличии

  12. 12

    Витрина дня

  13. Проверка блока

блок 9

Страница целиком

html, head намёком, body, каркас.

курс
  1. 1

    Корень и тело

  2. 2

    Название вкладки

  3. 3

    Другое имя вкладки

  4. 4

    Шапка внутри body

  5. 5

    Главное в main

  6. 6

    Подвал на месте

  7. 7

    Меню в шапке

  8. 8

    Главное с карточкой

  9. 9

    Полный каркас словами

  10. 10

    Вкладка и три пояса

  11. 11

    Страница входа

  12. 12

    Короткая настоящая страница

  13. Проверка блока

блок 10

Как на работе

Витрина, вход, касса, стоп.

курс
  1. 1

    Экран кассы

  2. 2

    Кнопка открытия

  3. 3

    Очередь на экране

  4. 4

    Чек таблицей

  5. 5

    Бот внизу

  6. 6

    Вход в кассу

  7. 7

    Карточка смены

  8. 8

    Форма отчёта

  9. 9

    Витрина кассы

  10. 10

    Страница смены

  11. 11

    Журнал линии

  12. 12

    Рабочий экран

  13. Проверка блока

блок 11

Семантика страницы

header, main, footer, article.

курс
  1. 1

    header

  2. 2

    main

  3. 3

    footer

  4. 4

    article

  5. 5

    Три пояса

  6. 6

    nav в шапке

  7. 7

    Две статьи

  8. 8

    main список

  9. 9

    Подвал с двумя абзацами

  10. 10

    Страница-каркас

  11. Проверка блока

блок 12

Форма заказа

form, label, input, name, button.

курс
  1. 1

    Форма

  2. 2

    Подпись поля

  3. 3

    Поле имени

  4. 4

    Поле и подпись

  5. 5

    Кнопка отправки

  6. 6

    Два поля

  7. 7

    Заказ товара

  8. 8

    Скрытое не нужно

  9. 9

    Форма в main

  10. 10

    Форма заказа целиком

  11. Проверка блока

блок 13

Каталог карточек

Несколько card, витрина.

курс
  1. 1

    Одна карточка

  2. 2

    Цена в карточке

  3. 3

    Кнопка в карточке

  4. 4

    Две карточки

  5. 5

    Заголовок витрины

  6. 6

    Три товара

  7. 7

    Карточка с ссылкой

  8. 8

    Пустая витрина

  9. 9

    Витрина в main

  10. 10

    Каталог целиком

  11. Проверка блока

блок 14

Таблица счёта

table, th, td, два ряда.

курс
  1. 1

    Шапка таблицы

  2. 2

    Ячейка

  3. 3

    Шапка и значение

  4. 4

    Две колонки

  5. 5

    Две строки товаров

  6. 6

    Таблица в main

  7. 7

    Пустая таблица шапкой

  8. 8

    Итог внизу

  9. 9

    Касса таблицей

  10. 10

    Счёт целиком

  11. Проверка блока

блок 15

Навигация сайта

nav, несколько ссылок, активный пункт.

курс
  1. 1

    Меню

  2. 2

    Два пункта

  3. 3

    Три пункта

  4. 4

    Меню в header

  5. 5

    Ссылка вход

  6. 6

    Ссылка выход

  7. 7

    Якорь на странице

  8. 8

    Меню и заголовок

  9. 9

    Подвал с меню

  10. 10

    Меню целиком

  11. Проверка блока

блок 16

Страница входа

Форма логина, поле, кнопка.

курс
  1. 1

    Заголовок входа

  2. 2

    Поле логина

  3. 3

    Поле кода

  4. 4

    Кнопка войти

  5. 5

    Ссылка нет аккаунта

  6. 6

    Ошибка входа

  7. 7

    Форма входа

  8. 8

    Вход в main

  9. 9

    Шапка и вход

  10. 10

    Страница входа целиком

  11. Проверка блока

блок 17

Карточка товара

Название, цена, кнопка, картинка.

курс
  1. 1

    Название товара

  2. 2

    Цена

  3. 3

    Картинка товара

  4. 4

    Кнопка купить

  5. 5

    Ссылка подробнее

  6. 6

    Нет в наличии

  7. 7

    Полная карточка

  8. 8

    Две полные

  9. 9

    Карточка в article

  10. 10

    Витрина карточек

  11. Проверка блока

блок 18

Список заказов

ul заказов, статусы, ссылка.

курс
  1. 1

    Список заказов

  2. 2

    Два заказа

  3. 3

    Статус в пункте

  4. 4

    Ссылка заказа

  5. 5

    Заголовок очередь

  6. 6

    Пустая очередь

  7. 7

    Очередь в main

  8. 8

    Нумерованный журнал

  9. 9

    Заказ и касса

  10. 10

    Журнал целиком

  11. Проверка блока

блок 19

Страница сервиса

Лендинг из блоков: герой, карточки, форма, подвал.

курс
  1. 1

    Герой

  2. 2

    Кнопка действия

  3. 3

    Три плюса

  4. 4

    Форма заявки

  5. 5

    Карточки преимуществ

  6. 6

    Подвал контакта

  7. 7

    Меню лендинга

  8. 8

    Герой в header

  9. 9

    Главное лендинга

  10. 10

    Лендинг целиком

  11. Проверка блока

блок 20

Кабинет кассира

Экран смены: меню, чек, очередь, стоп.

курс
  1. 1

    Шапка кабинета

  2. 2

    Меню кассира

  3. 3

    Чек в главном

  4. 4

    Очередь сбоку

  5. 5

    Кнопка закрыть смену

  6. 6

    Статус бота

  7. 7

    Форма позиции

  8. 8

    Карточка смены

  9. 9

    Касса и очередь вместе

  10. 10

    Кабинет целиком

  11. Проверка блока

блок 21

Отчёт на экране

Форма фильтра и таблица результата.

курс
  1. 1

    Заголовок отчёта

  2. 2

    Фильтр

  3. 3

    Кнопка показать

  4. 4

    Таблица отчёта

  5. 5

    Форма и таблица

  6. 6

    Пустой отчёт

  7. 7

    Итог отчёта

  8. 8

    Отчёт в main

  9. 9

    Две колонки отчёта

  10. 10

    Отчёт целиком

  11. Проверка блока

блок 22

Витрина магазина

Каталог + корзина намёком.

курс
  1. 1

    Название магазина

  2. 2

    Каталог

  3. 3

    Корзина

  4. 4

    Пустая корзина

  5. 5

    Кнопка оформить

  6. 6

    Ссылка в корзину

  7. 7

    Витрина в main

  8. 8

    Цена на витрине

  9. 9

    Кнопка взять

  10. 10

    Магазин целиком

  11. Проверка блока

блок 23

Финальная страница

Собрать сервис: шапка, меню, главное, форма, подвал.

курс
  1. 1

    Документ

  2. 2

    Шапка сервиса

  3. 3

    Меню сервиса

  4. 4

    Главное

  5. 5

    Форма заявки

  6. 6

    Таблица дня

  7. 7

    Очередь

  8. 8

    Подвал

  9. 9

    Карточка услуги

  10. 10

    Страница целиком

  11. Проверка блока

блок 24

Доставка

Рейс, вес, статус, форма забора.

курс
  1. 1

    Заголовок рейса

  2. 2

    Список пачек

  3. 3

    Статус рейса

  4. 4

    Форма забора

  5. 5

    Карточка слота

  6. 6

    Три слота

  7. 7

    Кнопка стоп рейса

  8. 8

    Рейс в main

  9. 9

    Подвал курьера

  10. 10

    Лист доставки

  11. Проверка блока

блок 25

Карта гостя

Баллы, уровень, списать, семья.

курс
  1. 1

    Заголовок карты

  2. 2

    Баллы числом

  3. 3

    Уровень

  4. 4

    Кнопка списать

  5. 5

    Форма начисления

  6. 6

    Две карты семьи

  7. 7

    Таблица баллов

  8. 8

    Карта в main

  9. 9

    Кнопка стоп карты

  10. 10

    Смена лояльности

  11. Проверка блока

блок 26

Табель

Часы, опоздание, фонд, закрытие.

курс
  1. 1

    Заголовок табеля

  2. 2

    Часы списком

  3. 3

    Метка опоздания

  4. 4

    Таблица часов

  5. 5

    Фонд

  6. 6

    Норма или дыра

  7. 7

    Форма дня

  8. 8

    Табель в main

  9. 9

    Кнопка закрыть

  10. 10

    Закрытие табеля

  11. Проверка блока

блок 27

Возвраты

Чистыми, причина, эскалация, сводка.

курс
  1. 1

    Заголовок возврата

  2. 2

    Причина

  3. 3

    Список сумм

  4. 4

    Эскалация

  5. 5

    Форма возврата

  6. 6

    Таблица возвратов

  7. 7

    Карточка причины

  8. 8

    Возврат в main

  9. 9

    Кнопка стоп возврата

  10. 10

    Сводка возвратов

  11. Проверка блока

блок 28

Месяц точки

Дни, три филиала, касса бот склад.

курс
  1. 1

    Заголовок месяца

  2. 2

    Дни списком

  3. 3

    Три филиала

  4. 4

    План месяца

  5. 5

    Касса бот склад

  6. 6

    Таблица месяца

  7. 7

    Месяц в main

  8. 8

    Меню месяца

  9. 9

    Кнопка стоп месяца

  10. 10

    Месяц точки

  11. Проверка блока

блок 29

Читать ТЗ

Собрать экран по описанию.

курс
  1. 1

    ТЗ: шапка

  2. 2

    ТЗ: список входа

  3. 3

    ТЗ: кнопка действия

  4. 4

    ТЗ: форма входа

  5. 5

    ТЗ: края

  6. 6

    ТЗ: карточка ответа

  7. 7

    ТЗ: таблица

  8. 8

    ТЗ: в main

  9. 9

    ТЗ: порядок строк

  10. 10

    Собрать по ТЗ

  11. Проверка блока

блок 30

Проверка входа

Пусто, ошибка, живое поле.

курс
  1. 1

    Пустой экран

  2. 2

    Есть данные

  3. 3

    Сообщение брак

  4. 4

    Сообщение много

  5. 5

    Поле с подписью

  6. 6

    Кнопка проверить

  7. 7

    Форма проверки

  8. 8

    Ошибка в карточке

  9. 9

    Проверка в main

  10. 10

    Проверка целиком

  11. Проверка блока

блок 31

Пачка на экране

Список заявок, обработка, шапка.

курс
  1. 1

    Заголовок пачки

  2. 2

    Заявки пунктами

  3. 3

    Три заявки

  4. 4

    Кнопка обработать

  5. 5

    Таблица пачки

  6. 6

    Карточки заявок

  7. 7

    Пачка в main

  8. 8

    Длина пачки

  9. 9

    Кнопка стоп пачки

  10. 10

    Пачка целиком

  11. Проверка блока

блок 32

Страница сервиса

Меню, три блока, форма.

курс
  1. 1

    Имя сервиса

  2. 2

    Меню трёх команд

  3. 3

    Блок ping

  4. 4

    Блок price

  5. 5

    Форма price

  6. 6

    Блок dump

  7. 7

    Шапка в header

  8. 8

    Сервис в main

  9. 9

    Подвал сервиса

  10. 10

    Страница сервиса

  11. Проверка блока

блок 33

Документ на странице

Шапка, строки, итог, стоп.

курс
  1. 1

    Шапка отчёта

  2. 2

    Строки

  3. 3

    Подпись итога

  4. 4

    Число итога

  5. 5

    Решение

  6. 6

    Таблица документа

  7. 7

    Две колонки

  8. 8

    Отчёт в main

  9. 9

    Кнопка стоп отчёта

  10. 10

    Отчёт целиком

  11. Проверка блока

блок 34

Два экрана

Касса и склад на одной странице.

курс
  1. 1

    Две подписи

  2. 2

    Касса числом

  3. 3

    Склад числом

  4. 4

    Две карточки служб

  5. 5

    Решение кассы

  6. 6

    Решение склада

  7. 7

    Меню двух служб

  8. 8

    Службы в main

  9. 9

    Шапка служб

  10. 10

    Две службы целиком

  11. Проверка блока

блок 35

Сводка плана

План, факт, разница, решение.

курс
  1. 1

    Заголовок плана

  2. 2

    План числом

  3. 3

    Факт числом

  4. 4

    Решение дыра

  5. 5

    Таблица сводки

  6. 6

    Два решения

  7. 7

    Карточка плана

  8. 8

    Сводка в main

  9. 9

    Кнопка стоп сводки

  10. 10

    Сводка целиком

  11. Проверка блока

блок 36

Написать страницу

Собрать рабочий экран дня самим.

курс
  1. 1

    Открыть день

  2. 2

    Касса дня

  3. 3

    Склад дня

  4. 4

    Бот дня

  5. 5

    План дня

  6. 6

    Меню дня

  7. 7

    Три службы

  8. 8

    Края дня

  9. 9

    День в документе

  10. 10

    Рабочая страница дня

  11. Проверка блока