Junior

Проверь свои навыки в HTML и CSS

В атрибуте style в отдельных тэгах

Где наиболее корректно прописывать стили для html-страницы?

Выберите корректную последовательность вложенности тэгов при верстке меню

Укажите, какие именования классов не противоречат классическим правилам формирования имён в методологии БЭМ

Основное описание страницы

Какой блок размечается тэгом <aside>?

Какие атрибуты изображения являются обязательными с точки зрения валидации?

Каким тэгом наиболее корректно размечать жирный текст?

Начинаются с новой строки

К ним не применяются свойства width и height

Ширина элемента равна содержимому

Используются только внутри параграфа <p>

Что характерно для строчных элементов?

Какой(ие) атрибут(ы) наиболее корректно использовать для задания имен блокам?

Какой атрибут используется для открытия ссылки в новой вкладке браузера?

С помощью какого свойства можно выстроить элементы в линию?

С какого тэга начинается любой документ html5?

В ссылке меню задать атрибут # <a #="link"></a>; в месте страницы, куда нужно перейти указать атрибут id <a id="link"></a>

В ссылке меню задать атрибут id <a id="link"></a>; в месте страницы, куда нужно перейти указать атрибут # <a id="#"></a>

В ссылке меню задать атрибут # <a #="link"></a>; в месте страницы, куда нужно перейти указать атрибут name <a name="link"></a>

В ссылке меню задать атрибут name <a name="link"></a>; в месте страницы, куда нужно перейти указать атрибут # <a id="#"></a>

Как создать переход по ссылке в рамках одной html-страницы?

Можно совмещать только display: flex и display: grid

Нельзя в рамках одной страницы использовать display: flex, display: grid; float: left; 

Можно использовать все технологии верстки там, где это уместно

Какие свойства display можно совмещать в верстке?

Какое название класса наиболее корректно?

Как в CSS обратится к элементу header?

Укажите семантические тэги, которые появились в html5

Какие тэги используются внутри тэга <head>?

Какое количество классов можно указать в одном html-тэге?

С помощью каких методов HTTP запроса, будет правильнее организовать передачу данных формы на сервер?

Какая ширина будет у 4 столбцов при свойствах display: grid; width: 1000px и  grid-template-columns: 200px 1fr 2fr 1fr?

Каким образом можно задать отступы у блока 20px сверху и 10px снизу?

С помощью какого псевдокласса задают эффект при наведении мышкой ?

С помощью какого селектора, можно получить прямого потомка элемента с классом .main_menu?

С помощью свойства line-height задают:

.section-item { position: relative; margin-left: 20px; margin-top: 30px; }

.section-item { position: relative; padding-left: 20px; padding-top: 30px; }

.section-item { position: relative; left: 20px; top: 30px; }

.section-item { position: relative; left-padding: 20px; top-padding: 30px; }

Как задаются отступы при использовании свойства position ? 

Назначаем <input> и <label> одинаковые id

У <label> указываем атрибут for, который равен атрибуту id у тэга <input>

<input> следует строго за <label>

Помещаем <input> внутрь <label>

Выберите корректные варианты связывания label и input при верстке форм

Позволяет использовать переменные

Не позволяет использовать переменные

Переменные можно использовать только в sass и scss

Позволяет использовать только определенные переменные 

Современный CSS (укажите верный вариант)

С помощью каких свойств можно задать цвет фона ?

увидеть “потерянные” файлы, которые не загрузились на страницу

протестировать изменение стилей на странице

увидеть ошибки в файлах js

Чем может быть полезна вкладка “Console” в инструментах разработчика в браузере?

Проверка кода с помощью валидатора W3C является

для создания многострочного текстового поля

для создания шаблона форм

для группировки элементов форм

этот тэг устарел и сейчас не используется

Для чего используется тэг <fieldset>?

изображение фона на ретина экранах

аватары пользователей

Для каких изображений сайта лучшим выбором будет формат svg?

ttf или otf, как в операционной системе компьютера

Какие форматы шрифтов мы должны подключить на страницу, если в дизайне использованы нестандартные шрифты?

max-width: 100% для контентных изображений

установка точных размеров картинки в атрибутах

активное использование формата svg

Какие техники работы с графикой используются при верстке адаптивных сайтов?

шрифт, используемый по умолчанию

вид шрифта, который определяется свойством font-style

шрифт, который определяется в стилях и используется, если основной шрифт сайт не доступен

disabled нельзя изменять через скрипты

только disabled недоступен для редактирования

readonly отсылается на сервер при отправке формы, а disabled - нет

у readonly есть состояние фокуса

В чем разница между атрибутами элементов форм disabled и readonly

Какой формат изображений будет лучшим выбором для верстки данных элементов?

можно, если стилизовать так, как на макете

можно, если использовать атрибуты role и tabindex

Можно ли использовать <div> для верстки данного элемента?

Какой формат изображений вы выберете для верстки картинок на карточках продуктов?

в виде дополнительной картинки, которую с помощью абсолютного позиционирования поместить под главное изображение

с помощью свойства box-shadow

с помощью псевдоэлемента

с помощью дополнительного блока в разметке

Как лучше всего сделать подобную тень у картинки?

Какое значение свойства justify-content задано по умолчанию?

Какое свойство обязательно для работы ::after?

может только при абсолютном позиционировании родительского блока

Может ли свойство order иметь отрицательное значение?

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

в css было прописано свойство overflow: scroll

ширина загруженной на страницу картинки больше, чем ширина вьюпорта страницы

использовано свойство display: inline-block

У вас появилась ненужная горизонтальная прокрутка на странице. В чем может быть причина?

Какое css-свойство флексбокс-технологии вы будете использовать, чтобы выровнять контент по вертикали?

прописать цвета для колонок в html - <td bgcolor=”grey”>...</td>

использовать псевдокласс :nth-child(odd)

задать дополнительный класс для ячеек таблицы другого цвета

использовать псевдокласс :nth-child(2n)

Как правильно сделать такую “полосатую” таблицу?

grid-template-areas:      "nav header"     "article ads"     "footer";

grid-template-areas:      "nav header header"     "nav article ads"     "nav footer ads";

grid-template-areas:      "nav header header"     "article ads"     "footer";

Каково будет значение свойства grid-template-area для данного шаблона?

псевдоэлементы after и before

одно из свойств css-transform

Какую технику нужно использовать, чтобы сделать кнопку подобной формы?

Какие css-свойства нужно прописать для позиционирования блока “B” внутри грид-контейнера?

Вы хотите закрепить кнопку “Вверх” на сайте так, чтобы при прокрутке она сохраняла своё позиционирование. Какое css-свойство нужно использовать для этой цели?

Тест по верстке: HTML и CSS

Создайте учетную запись!