Тест по HTML и CSS

Q: Сколько вопросов в тесте по HTML и CSS?

20 вопросов с выбором ответа: 7 junior, 10 middle и 3 senior. Их берём из банка в 94 вопросов с разборами.

Q: Как считается уровень?

Каждый ответ весит по сложности: junior 1 балл, middle 2, senior 3. Senior дают только тем, кто закрыл и сложные вопросы, поэтому угадать уровень на лёгких не выйдет.

Q: Нужна ли регистрация?

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

Q: Таймер строгий?

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

Q: Вопросы каждый раз одни и те же?

Набор вопросов теста постоянный, а порядок вопросов и вариантов меняется при каждом прохождении. Остальные вопросы ждут в билетах тренажёра.

Q: Можно поделиться результатом?

Да. Ссылка показывает только тему, уровень, процент и дату, без имени и почты.

Question 1

У кнопки закрытия только SVG-иконка крестика. Скринридер говорит «кнопка» без названия. Как исправить?

Accepted Answer

Добавить aria-label="Закрыть" на <button>

Answer

Добавить атрибут title="Закрыть" к <svg>

Answer

Добавить role="button" и tabindex на <svg>

Answer

Обернуть кнопку в <label> с текстом «Закрыть»

Question 2

Какой вариант отцентрирует .modal по горизонтали и вертикали внутри .overlay, занимающего весь экран?

Accepted Answer

.overlay { display: grid; place-items: center; min-height: 100dvh; }

Answer

.overlay { text-align: center; vertical-align: middle; height: 100dvh; }

Answer

.modal { margin: auto; } без изменения .overlay

Answer

.overlay { display: flex; align-content: center; }

Question 3

Колонки заданы как grid-template-columns: 100px 1fr 2fr, ширина контейнера 400px, gap нет. Какой ширины будут колонки?

Accepted Answer

100px, 100px, 200px

Answer

100px, 133px, 267px

Answer

100px, 150px, 150px

Answer

133px, 133px, 133px

Question 4

Какие значения flex-grow, flex-shrink, flex-basis у flex-элемента по умолчанию?

Accepted Answer

0 1 auto: не растёт, но сжимается, от width

Answer

1 1 auto: растёт и сжимается, размер от width

Answer

0 0 auto: не растёт и не сжимается вообще

Answer

1 1 0%: делит свободное место поровну

Question 5

Явно задано grid-template-rows: 100px 100px, а элементов столько, что нужна пятая строка. Чем определяется высота третьей и следующих строк?

Accepted Answer

Свойством grid-auto-rows, по умолчанию auto

Answer

Повторяется явный шаблон: они тоже получат по 100px

Answer

Элементы лишних строк не отображаются, сетка их обрежет

Answer

Свойством grid-template-rows: браузер допишет туда 1fr

Question 6

Lighthouse показал 100 баллов в разделе Accessibility. Что это значит?

Accepted Answer

Автопроверки не нашли ошибок, но фокус и скринридер проверяют руками

Answer

Сайт полностью соответствует WCAG 2.2 AA, аудит можно закрывать

Answer

Сайт гарантированно доступен для всех пользователей скринридеров

Answer

Можно больше не проверять страницу с клавиатуры: фокус уже проверен

Question 7

У .child margin-top: 40px, и отступ появляется не внутри .parent, а над ним, сдвигая родителя вниз. Какое свойство у .parent исправит это и не создаст побочных эффектов с обрезкой?

Accepted Answer

display: flow-root

Answer

position: relative

Answer

margin-top: 0

Answer

z-index: 1

Question 8

Контейнер шириной 1000px, в нём 2 карточки. В чём разница между repeat(auto-fill, minmax(200px, 1fr)) и repeat(auto-fit, minmax(200px, 1fr))?

Accepted Answer

auto-fill оставит пустые колонки по 200px, auto-fit растянет до 500px

Answer

Разницы нет: это синонимы, обе записи растянут карточки на 500px

Answer

auto-fit оставит пустые колонки, а auto-fill растянет карточки по 500px

Answer

auto-fill не работает с minmax, и колонки будут по 1fr от ширины

Question 9

Аккордеон раскрывается сменой height: 0 на height: auto с transition: height 300ms. Что произойдёт и как сделать плавно во всех основных браузерах?

Accepted Answer

Высота прыгнет скачком; плавно можно через grid-template-rows от 0fr к 1fr

Answer

Всё сработает плавно: браузер сам посчитает конечную высоту

Answer

Анимация пойдёт плавно, но только если добавить контейнеру will-change: height

Answer

Высота прыгнет скачком; исправить можно только через JavaScript и setInterval

Question 10

Что верно про этот код в современном браузере без препроцессора?

Accepted Answer

Работают оба вложенных правила: .card:hover и .card .title

Answer

Код не сработает: вложенность есть только в Sass и Less

Answer

Сработает только правило &:hover, вложенный .title без & проигнорируется

Answer

& означает дочерний комбинатор: правило станет .card > :hover

Question 11

Какое из правил само по себе **не** создаёт новый контекст наложения?

Accepted Answer

position: relative без z-index

Answer

opacity: 0.99 без z-index

Answer

transform: translateX(0) без z-index

Answer

isolation: isolate без z-index

Question 12

Какого цвета будет заголовок

внутри
?

Accepted Answer

Синего: :is() берёт специфичность аргумента, получается (1, 0, 1)

Answer

Красного: правило с id первое и самое специфичное

Answer

Зелёного: у :where(#promo) h2 и :is(#promo) h2 одинаковый вес, а у h2.title больше

Answer

Зелёного: h2.title единственный селектор с классом

Senior	от 80% баллов и от 60% senior-вопросов
Middle	от 60% баллов и от половины middle-вопросов
Junior	от 30% баллов или от 70% junior-вопросов
Пока стажёр	меньше, чем нужно для junior

Тест по HTML и CSS онлайн

20 вопросов по HTML и CSS

Примеры вопросов по HTML и CSS

Какие темы проверяет тест

Как считается уровень

Ещё тесты

Частые вопросы