КУРС С ПРАКТИКОЙ В БРАУЗЕРЕ

HTML и CSS.

Первый заголовок, стили, флексы, формы и целевая страница квиза — всё, на чём держится любая вёрстка.

15 уроков170 XPВ своём темпе

ЧТО ТЫ ИЗУЧИШЬ

Программа курса

01
Первый заголовок
Добавь на страницу заголовок <h1> с любым текстом. Это самый главный заголовок на странице — он должен быть один.
10 XP
02
Абзац текста
Под заголовком добавь абзац <p> с рассказом о себе — минимум 20 символов текста.
10 XP
03
Картинка
Вставь обложку квиза через <img>. Адрес картинки: https://quiz.infoforce.ru/media/catalog/171489552cacbe030620aaf1efd898065d6a45db17e6cf8d9c5f7212e01f4b74.webp — и не забудь атрибут alt.
10 XP
04
Список
Сделай список «Топ-3 фильма»: тег <ul> и внутри него минимум три пункта <li>.
10 XP
05
Ссылка
Сделай ссылку <a> на quiz.infoforce.ru с текстом «Играть».
10 XP
11
Форма записи
Собери мини-форму записи на квиз: поле ввода <input> с подсказкой-плейсхолдером и кнопка <button> с текстом.
10 XP
12
Таблица результатов
Сделай таблицу лидеров квиза: <table>, в ней строка заголовков из <th> и минимум две строки данных с <td>.
10 XP

06
Покрась заголовок
Заголовок на странице чёрный. Измени его цвет на любой другой, написав CSS во вкладке CSS.
10 XP
07
Фон страницы
Сделай ночной режим: измени фон страницы (background у body). Если текст стал плохо виден — осветли и его.
10 XP
08
Крупный заголовок
Сделай заголовок крупным — минимум 36px — и подведи под ним линию (border-bottom).
10 XP
13
Страница на телефоне
Карточки стоят в ряд — на узком экране телефона им тесно. Добавь медиа-запрос: на экранах уже 600px пусть .row складывает карточки в столбик (flex-direction: column).
10 XP

09
Центр флексами
Внутри пунктирной рамки лежит карточка. Отцентруй её и по горизонтали, и по вертикали с помощью flexbox.
10 XP
10
Ряд карточек
Три карточки стоят столбиком. Поставь их в ряд с промежутками минимум 12px: display: flex + gap.
10 XP

14
Карточка квиза
Собери карточку квиза: div с классом quiz-card, внутри <h3> с названием и <p> с описанием. Оформи: внутренние отступы от 16px, скругление от 8px и фон, отличный от белого.
10 XP
15
Босс: мини-страница
Собери мини-страницу анонса квиза со всем, что выучил: заголовок <h1>, абзац, картинку и ссылку. И оформи: заголовок не чёрный, фон страницы не белый. Это финал — дальше ты верстальщик!
30 XP

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

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