16 вопросов, около 12 минут
Итоговый тест по курсу «HTML и CSS»
16 вопросов по основам HTML и CSS для начинающих с разбором ответов. В конце — какие темы повторить и вывод по вашим ответам: стоит ли развиваться в вёрстке.
Тест по всему курсу
Проверьте, как усвоился курс: вопросы по всем урокам, а в конце — разбор ошибок и темы, которые стоит повторить.
-
Где в HTML-документе указывают кодировку и заголовок вкладки?
head хранит служебные сведения: кодировку, title, подключение стилей. Видимое содержимое — в body.
-
Как посмотреть HTML-разметку любого сайта?
Инструменты разработчика есть в каждом браузере. Это лучший способ разобраться, как свёрстан интересный блок.
-
Какой тег подходит для навигации по сайту?
nav — семантический тег для навигации. Он сообщает браузеру, поисковикам и экранным дикторам, что внутри — меню.
-
После заголовка h2 нужен подзаголовок раздела. Какой тег выбрать?
Уровни заголовков не перескакивают: подраздел внутри h2 — это h3. Размер шрифта при этом настраивают в CSS.
-
Что должно быть в атрибуте alt у фотографии товара?
alt читают экранные дикторы и поисковики. Пустой alt оставляют только у чисто декоративных картинок.
-
Какой атрибут делает поле формы обязательным?
С required браузер не даст отправить форму, пока поле пустое. placeholder — лишь подсказка внутри поля.
-
Как выбрать в CSS все элементы с классом button?
Точка — селектор класса. Слово без знаков выберет теги button, а решётка — элемент с таким id.
-
Два правила с одинаковыми селекторами задают абзацу разный цвет. Какое сработает?
При равной точности селекторов побеждает правило, которое стоит позже. Это часть каскада.
-
Зачем в начале CSS пишут * { box-sizing: border-box; }?
По умолчанию padding и рамка прибавляются к ширине. С border-box блок шириной 300px занимает ровно 300px.
-
Какое свойство отодвигает элемент от соседних блоков?
margin — внешний отступ. padding отодвигает содержимое от рамки внутри самого элемента.
-
Как поставить три карточки в ряд с расстоянием 20px между ними?
Flexbox включают у контейнера, а gap задаёт расстояние только между элементами.
-
Какое свойство flex-контейнера выравнивает элементы по вертикали при горизонтальной раскладке?
align-items работает поперёк главной оси. При раскладке в строку это вертикаль.
-
Что случится на телефоне, если забыть метатег viewport?
Без viewport мобильный браузер считает страницу широкой и уменьшает её, чтобы она поместилась на экран.
-
Что такое подход mobile first?
Мобильная версия обычно проще, поэтому базовый CSS короче, а большие экраны получают дополнения.
-
Как использовать CSS-переменную --accent?
Переменную объявляют, например, в :root, а применяют через функцию var(). Поменяли значение в одном месте — оно поменялось везде.
-
Какой сервис проверит HTML-разметку на ошибки?
Валидатор W3C покажет незакрытые теги, неверные атрибуты и другие ошибки разметки.
А теперь о вас
Три вопроса без правильных ответов — о том, подходит ли вам это направление.
Что дальше
Если тема зацепила, продолжить можно так.