Программирование на языке верстки HTML и стилей CSS.фип_БАК_Отест-12106МОБАК

Скачать тест — (Программирование на языке верстки HTML и стилей CS_6ba31863.pdf)

Закрытый вопрос: Какой атрибут HTML используется для задания альтернативного текста изображению?
Закрытый вопрос: Какой символ используется для обозначения конца тега HTML?
Закрытый вопрос по HTML: Какой атрибут HTML используется для задания адреса ссылки?
Как называется первый тег в HTML-документе, который указывает на версию языка разметки? (укажите название тега без угловых скобок)
Какой тег используется для создания заголовков разных уровней в HTML-документе? (укажите название тега без угловых скобок и номера уровня)
Какой атрибут тега < p > позволяет выровнять текст по центру, по левому или правому краю? (укажите название атрибута без знака равенства)
Какой тег используется для создания таблицы в HTML-документе? (укажите название тега без угловых скобок)
Какой тег используется для создания формы, которая позволяет пользователю вводить и отправлять данные на сервер? (укажите название тега без угловых скобок)
Какой атрибут тега < form > указывает на метод передачи данных формы на сервер? (укажите название атрибута без знака равенства)
Какой тег используется для вставки изображения в HTML-документ? (укажите название тега без угловых скобок)
Какой атрибут тега < img > указывает на адрес изображения, которое нужно отобразить? (укажите название атрибута без знака равенства)
Как называется способ верстки, при котором используются теги HTML по их назначению, то есть согласно смыслу и содержанию элементов? (укажите одно слово)
Вопрос на установление соответствия: Соотнесите теги HTML с их функциями
Вопрос на упорядочивание: Расположите теги HTML в порядке убывания их частоты использования в среднем HTML-документе, начиная с самого частого.
Что такое селектор CSS?
Какой селектор CSS используется для выбора всех элементов с определенным классом?
Какой селектор CSS используется для выбора всех элементов с определенным идентификатором?
Какой селектор CSS используется для выбора всех элементов, которые являются потомками определенного элемента?
Какое свойство CSS используется для задания внутренних отступов элемента?
Какое свойство CSS используется для задания границы элемента?
Какое свойство CSS используется для задания стиля границы элемента?
Какое свойство CSS используется для задания фонового цвета элемента?
Какое свойство CSS используется для задания ширины элемента?
Открытый вопрос по теме Анимации: Какое свойство CSS используется для задания продолжительности анимации?
Открытый вопрос по теме Анимации: Какое свойство CSS используется для задания временной функции анимации?
Открытый вопрос по теме Анимации: Какое свойство CSS используется для задания количества повторений анимации?
Открытый вопрос по теме Анимации: Какое свойство CSS используется для задания направления анимации?
Открытый вопрос по теме Анимации: Какое свойство CSS используется для задания состояния анимации?
Открытый вопрос по теме Анимации: Как называется правило CSS, которое используется для определения ключевых кадров анимации?
Открытый вопрос по теме Трансформации: Какое свойство CSS используется для задания типа и параметров трансформации элемента?
Как называется элемент CSS, который позволяет задавать стили для одного или нескольких элементов HTML? (укажите одно слово)
Как называется элемент CSS, который позволяет задавать значение для определенного свойства стиля? (укажите одно слово)
Расположите свойства CSS для задания шрифта текста в порядке уменьшения их значимости для отображения текста:
Установите соответствие между свойствами CSS и их значениями:
Вы работаете веб-разработчиком в компании, которая занимается продажей косметики. Ваша задача — создать веб-страницу, на которой будет отображаться информация о разных продуктах косметики, их составе, эффекте и способе применения. Вы уже сверстали страницу с помощью HTML и подготовили текстовый контент и изображения для страницы. Теперь вам нужно оформить страницу с помощью CSS. Какой селектор CSS нужно использовать для применения стилей к элементу с идентификатором «product», если вы хотите задать ему ширину 300 пикселей, высоту 200 пикселей и рамку толщиной 1 пиксель цвета черного?
Что такое Flexbox в CSS?
Какое свойство CSS используется для задания контейнера Flexbox?
Какое свойство CSS используется для задания направления основной оси Flexbox?
Какое свойство CSS используется для задания переноса элементов Flexbox на новую строку?
Какое свойство CSS используется для задания соотношения роста элементов Flexbox?
Что такое Grid в CSS?
Закрытый вопрос по теме Grid: Какое свойство CSS используется для задания контейнера Grid?
Какое свойство CSS используется для задания колонок Grid?
Какое свойство CSS используется для задания строк Grid?
Как называется технология в CSS, которая позволяет адаптировать стили к разным параметрам устройства или окна браузера с помощью ключевого слова @media? (укажите одно слово, написанное латинскими буквами)
Как называется способ верстки, при котором ширина и высота элементов задаются в относительных единицах измерения, например, процентах или em? (укажите одно слово)
Как называется модель компоновки в CSS, которая позволяет выравнивать и распределять элементы в одномерном пространстве (по горизонтали или по вертикали)? (укажите одно слово)
Как называется модель компоновки в CSS, которая позволяет выравнивать и распределять элементы в двумерном пространстве (по горизонтали и по вертикали)? (укажите одно слово)
Как называется свойство CSS, которое позволяет задать минимальную и максимальную ширину или высоту элемента? (укажите название свойства без двоеточия и суффикса min или max)
Как называется способ верстки, при котором элементы подстраиваются под разные размеры экранов с помощью относительных единиц измерения и медиа-запросов? (укажите одно слово)
Как называется способ верстки, при котором элементы имеют фиксированные размеры и положения, не зависящие от размеров экранов? (укажите одно слово)
Как называется процесс проверки и устранения ошибок в верстке, связанных с различиями в отображении сайта в разных браузерах? (укажите одно слово)
Как называется технология в CSS, которая позволяет использовать переменные для хранения и повторного использования значений свойств? (укажите одно слово, написанное латинскими буквами)
Установите соответствие между медиа-выражениями и их описаниями:
Расположите шаги для экспорта элемента из Figma в порядке, в котором они должны выполняться:
Вы работаете веб-разработчиком в компании, которая занимается продажей обуви. Ваша задача — создать веб-сайт, на котором будет отображаться каталог обуви, ее характеристики, цены и отзывы. Вы уже подготовили дизайн и логику сайта, а также выбрали подходящий шрифт и цветовую схему. Теперь вам нужно сделать сайт адаптивным и кроссбраузерным, то есть корректно отображающимся на разных устройствах и браузерах. Какой инструмент нужно использовать для создания адаптивной сетки, которая позволяет располагать элементы в виде строк и столбцов с разной шириной и высотой?
Что такое Figma?
Как называется основная единица работы в Figma?
Как называется панель, на которой располагаются все элементы макета в Figma?
Как называется панель, на которой отображаются все слои и группы элементов макета в Figma?
Как называется панель, на которой располагаются различные инструменты для создания и редактирования элементов макета в Figma?
Как называется панель, на которой отображаются различные свойства выбранного элемента макета в Figma?
Как называется функция, которая позволяет создавать динамические списки элементов макета в Figma?
Как называется функция, которая позволяет создавать интерактивные прототипы макетов в Figma?
Как называется функция, которая позволяет экспортировать элементы макета в различные форматы файлов в Figma?
Как называется основная единица работы в Figma, которая представляет собой файл с одним или несколькими холстами? (укажите одно слово)
Как называется элемент в Figma, который позволяет создавать и редактировать векторные графические объекты, такие как линии, кривые, фигуры и т.д.? (укажите одно слово)
Как называется элемент в Figma, который позволяет добавлять и редактировать текстовые блоки на холсте? (укажите одно слово)
Как называется элемент в Figma, который позволяет изменять цвет, шрифт, выравнивание, отступы и другие параметры текста или графики? (укажите одно слово)
Как называется элемент в Figma, который позволяет перемещать, масштабировать, поворачивать или выравнивать объекты на холсте? (укажите одно слово)
Как называется элемент в Figma, который позволяет группировать, скрывать или блокировать объекты на холсте? (укажите одно слово)
Как называется элемент в Figma, который позволяет создавать интерактивные прототипы из макетов с помощью связей и анимации? (укажите одно слово)
Как называется элемент в Figma, который позволяет комментировать, обсуждать или давать обратную связь по макетам или прототипам? (укажите одно слово)
Как называется элемент в Figma, который позволяет импортировать или экспортировать изображения, шрифты, цвета или другие ресурсы из макетов? (укажите одно слово)
Расположите шаги для создания прототипа в Figma в порядке, в котором они должны выполняться:
Установите соответствие между панелями Figma и их функциями:
Вы работаете веб — разработчиком в компании, которая занимается продажей кофе. Ваша задача создать веб страницу, на которой будет отображаться информация о разных сортах кофе, их происхождении, аромате и способе приготовления. Вы уже получили макет страницы от дизайнера в формате Figma и подготовили текстовый контент и изображения для страницы. Теперь вам нужно сверстать страницу с помощью HTML и CSS. Какой инструмент или функция Figma можно использовать для экспорта изображений из макета в нужном формате и размере?
Семантическая верстка означает, что
Формы в HTML служат для
Селектор в CSS определяет
Свойство в CSS определяет
Значение в CSS определяет
Класс в CSS позволяет
Идентификатор в CSS позволяет
Отступ (margin) в CSS определяет
Поле (padding) в CSS определяет
Свойство display в CSS определяет
Свойство display может принимать следующие значения, кроме
Резиновая верстка означает, что
Media-запросы в CSS позволяют
Flexbox в CSS позволяет
Grid в CSS позволяет
Кроссбраузерность означает, что
Адаптивная верстка означает, что
Чтобы применить стили только для определенного диапазона ширины экрана, нужно использовать
Flexbox — это
Свойство flex-direction задает
Свойство align-items задает
Grid — это
Свойство grid-template-columns задает
Свойство grid-template-areas задает
Инструмент, который позволяет проверить кроссбраузерность сайта, называется
Свойство zoom: none; позволяет
Префикс -webkit- используется для стилей, которые поддерживаются только в браузере
Figma — это
Чтобы открыть макет в Figma, нужно
Чтобы перемещаться по макету в Figma, нужно
Чтобы приблизить или отдалить макет в Figma, нужно
Чтобы выбрать элемент на макете в Figma, нужно
Какой тег используется для создания гиперссылки в HTML-документе? (укажите название тега без угловых скобок)
Какой тег используется для создания выпадающего списка с несколькими вариантами выбора в форме?
Какой тег используется для создания заголовка первого уровня в HTML-документе? (укажите название тега без угловых скобок)
Какой тег используется для создания разделителя между абзацами текста в HTML-документе? (укажите название тега без угловых скобок)
Какой тег используется для создания маркированного списка в HTML-документе? (укажите название тега без угловых скобок)
Какой тег используется для создания ячейки заголовка таблицы в HTML-документе? (укажите название тега без угловых скобок)
Какой тег используется для создания видео-плеера в HTML-документе? (укажите название тега без угловых скобок)
Какой тег используется для создания подвала (нижней части) HTML-документа? (укажите название тега без угловых скобок)
Как называется селектор CSS, который выбирает элементы по их идентификатору? (укажите символ, который ставится перед именем идентификатора)
Как называется селектор CSS, который выбирает элементы, которые являются первыми дочерними элементами своих родителей? (укажите полное название псевдо-класса без двоеточия)
Как называется селектор CSS, который выбирает элементы, которые являются последними дочерними элементами своих родителей? (укажите полное название псевдо-класса без двоеточия)
Как называется селектор CSS, который выбирает элементы, которые являются единственными дочерними элементами своих родителей? (укажите полное название псевдо-класса без двоеточия)
Как называется селектор CSS, который выбирает элементы, которые находятся в состоянии наведения курсора мыши? (укажите полное название псевдо-класса без двоеточия)
Как называется селектор CSS, который выбирает элементы, которые находятся в состоянии активации (например, при клике мышью или нажатии клавиши)? (укажите полное название псевдо-класса без двоеточия)
Как называется селектор CSS, который выбирает элементы, которые находятся в состоянии фокуса (например, при переходе по табуляции или клике мышью)? (укажите полное название псевдо-класса без двоеточия)
Как называется селектор CSS, который выбирает элементы по их порядковому номеру среди всех дочерних элементов? (укажите полное название псевдо-класса без двоеточия)
Какое свойство CSS используется для создания анимации изменения стилей элементов?
Какое свойство CSS используется для определения ключевых кадров анимации?
Установите соответствие между тегами HTML и их описаниями:
Установите соответствие между тегами HTML и их функциями:
Установите соответствие между тегами HTML и их эффектом на текст:
Установите соответствие между тегами HTML и их названиями:
Установите соответствие между селекторами CSS и их описаниями:
Установите соответствие между значениями свойства display и их эффектом на элемент:
Установите соответствие между свойствами CSS для оформления текста и их значениями:
Установите соответствие между значениями свойства position и их эффектом на элемент:
Установите соответствие между свойствами CSS для работы с медиа-запросами и их описаниями:
Установите соответствие между медиа-типами и их описаниями:
Установите соответствие между префиксами для кроссбраузерной поддержки и браузерами, в которых они используются:
Установите соответствие между инструментами Figma и их описаниями:
Установите соответствие между модификаторами клавиатуры в Figma и их эффектом на действия мыши:
Установите соответствие между типами констрейнтов в Figma и их описаниями:
Расположите элементы HTML-документа в порядке, в котором они должны идти в коде страницы:
Расположите теги HTML для создания таблицы в порядке, в котором они должны идти в коде страницы:
Расположите теги HTML для создания формы в порядке, в котором они должны идти в коде страницы:
Расположите теги HTML для создания списка определений в порядке, в котором они должны идти в коде страницы:
Расположите теги HTML для создания мультимедийного контента на странице в порядке увеличения сложности их использования:
Расположите способы подключения стилей CSS к HTML-документу в порядке увеличения приоритета их применения:
Расположите селекторы CSS в порядке увеличения их специфичности (веса):
Расположите свойства CSS для задания размеров элемента в порядке уменьшения их влияния на занимаемое элементом пространство:
Расположите шаги для создания компонента в Figma в порядке, в котором они должны выполняться:
Расположите шаги для создания маски из двух элементов в Figma в порядке, в котором они должны выполняться:
Расположите шаги для создания анимации между двумя кадрами (frames) в Figma в порядке, в котором они должны выполняться:
Вы работаете веб-разработчиком в компании, которая занимается продажей цветов. Ваша задача — создать веб-страницу, на которой будет отображаться информация о разных сортах цветов, их аромате, уходе и цене. Вы уже сверстали страницу с помощью HTML и подготовили текстовый контент и изображения для страницы. Теперь вам нужно оформить страницу с помощью CSS. Какое значение свойства CSS нужно использовать для задания шрифта текста элемента, если вы хотите использовать шрифт Arial или любой другой без засечек (sans-serif), если Arial не доступен?
Вы работаете веб-разработчиком в компании, которая занимается продажей игрушек. Ваша задача — создать веб-страницу, на которой будет отображаться информация о новинке — мягком зайце. Вы уже подготовили текстовый контент и изображение для страницы, а также выбрали подходящий шрифт и цветовую схему. Теперь вам нужно оформить страницу с помощью CSS. Какое свойство нужно использовать для задания цвета текста элемента?
Вы работаете веб-разработчиком в компании, которая занимается продажей спортивного оборудования. Ваша задача — создать веб-страницу, на которой будет отображаться информация о новинке — велосипеде. Вы уже подготовили текстовый контент и изображение для страницы, а также выбрали подходящий шрифт и цветовую схему. Теперь вам нужно оформить страницу с помощью CSS. Какое свойство нужно использовать для задания толщины границы элемента?
Вы работаете веб-разработчиком в компании, которая занимается продажей косметики. Ваша задача — создать веб-страницу, на которой будет отображаться информация о новинке — туши для ресниц. Вы уже подготовили текстовый контент и изображение для страницы, а также выбрали подходящий шрифт и цветовую схему. Теперь вам нужно оформить страницу с помощью CSS. Какое свойство нужно использовать для задания стиля границы элемента?
Вы работаете веб-разработчиком в компании, которая занимается продажей музыкальных инструментов. Ваша задача — создать веб-страницу, на которой будет отображаться информация о новинке — гитаре. Вы уже подготовили текстовый контент и изображение для страницы, а также выбрали подходящий шрифт и цветовую схему. Теперь вам нужно оформить страницу с помощью CSS. Какое свойство нужно использовать для задания положения фонового изображения элемента?
Вы работаете веб-разработчиком в компании, которая занимается продажей книг. Ваша задача — создать веб-страницу, на которой будет отображаться информация о разных жанрах книг, их авторах, рейтингах и отзывах читателей. Вы уже сверстали страницу с помощью HTML и CSS и подготовили текстовый контент и изображения для страницы. Теперь вам нужно сделать страницу адаптивной и кроссбраузерной. Какой способ задания размеров элементов на странице является наиболее подходящим для адаптивной верстки?
Вы работаете веб-разработчиком в компании, которая занимается продажей пиццы. Ваша задача — создать веб-страницу, на которой будет отображаться меню пиццы с фотографиями, названиями, ингредиентами и ценами. Вы уже получили макет страницы от дизайнера в формате Figma и подготовили текстовый контент и изображения для страницы. Теперь вам нужно сверстать страницу с помощью HTML и CSS. Какой инструмент или функция Figma можно использовать для измерения расстояния между элементами на макете?
Вы работаете веб-разработчиком в компании, которая занимается продажей цветов. Ваша задача — создать веб-страницу, на которой будет отображаться каталог цветов с фотографиями, названиями, ценами и описаниями. Вы уже получили макет страницы от дизайнера в формате Figma и подготовили текстовый контент и изображения для страницы. Теперь вам нужно сверстать страницу с помощью HTML и CSS. Какой инструмент или функция Figma можно использовать для создания интерактивного прототипа страницы с переходами между разными разделами?
CSS-фреймворк это
В каких случаях рекомендуются фреймворки?
Установите соответствие между технологией и ее характерным аспектами
Что такое “минимальный CSS”?
Как Tailwind улучшает производительность веб-сайта?
Как используя синтаксис служебных классов Tailwind прописать псевдокласс hover для элемента? Напишите полностью модификатор, который необходимо поместить перед самим классом.
Укажите список контрольных точек адаптивности в порядке их приоритета с точки зрения подхода к верстки, характерного для Tailwind (mobile или desktop first).
Как называется концепция которая означает, что Tailwind позволяет создавать сложные элементы из простых компонентов?
Как можно задать кастомный размер текста (15 пикселей), которого нет в предустановленном списке служебных утилит? Напишите полное название класса вместе с его базовой частью.
Как можно ограничить количество строк в тексте до трех при помощи служебного класса Tailwind? Напишите полное название класса вместе с его базовой частью.
Какого (каких) из служебных классов семейства “ширина” нет по умолчанию в Tailwind?
Какого (каких) из служебных классов семейства “отступы” нет по умолчанию в Tailwind?
Напишите полное название класса, с помощью которого можно указать отступы в размере 14 пикселей между дочерними элементами.
Напишите полное название класса, с помощью которого можно указать разделители в размере 8 пикселей между дочерними элементами.
Напишите полное название класса, с помощью которого можно указать скругление блока в размере 8 пикселей только в левом верхнем углу.
Напишите полную комбинацию классов через запятую, с помощью которой можно указать границу блока в размере 8 пикселей красного цвета red-500 из палитры Tailwind.
Напишите полное название класса, с помощью которого можно указать отступ границы (outline) блока в размере 2 пикселей.
Какое семейство классов можно использовать для создания разделителей между дочерними элементу?
Какого варианта стиля границ не существует в стандартных классах Tailwind?
Какие варианты указания скругления границ элементов существуют в стандартных классах Tailwind?
В шапке веб-страницы имеется список повторяющихся кнопок, заключенный в flex-контейнер. Происходит выравнивание по центру как по горизонтальной, так и по вертикальной оси. Необходимо показать активность элементов списка при наведении на них, добавляя границу шириной несколько пикселей. Каким образом стоит это сделать?
Для указания пользовательских значений служебных классов с пробелами между частями (например, box-shadow: 0 35px 60px -15px rgba(0,0,0,0.3) стоит использовать:
Какие группы свойств чаще всего используются при переходах и анимациях:
Для изменении размера тени с указанным красным цветом (отличный от стандартного) при переходе через контрольные точки адаптивности необходимо:
В каких единицах измерения указывается прозрачность в Tailwind?
Как используя синтаксис служебных классов Tailwind прописать псевдокласс hover для элемента с добавлением тени размера 2xl? Напишите полностью класс с модификатором.
Укажите в порядке возрастания непрозрачности (от прозрачного до непрозначного) значения служебного класса opacity в Tailwind.
С помощью какого служебного класса tailwind можно сделать следующую трансформацию с элементом: увеличение элемента в 1.25 раза по обеим осям. Напишите служебный класс полностью.
С помощью какой утилиты можно сделать элемент, охватывающий 3 столбца в Grid контейнере? Напишите полное название класса.
Какой служебный класс Tailwind позволяет создать 4 строки в Grid контейнере? Напишите полное название класса.
Укажите служебный класс, которому соответствует сдвиг по оси X в размере 50%.
Как сделать перенос слов на новую строку для элементов внутри Flexbox контейнера?
С помощью какого служебного класса tailwind можно сделать следующую трансформацию с элементом: вернуть элемент вокруг своей оси на 90 градусов против часовой стрелке. Напишите служебный класс полностью.
С помощью какого класса из семейства aspect-ratio можно указать соотношение сторон изображению в соотношении 1 к 1? Напишите полное название класса.
Напишите полное название класса, с помощью которого можно указать отступы в размере 2rem в grid или flex контейнере.
Напишите полную комбинацию классов через запятую, с помощью которой можно создать flex контейнер, в котором элементы располагаются в столбец, начиная от нижнего края.
Напишите полное название класса, которое указывает браузеру, как обрабатывать поведение прокрутки элемента. Значение у класса должно быть следующее — прокрутка будет происходить плавно без прерываний, вызванных закрытием и появлением отдельных дочерних элементов во время анимации.
Какой служебный класс Tailwind позволяет создать 3 колонки в Grid контейнере?
Какого варианта z-index не существует в стандартных классах Tailwind?
Какие варианты свойства transition-{property} допустимо использовать, чтобы анимировать переход для изменения цвета текста
Имеется grid контейнер, который содержит 7 дочерних элементов. Необходимо создать сетку из трех строк с конфигурацией 1-1-1-2-1-1-2, где 1 и 2 — количество занимаемых элементом столбцов. Каким образом стоит это сделать?
Установите соответствие между служебным классом и правилом CSS
Какой из вариантов фона может подойти для темного варианта темы?
Какой из вариантов цвета текста может подойти для темного варианта темы, если фон контейнера dark:bg-red-900?
Установите соответствие между названиями плагинов Tailwind и функциями, которые они выполняют
В каком файле находится конфигурация проекта Tailwind?
За что отвечает поле presets в файле конфигурации Tailwind?
Какой класс позволяет изменить оттенок серого на Zinc внутри контейнера, к которому применен класс prose и действует плагин typography? Напишите полное название класса.
Укажите список контрольных точек адаптивности в порядке их приоритета с точки зрения подхода к верстки, характерного для Tailwind (mobile или desktop first) в стандартной теме.
Какое поле из конфигурации позволяет регистрировать новые стили для Tailwind для внедрения в таблицу стилей пользователя с использованием JavaScript вместо CSS.? Укажите ключ объекта.
Имеется контейнер с классом @container/main. Используется плагин @tailwindcss/container-queries. Напишите полное название класса вместе с модификаторами, который позволит одному из дочерних блоков подчеркнуть текст, в тех случаях когда размер контейнера превышает `56rem`.
Чтобы переопределить значения стандартной утилиты радиуса границ Tailwind, не расширяя ее, необходимо использовать этот объект. Напишите полный путь до него в конфигурации, начиная с theme.
Выберите верный вариант подключения к проекту в качестве контента всех html и js файлов, которые содержатся в директории src и всех ее дочерних директориях.
Какого значения для утилиты aspectRatio нет в теме Tailwind по умолчанию?
Какой класс позволяет отменить действие плагина на части верстки внутри контейнера, к которому применен класс prose и действует плагин typography? Напишите полное название класса.
Чтобы добавить новый цвет с уникальным именем, сохраняя стандартную палитру Tailwind, необходимо использовать этот объект. Напишите полный путь до него в конфигурации, начиная с theme.
Чтобы переопределить значения стандартной утилиты ширины границ Tailwind, не расширяя ее, необходимо использовать этот объект. Напишите полный путь до него в конфигурации, начиная с theme.
Напишите название директивы по ее описанию (без @tailwind): Подключает базовые стили Tailwind и любые базовые стили, зарегистрированные подключенными к проекту плагинами.
Напишите название директивы по ее описанию (без @tailwind): Подключает служебные классы Tailwind и любые служебные классы, зарегистрированные подключенными к проекту плагинами.
Какое поле из конфигурации настраивает пути ко всем вашим HTML-шаблонам, компонентам JavaScript и любым другим исходным файлам, которые содержат имена классов Tailwind?
Что не относится к процессу темизации проекта на Tailwind?
Какими плагинами наследуются все цвета внутри theme.colors?
По задумке дизайнера в проекте с Tailwind используется шрифт ‘Montserrat’. Необходимо переопределить шрифт по умолчанию на ‘’Montserrat’’. Укажите верную последовательность действий.
Как используя синтаксис служебных классов Tailwind прописать псевдокласс hover для элемента? Напишите полностью модификатор, который необходимо поместить перед самим классом.
Какие варианты переиспользования верстки применимы к Tailwind?
Что значит “низкоуровневый” в контексте Tailwind?
Как можно ограничить количество строк в тексте до трех при помощи служебного класса Tailwind? Напишите полное название класса вместе с его базовой частью.
С помощью какой утилиты можно сделать элемент, охватывающий 3 столбца в Grid контейнере? Напишите полное название класса.
Укажите порядок действий при добавлении Tailwind в проект.
Как маркировать контейнер в плагине @tailwindcss/container-queries, чтобы можно было отсчитывать от него контрольные точки адаптивности? Напишите полное название класса.
Какой класс позволяет контейнеру, к которому применен класс prose и действует плагин typography, активировать темную версию темы? Напишите полное название класса вместе с модификатором.
Какое поле из конфигурации настраивает пути ко всем вашим HTML-шаблонам, компонентам JavaScript и любым другим исходным файлам, которые содержат имена классов Tailwind? Укажите ключ объекта.
Какое семейство классов можно использовать для создания разделителей между дочерними элементу?
Укажите служебный класс, которому соответствует сдвиг по оси X в размере 50%.
С помощью какого класса из семейства aspect-ratio можно указать соотношение сторон изображению в соотношении 1 к 1? Напишите полное название класса.
С помощью какого служебного класса tailwind можно сделать следующую трансформацию с элементом: вернуть элемент вокруг своей оси на 90 градусов против часовой стрелке. Напишите служебный класс полностью.
С помощью какой утилиты можно сделать элемент, охватывающий 3 строки в Grid контейнере? Напишите полное название класса.
С помощью какого служебного класса tailwind можно сделать следующую трансформацию с элементом: уменьшение элемента на 25% по обеим осям. Напишите служебный класс полностью.
Имеется контейнер с классом @container/main. Используется плагин @tailwindcss/container-queries. Напишите полное название класса вместе с модификаторами, который позволит одному из дочерних блоков подчеркнуть текст, в тех случаях когда размер контейнера превышает `17.5`.
Для изменении размера тени с указанным красным цветом (отличный от стандартного) при переходе через контрольные точки адаптивности необходимо:
Выберите верный вариант подключения к проекту в качестве контента всех html и js файлов, которые содержатся в директории src и всех ее дочерних директориях.
Какие варианты свойства transition-{property} допустимо использовать, чтобы анимировать переход для изменения цвета текста
Установите соответствие между директивой Tailwind и ее предназначением.
На странице имеется элемента анонса новостной статьи. Элемент состоит из изображения, тегов и короткого текста. Необходимо ограничить размер текста таким образом, чтобы он занимал одинаковое количество строк. Выберите оптимальный вариант того, как это можно реализовать средствами Tailwind.
Что такое React?
Выберите верные факты о React
Установите соответсвие с понятиями из React и их значениями
Компоненты React по своей сущности являются
Выберите вариант правильного именованного импорта компонента
Напишите полное название файла CSS модуля стилей style с расширением файла.
Укажите порядок, в котором выполняются консольные команды при инициализации проекта.
В React используется специальная разновидность разметки — JSX. Напишите полное название атрибута class применимо к JSX разметке.
В React используется специальная разновидность разметки — JSX. Напишите полное название атрибута aria-label применимо к JSX разметке.
В React используется специальная разновидность разметки — JSX. Напишите полное название атрибута data-name применимо к JSX разметке.
Выберите вариант правильного именованного экспорта компонента
Выберите валидный фрагмент JSX разметки
Какой класс был указан изначально в файле CSS модуля logo, если в DOM дереве элемент имеет класс logo_icon__EXxnn. Конфигурация CSS модулей имеет стандартную настройку. Напишите полное название класса.
В проекте используются CSS модули. Элемент в DOM дереве имеет класс logo_icon__exxnn. Конфигурация CSS модулей имеет стандартную настройку. Какая из частей класса содержит уникальный идентификатор класса, которая позволяет создавать уникальные изолированные стили? Запишите ответ в виде строки.
В проекте используются CSS модули. Элемент в DOM дереве имеет класс component_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку. Какое название было у файла CSS модуля, в котором был определен этот класс? Запишите ответ в виде строки — полное название файла с раширением.
Ниже представлен некоторый фрагмент JSX разметки. ˂div˃{false ? “some_string_1”: “some_string_2”}˂div/˃ Напишите строку, которая будет находится внутри элемента div после рендеринга.
Ниже представлен некоторый фрагмент JSX разметки. ˂div˃{[‘h’,’e’,’3’,’7’,’5’].map((item)=˃(item))}˂div/˃ Напишите строку, которая будет находится внутри элемента div после рендеринга.
В разметке компонента находится следующая структура: { true? ˂h1˃Заголовок1˂/h1˃ : ˂h2˃Заголовок2˂/h2˃ }. Какой их фрагментов разметки окажется в результирующей верстки?
В разметке компонента находится следующая структура: { true? ˂h1˃Заголовок1˂/h1˃ : null }. Какой их фрагментов разметки окажется в результирующей верстки?
Выберите несколько вариантов ответа. К преимуществам CSS/SCSS модулей можно отнести:
Имеется компонент списка карточек товаров. Предположим, что у нас есть массив данных товаров, которые мы хотим отобразить в виде карточек товаров, который пришел в этот компонент посредством props. Здесь мы предполагаем, что данные о товарах будут переданы в виде массива объектов с полями uniq_good_id, title, price, imageUrl и description. При рендеринге списков какой вариант задания ключей самый оптимальный?
Styled components это
Выберите характерные аспекты для Styled Components
Установите соответствие между выражением условного рендеринга и его результатом
Какой вариант написания стилей используется в Styled Components?
Пользуясь базовым вариантом стилизации в Styled Components, стилизованный Wrapper из section задается следующим образом.
Как добавить Styled Components в проект на React? Напишите полностью консольную команду для установки этого пакета через пакетный менеджер Yarn.
Укажите порядок, в котором выполняются консольные команды при инициализации проекта c Styled Components.
В проекте используется Styled Components. Необходимо элементу CustomButton задать скругление границ углов в размере 3 пикселей. Заготовка выглядит следующим образом: const CustomButton = styled.button«. Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы. Пример ответа: margin: 12px;
Ниже представлен некоторый фрагмент JSX разметки. ˂div˃{[‘3’,’5’,’s’,’d’,’f’].map((item)=˃(item))}˂div/˃ Напишите строку, которая будет находится внутри элемента div после рендеринга.
Как добавить JSS в проект на React? Напишите полностью консольную команду для установки этого пакета через пакетный менеджер Yarn.
Для написания стилей в Styled Components CSS правила оборачиваются в специальную обертку — …
Как реализовано взаимодействие стилей и JavaScript в Styled Components?
В проекте используется JSS. Необходимо некоторому элементу задать размер текста в 9 rem. Заготовка выглядит следующим образом: const useStyles = createUseStyles({myElement: {…}). Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы (используйте одинарные кавычки при необходимости, запятую в конце ставить не нужно). Пример ответа: margin: ‘12px’
В проекте используется Styled Components. Необходимо элементу CustomInput задать размер текста 1 em. Заготовка выглядит следующим образом: const CustomInput = styled.input«. Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы. Пример ответа: margin: 12px;
В React используется специальная разновидность разметки — JSX. Напишите полное название атрибута onclick применимо к JSX разметке.
В React используется специальная разновидность разметки — JSX. Напишите полное название атрибута data-name применимо к JSX разметке.
В проекте используется JSS. Необходимо некоторому элементу задать наклонный стиль текста. Заготовка выглядит следующим образом: const useStyles = createUseStyles({myElement: {…}). Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы (используйте одинарные кавычки при необходимости, запятую в конце ставить не нужно). Пример ответа: margin: ‘12px’
CustomInput и CustomFormInput — стилизованные компоненты в React проекте со styled-components. Что означает const CustomFormInput = styled(CustomInput)`…`
Компоненты React по своей сущности являются
Выберите верные варианты ответа. К правилам создания ключей при рендеринге списков можно отнести следующие суждения:
Команда разработчиков выбирает вариант стилизации для нового проекта на React. Требования к инструменты следующие: нужна высокая производительность — при загрузке первой страницы нужно получать только необходимый минимальный CSS; проект имеет большое количество похожих элементов, имеется вероятность конфликтов стилей из-за одинаковых названий классов; нужна возможность темизации проекта; разработчики не хотят привыкать к новому специфическому синтаксису и писать обычные CSS стили. Какой вариант стилизации наиболее предпочтителен в данном случае?
Дизайн система это
Какие компоненты авторы документации MUI относят к группе Layout?
Установите соответствие между компонентом дизайн системы MUI и группой, к которой авторы документации относят этот компонент
За что отвечает props noWrap в компоненте Typography?
За что отвечает props separator в компоненте Breadcrumbs?
К какому props компонента Breadcrumbs относится описание: Указывает максимальное количество отображаемых навигационных цепочек. Если их число превышает максимальное, будут показаны только первые itemsBeforeCollapse и последние itemsAfterCollapse с многоточием между ними? Напишите название атрибута в camelCase.
Укажите порядок действий для инициализации проекта с использованием MUI.
К какому props компонента Breadcrumbs относится описание: Если значение — true, кнопка будет занимать всю ширину своего контейнера? Напишите название атрибута в camelCase.
К какому props компонента TextField относится описание: Если значение — true, вместо input отображается элемент текстовой области textarea? Напишите название атрибута в camelCase.
К какому props компонента Slider относится описание: Степень детализации, с которой ползунок (при дискретном варианте) может перемещаться по значениям? Напишите название атрибута в camelCase.
Какое свойство отключает эффект пульсации в компоненте Button?
Какое свойство позволяет делать множественный выбор, сохраняя значение в массив, в компоненте Select?
К какому props компонента Slider относится описание: Отвечает за то, будет ли разрешена смена порядка значений. Если значение равно true, то смена порядка значений будет запрещена. Это может использоваться для того, чтобы предотвратить случайное изменение порядка значений пользователем. Напишите название атрибута в camelCase.
К какому props компонента Autocomplete относится описание: Отвечает за то, будет ли автоматически выбран первый подходящий вариант при вводе текста. Если значение равно true, то при вводе текста будет автоматически выбран первый подходящий вариант. Если значение равно false, то выбор варианта нужно будет сделать вручную. Напишите название атрибута в camelCase.
К какому props компонента Button относится описание: Отвечает за добавление иконки в конец кнопки. Вы можете указать путь к иконке или компонент иконки, который нужно отобразить. Напишите название атрибута в camelCase.
К какому props компонента Button относится описание: Позволяет выбрать внешний вид кнопки. Возможные значения: ‘text’, ‘outlined’, ‘contained’, ‘standard’, ‘inherit’, and ‘none’. Значение по умолчанию — ‘outlined’. Напишите название атрибута в camelCase.
К какому props компонента TextField относится описание: Служит для отображения текста-подсказки, который помогает пользователю понять, какую информацию нужно ввести в поле. Этот текст отображается рядом с полем и может содержать инструкции, примеры заполнения или другую полезную информацию. Напишите название атрибута в camelCase.
Какое свойство устанавливает степень детализации, с которой ползунок можно перемещать по значениям в компоненте Slider?
Какое свойство позволяет отображать элемент текстовые области вместо стандартного поля ввода в компоненте TextField?
Какие компоненты авторы документации MUI относят к группе Inputs?
В проекте используется дизайн система MUI. В заголовке страницы необходимо создать меню, состоящее из кнопок. При этом каждая из кнопок на самом деле должна являться ссылкой и вести на одну страниц приложения, либо являться якорной ссылкой на элемент. Выберите наиболее предпочтительный вариант исполнения кнопки.
Какое свойство отвечает количество элементов, отображаемых после многоточия, в случае превышения максимального количества элементов в компоненте breadcrumbs?
Какие компоненты авторы документации MUI относят к группе Feedback?
Установите соответствие между компонентом дизайн системы MUI и группой, к которой авторы документации относят этот компонент
Какое свойство отвечает за количество всегда видимых страниц до и после текущей страницы в компоненте pagination?
Какое свойство определяет поведение кнопок прокрутки, когда вкладки настроены на прокрутку, в компоненте Tabs?
К какому props компонента Avatar относится описание: Этот параметр определяет стиль аватара. Возможные значения: circle, rounded, square. Значение по умолчанию — circle. Напишите название атрибута в camelCase.
Укажите порядок действий при использовании компонентов MUI и их кастомизации.
К какому props компонента Avatar относится описание: Этот параметр является дополнительным текстом, который описывает изображение. Он используется, если изображение не может быть отображено, например, когда пользователь отключил отображение картинок в браузере. Напишите название атрибута в camelCase.
К какому props компонента Typography относится описание: Отвечает за добавление дополнительного отступа снизу текста. Когда значение равно true, снизу текста добавляется дополнительный вертикальный отступ. Напишите название атрибута в camelCase.
К какому props компонента Typography относится описание: отвечает за выравнивание текста внутри элемента. Он может принимать следующие значения: ‘left’ | ‘center’ | ‘right’ | ‘justify’. По умолчанию значение этого свойства равно ‘left’, то есть текст выравнивается по левому краю. Напишите название атрибута в camelCase.
Какое свойство определяет серьезность предупреждения – цвет предупреждения и иконку в компоненте Alert?
Какое свойство компонента Box может переопределить, каким HTML элементом будет являться этот компонент в результирующем дереве?
К какому props компонента Tooltip относится описание: Определяет задержку перед тем, как всплывающая подсказка начнет скрываться. Этот параметр принимает значение в миллисекундах и определяет, сколько времени должно пройти после того, как пользователь перестанет наводить курсор на элемент, прежде чем tooltip начнет скрываться. Напишите название атрибута в camelCase.
К какому props компонента Tooltip относится описание: Определяет, где будет отображаться всплывающая подсказка относительно элемента. Возможные значения этого свойства: ‘top’ | ‘right’ | ‘bottom’ | ‘left’ | ‘auto’ (позиция подсказки определяется автоматически в зависимости от доступного пространства и ориентации экрана). Напишите название атрибута в camelCase.
К какому props компонента Tooltip относится описание: Является обязательным свойством компонента Tooltip. Оно используется для определения содержимого всплывающей подсказки. Если это свойство не указано, то и подсказка не будет отображаться. Напишите название атрибута в camelCase.
К какому props компонента Table относится описание: Позволяет зафиксировать заголовок таблицы, чтобы он всегда был виден при прокрутке страницы. Если значение равно true, то заголовок будет зафиксирован и всегда будет виден сверху таблицы независимо от того, прокручивается ли пользователь вниз или вверх страницы. Напишите название атрибута в camelCase.
К какому props компонента Table относится описание: Управляет горизонтальным выравниванием текста в ячейке. Он может принимать значения ‘left’, ‘center’, ‘right’, и ‘justify’. Значение по умолчанию — ‘left’. Напишите название атрибута в camelCase.
Какое значение свойства максимальной ширины для компонента Container необходимо указать, если хотим ограничить ширину блока в диапазоне 600-900 px (при использовании темы по умолчанию)?
Какой атрибут установит количество столбцов, используемых компонентом Grid, для размера xl и далее в количестве восьми столбцов?
Какие компоненты авторы документации MUI относят к группе Inputs?
В проекте используется дизайн система MUI. На странице имеется список элементов, каждый из которых обернут в Tooltip. эти элементы должны иметь подсказки при наведении. Выберите наиболее предпочтительный вариант создания подсказок для повторяющихся элементов.
При необходимости переопределения стилей для одного экземпляра компонента используются атрибут:
Какие компоненты авторы документации MUI относят к группе Inputs?
Установите соответствие между компонентом дизайн системы MUI и группой, к которой авторы документации относят этот компонент
При необходимости переопределения стилей вложенных в компонент полей используют:
Для создания и переопределения стилей компонентов при некоторых состояниях документацией MUI рекомендуется использовать:
К какому props компонента Box относится описание: Этот параметр используется для указания HTML-элемента, который будет использоваться в качестве оболочки для содержимого Box. Значение по умолчанию для этого свойства — div. Напишите название атрибута в camelCase.
Укажите порядок действий при использовании компонентов MUI и их кастомизации.
К какому props компонента Box относится описание: Этот параметр используется для стилизации этого компонента с помощью стилей Material-UI. Принимает объект с CSS-свойствами, которые будут применены к компоненту Box. Напишите название атрибута в camelCase.
К какому props компонента Container относится описание: Этот параметр отвечает за то, будет ли контейнер иметь фиксированную ширину или будет растягиваться по ширине экрана. Если значение свойства равно false (по умолчанию), то контейнер будет растягиваться по ширине экрана. Если же значение true, то ширина контейнера будет равна ширине содержимого плюс отступы. Напишите название атрибута в camelCase.
К какому props компонента Container относится описание: Это свойство определяет максимальную ширину контейнера. Если содержимое контейнера превышает эту ширину, оно будет переноситься на следующую строку. Если свойство не указано, контейнер будет занимать всю ширину экрана. Напишите название атрибута в camelCase.
Какая группа цветов не включена в стандартную палитру MUI?
Какой цветовой токен не содержится в группе primary в стандартной палитре MUI?
К какому props компонента Grid относится описание: Это свойство определяет направление, в котором будет происходить разбиение контента на гриды. Оно может принимать значения “row” (по строкам), “column” (по столбцам) и т.д.. Значение по умолчанию — “row”. Напишите название атрибута в camelCase.
К какому props компонента Grid относится описание: Количество столбцов для размера 1200-1535 px (для темы по умолчанию), используемых элементом сетки, задается числом. Это число не может превышать общее количество столбцов в контейнере (по умолчанию равное 12). Значение “auto” заставляет ширину элемента сетки подстраиваться под его содержимое. Если этому свойству присвоено значение false, оно игнорируется. А если ему присвоено значение true, ширина элемента сетки возрастает, чтобы занять все доступное пространство в контейнере сетки. Напишите название атрибута в camelCase.
К какому props компонента Grid относится описание: Позволяет указать расстояние между столбцами в гриде. Напишите название атрибута в camelCase.
К какому props компонента LinearProgress относится описание: Этот параметр определяет стиль прогресс-бара. Он может быть ‘determinate’ (определенный), ‘indeterminate’ (неопределенный) или ‘static’ (статический). Значение по умолчанию — ‘determinate’. Напишите название атрибута в camelCase.
К какому props компонента Pagination относится описание: Определяет, сколько страниц будет отображаться до и после текущей страницы. Напишите название атрибута в camelCase.
Стандартная тема содержит следующие точки адаптивности:
Какое свойство компонента Box может переопределить, каким HTML элементом будет являться этот компонент в результирующем дереве?
Какие компоненты авторы документации MUI относят к группе Surfaces?
В проекте используется дизайн система MUI. На главной странице расположены элементы, которые рендерятся из массивов объектов — данных, получаемых от сервера. Как правило, данные приходят с сервера дольше чем за 1 секунду. Данных о прогрессе загрузки сервер не предоставляет. Укажите наиболее предпочтительный вариант реализации интерфейса.
Зачем нужны фреймворки?
Большинство популярных CSS-фреймворков включают в себя следующие возможности
Что значит “низкоуровневый” в контексте Tailwind?
Как используя синтаксис служебных классов Tailwind прописать псевдоэлемент placeholder для элемента? Напишите полностью модификатор, который необходимо поместить перед самим классом.
Какие варианты переиспользования верстки применимы к Tailwind?
Укажите порядок действий при добавлении Tailwind в проект.
Установите соответствие служебных классов Tailwind и CSS свойств.
Какой размер текста можно считать максимальным из предустановленных в абсолютных единицах измерения в Tailwind? Напишите полное название класса вместе с его базовой частью.
Какой служебный класс Tailwind стоит использовать для сохранения переносов при верстке текста состоящего из иероглифов (перенос символа может повлиять на смысл текста)? Напишите полное название класса вместе с его базовой частью.
Какого (каких) из служебных классов семейства “ширина” нет по умолчанию в Tailwind?
Какого (каких) из служебных классов семейства “поля” нет по умолчанию в Tailwind?
Какое количество символов устанавливает утилита max-w-prose в качестве максимального и оптимального для удобства чтения текста.
Расставьте служебные классы по возрастанию значения высоты строки, которые они применяют к элементу.
Установите соответствие служебного класса Tailwind и CSS правила.
Напишите полное название класса, с помощью которого можно указать отступы в размере 1 пиксель между дочерними элементами.
Напишите полное название класса, с помощью которого можно указать разделители в размере 1 пиксель между дочерними элементами.
Напишите полное название класса, с помощью которого можно указать скругление блока в размере 4 пикселей только в левом верхнем углу.
Напишите полную комбинацию классов через запятую, с помощью которой можно указать границу блока в размере 1 пиксель красного цвета red-500 из палитры Tailwind.
Выберите полное название класса, с помощью которого можно указать отступ границы (ring) блока в размере 8 пикселей.
Какие семейства классов можно использовать для создания границы элементу?
На странице имеется элемента анонса новостной статьи. Элемент состоит из изображения, тегов и короткого текста. Необходимо ограничить размер текста таким образом, чтобы он занимал одинаковое количество строк. Выберите оптимальный вариант того, как это можно реализовать средствами Tailwind.
В шапке веб-страницы имеется список повторяющихся кнопок, заключенный в flex-контейнер. Происходит выравнивание по центру как по горизонтальной, так и по вертикальной оси. Необходимо объединить элементы таким образом, чтобы существовала внешняя скругленная граница, а также границы между элементами. Каким образом стоит это сделать?
Что такое переход в CSS/Tailwind?
Какие свойства можно анимировать с помощью Tailwind переходов?
В чем разница между переходами и анимациями в CSS?
Как с помощью служебного класса Tailwind указать длительность перехода в 1 секунду? Классы transition и класс с указанием функции изменения уже указан. Напишите полное название класса.
Какие варианты длительности перехода есть в Tailwind по умолчанию?
Укажите служебные классы в порядке увеличения сдвига по оси X (от наименьшего по модулю к наибольшему)
Установите соответствие служебных классов Tailwind и CSS свойств.
С помощью какого служебного класса tailwind можно сделать следующую трансформацию с элементом: уменьшение элемента на 25% по обеим осям. Напишите служебный класс полностью.
С помощью какой утилиты можно сделать элемент, охватывающий 3 строки в Grid контейнере? Напишите полное название класса.
Какой служебный класс Tailwind позволяет создать 4 строки в Grid контейнере?
Какой вариант является правильным для создания горизонтальной цепочки элементов с использованием Flexbox?
Какой служебный класс Tailwind позволяет создать 3 колонки в Grid контейнере? Напишите служебный класс полностью.
Расставьте служебные классы по возрастанию в порядке отображения слоя от самого заднего до самого переднего.
Установите соответствие размеров блока, которому задан служебный класс container.
С помощью какого служебного класса tailwind можно сделать следующую трансформацию с элементом: вернуть элемент вокруг своей оси на 90 градусов по часовой стрелке. Напишите служебный класс полностью.
С помощью какого класса из семейства aspect-ratio можно указать соотношение сторон изображению в соотношении 16 к 9? Напишите полное название класса.
Укажите служебный класс, которому соответствует сдвиг по оси X в размере 50%. Напишите полное название класса.
Напишите полную комбинацию классов через запятую, с помощью которой можно создать flex контейнер, в котором элементы располагаются в строку, начиная от правого края.
Как можно управлять порядком элементов в контейнере Flexbox?
Выберите все возможные варианты класса animate из предустановленной темы Tailwind?
Имеется grid контейнер, который содержит 7 дочерних элементов. Необходимо создать сетку из трех столбцов с конфигурацией 1-2-1-1-1-1-2, где 1 и 2 — количество занимаемых элементом столбцов. Каким образом стоит это сделать?
Необходимо расположить footer страницы внизу всех блоков. При этом, если на странице мало контента (body занимает сильно меньше чем 100vh), он должен оставаться внизу экрана, а не идти сразу за последним блоком. Каким образом стоит это сделать?
Какой из вариантов фона может не подойти для темного варианта темы?
Какой из вариантов цвета текста может не подойти для темного варианта темы, если фон контейнера dark:bg-slate-900?
Какое поле в теме Tailwind содержит размеры для всех перечисленных свойств: padding, margin, width, height, maxHeight, flex-basis, gap, inset, space, translate, scrollMargin, scrollPadding, textIndent?
Какой класс позволяет изменить общий размер типографики на 1.25rem внутри контейнера, к которому применен класс prose и действует плагин typography? Напишите полное название класса.
Какие варианты создания темной темы применимы к Tailwind?
Расшифруйте аббревиатуру HTML?
Установите соответствие условных обозначений размера и реального размера в плагине @tailwindcss/container-queries.
Как получить конфигурацию Tailwind со значениями по умолчанию? Напишите полностью консольную команду.
Чтобы переопределить стандартную палитру Tailwind, не расширяя ее, необходимо использовать этот объект. Напишите полный путь до него в конфигурации, начиная с theme.
Выберите верный вариант подключения к проекту в качестве контента всех html файлов, которые содержатся в директории src и всех ее дочерних директориях.
За что отвечает поле theme в файле конфигурации Tailwind?
Имеется контейнер с классом @container/main. Используется плагин @tailwindcss/container-queries. Напишите полное название класса вместе с модификаторами, который позволит одному из дочерних блоков подчеркнуть текст, в тех случаях когда размер контейнера превышает `17.5`.
Укажите порядок, в котором стоит расположить импорты в корневой CSS файл.
Установите соответствие между директивой Tailwind и ее предназначением.
Какое поле из конфигурации настраивает пути ко всем вашим HTML-шаблонам, компонентам JavaScript и любым другим исходным файлам, которые содержат имена классов Tailwind? Укажите ключ объекта.
Какой класс позволяет контейнеру, к которому применен класс prose и действует плагин typography, активировать темную версию темы? Напишите полное название класса вместе с модификатором.
Как маркировать контейнер в плагине @tailwindcss/container-queries, чтобы можно было отсчитывать от него контрольные точки адаптивности? Напишите полное название класса.
Имеется контейнер с классом @container. Используется плагин @tailwindcss/container-queries. Напишите полное название класса вместе с модификаторами, который позволит одному из дочерних блоков подчеркнуть текст, в тех случаях когда размер контейнера превышает `32rem`.
Какого значения для утилиты aspectRatio нет в теме Tailwind по умолчанию?
Что относится к процессу темизации проекта на Tailwind?
Имеется веб-страница в светлом оформлении, верстка выполнена на Tailwind. Заказчик просит в кратчайшие сроки создать темный вариант дизайна веб-страницы, не прибегая к услугам веб-дизайнера и ставит кратчайшие сроки. Каким образом стоит это выполнить?
Какой тег используется для создания заголовка первого уровня в HTML?
Что такое “минимальный CSS”?
Напишите полное название класса, с помощью которого можно указать отступы в размере 14 пикселей между дочерними элементами.
Напишите полное название класса, с помощью которого можно указать отступ границы (outline) блока в размере 2 пикселей.
Что используется для создания блочных элементов в CSS?
Укажите в порядке возрастания непрозрачности (от прозрачного до непрозначного) значения служебного класса opacity в Tailwind.
Какой знак пропущен в записи: “˂______________– Ваш комментарий –˃”
Какой служебный класс Tailwind позволяет создать 4 строки в Grid контейнере? Напишите полное название класса.
Напишите полную комбинацию классов через запятую, с помощью которой можно создать flex контейнер, в котором элементы располагаются в столбец, начиная от нижнего края.
Какой служебный класс Tailwind позволяет создать 3 колонки в Grid контейнере?
Какое слово пропущено: _______ определяет порядок применения стилей к элементам веб-страницы на основе специфичности селекторов и порядка их объявления
Напишите полное название класса, которое указывает браузеру, как обрабатывать поведение прокрутки элемента. Значение у класса должно быть следующее — прокрутка будет происходить плавно без прерываний, вызванных закрытием и появлением отдельных дочерних элементов во время анимации.
Что определяет как элемент будет отображаться в браузере, включая отступы, границы и поля?
Установите соответствие между названиями плагинов Tailwind и функциями, которые они выполняют
Имеется контейнер с классом @container/main. Используется плагин @tailwindcss/container-queries. Напишите полное название класса вместе с модификаторами, который позволит одному из дочерних блоков подчеркнуть текст, в тех случаях когда размер контейнера превышает `56rem`.
Как создать ссылку в HTML?
Какого слова не хватает: “________: ˂выбранный цвет˃;”?
Напишите расшифровку аббревиатуры CSS
Какой тег используется для создания заголовка первого уровня?
Какой атрибут используется для указания ссылки на внешний файл CSS?
Какие теги используются для создания списка в HTML?
Какое свойство CSS используется для управления прозрачностью элемента?
Какой подход к верстке можно охарактеризовать следующим образом: подход к организации CSS, который позволяет использовать изолированные уникальные имена классов и идентификаторов для каждого компонента?
Выберите вариант правильного неименованного импорта компонента
Выберите вариант правильного неименованного экспорта компонента
Напишите полное название файла SCSS модуля стилей footer с расширением файла.
При рендеринге списков в качестве ключей правильнее использовать. Выберите верные варианты ответа.
Расположите подстроки названия класса, сгенерированного CSS модулем component, в порядке их написания в результирующем классе.
Установите соответсвие с понятиями из React и их значениями
Напишите полное название файла CSS модуля стилей component с расширением файла.
Какой класс был указан изначально в файле CSS модуля component, если в DOM дереве элемент имеет класс component_select__EVvnn. Конфигурация CSS модулей имеет стандартную настройку. Напишите полное название класса.
Выберите валидный фрагмент JSX разметки
В разметке компонента находится следующая структура: { false? ˂h1˃Заголовок1˂/h1˃ : null }. Какой их фрагментов разметки окажется в результирующей верстки?
В проекте используются CSS модули. Элемент в DOM дереве имеет класс component_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку. Какая из частей класса содержит уникальный идентификатор класса, которая позволяет создавать уникальные изолированные стили? Запишите ответ в виде строки.
Укажите порядок, в котором выполняются консольные команды при инициализации проекта.
В проекте используются CSS модули. Элемент в DOM дереве имеет класс card_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку. Какое название было у файла CSS модуля, в котором был определен этот класс? Запишите ответ в виде строки — полное название файла с раширением.
В React используется специальная разновидность разметки — JSX. Напишите полное название атрибута onclick применимо к JSX разметке.
В React используется специальная разновидность разметки — JSX. Напишите полное название атрибута data-name применимо к JSX разметке.
В React используется специальная разновидность разметки — JSX. Напишите полное название атрибута class применимо к JSX разметке.
В разметке компонента находится следующая структура: { false? ˂h1˃Заголовок1˂/h1˃ : ˂h2˃Заголовок2˂/h2˃ }. Какой их фрагментов разметки окажется в результирующей верстки?
Выберите верные варианты ответа. К правилам создания ключей при рендеринге списков можно отнести следующие суждения:
Имеется компонент списка новостных анонсов. Предположим, что у нас есть массив данных товаров, которые мы хотим отобразить в виде карточек новостных анонсов, который пришел в этот компонент посредством props. Здесь мы предполагаем, что данные о товарах будут переданы в виде массива объектов с полями order, id, title, price, imageUrl и description. При рендеринге списков какой вариант задания ключей самый оптимальный?
Приложение на React имеет большое количество компонентов (карточки новостей, карточки профилей и так далее). Необходимо создать изолированные стили, которые будет удобно поддерживать. При этом Какой способ стилизации компонентов из предложенных является оптимальным?
Пользуясь базовым вариантом стилизации в Styled Components, стилизованный CardComponent из div задается следующим образом.
CustomButton и CustomFormButton — стилизованные компоненты в React проекте со styled-components. Что означает const CustomFormButton = styled(CustomButton)`…`
Styled components это
В проекте используется Styled Components. Необходимо элементу CustomInput задать скругление внешние отступы в размере 12 пикселей. Заготовка выглядит следующим образом: const CustomInput = styled.input«. Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы. Пример ответа: margin: 12px;
Выберите характерные аспекты для Styled Components
Укажите порядок, в котором выполняются консольные команды при инициализации проекта c JSS.
Какой метод используется для добавления события к элементу в JavaScript?
Ниже представлен некоторый фрагмент JSX разметки. ˂div˃{[‘d’,’k’,’j’,’0’,’0’].map((item)=˃(item))}˂div/˃ Напишите строку, которая будет находится внутри элемента div после рендеринга.
Как добавить Styled Components в проект на React? Напишите полностью консольную команду для установки этого пакета через пакетный менеджер Yarn.
Как реализовано взаимодействие стилей и JavaScript в Styled Components?
В проекте используется JSS. Необходимо некоторому элементу задать жирность текста (bold). Заготовка выглядит следующим образом: const useStyles = createUseStyles({myElement: {…}). Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы (используйте одинарные кавычки при необходимости, запятую в конце ставить не нужно). Пример ответа: margin: ‘12px’
Какой вариант написания стилей используется в Styled Components?
Установите соответствие между вариантом стилизации в React проекте и его описанием.
В проекте используется JSS. Необходимо некоторому элементу задать скругление границ углов в размере 3 rem. Заготовка выглядит следующим образом: const useStyles = createUseStyles({myElement: {…}). Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы (используйте одинарные кавычки при необходимости, запятую в конце ставить не нужно). Пример ответа: margin: ‘12px’
В проекте используется Styled Components. Необходимо элементу CustomInput задать скругление границ углов в размере 14 пикселей. Заготовка выглядит следующим образом: const CustomInput = styled.input«. Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы. Пример ответа: margin: 12px;
Как добавить JSS в проект на React? Напишите полностью консольную команду для установки этого пакета через пакетный менеджер Yarn.
Какое свойство используется для добавления тени вокруг элемента?
Выберите верные факты о React
Команда разработчиков выбирает вариант стилизации для нового проекта на React. Требования к инструменты следующие: проект имеет большое количество похожих элементов, имеется вероятность конфликтов стилей из-за одинаковых названий классов; нужна возможность темизации проекта; есть необходимость писать стили в виде объектов; нужна расширенная интеграция с JavaScript. Какой вариант стилизации наиболее предпочтителен в данном случае?
Какое свойство устанавливает задержку ожидания перед скрытием всплывающей подсказки, но не влияет на задержку отображение всплывающей подсказки (компонент Tooltip)??
Какое свойство устанавливает значение индикатора прогресса в процентах для детерминированного варианта компонента CircularProgress?
Какой вариант значения свойства variant в компоненте LinearProgress стоит использовать, если значение прогресса отсутствует?
К какому props компонента Button относится описание: Отвечает за добавление иконки в начало кнопки. Вы можете указать путь к иконке или компонент иконки, который нужно отобразить. Напишите название атрибута в camelCase.
Какие компоненты авторы документации MUI относят к группе Data Display?
Укажите порядок действий для инициализации проекта с использованием MUI.
Установите соответствие между компонентом дизайн системы MUI и группой, к которой авторы документации относят этот компонент
К какому props компонента Button относится описание: Позволяет задать размер кнопки. Возможные значения — ‘small’, ‘medium’, ‘large’, ‘xLarge’, и ‘jumbo’. Значение по умолчанию — ‘medium’. Напишите название атрибута в camelCase.
К какому props компонента Button относится описание: Указывает, должна ли кнопка занимать всю ширину родительского элемента. Если значение равно true, кнопка будет занимать всю доступную ширину. Значение по умолчанию — false. Напишите название атрибута в camelCase.
Какое свойство отключает эффект пульсации в компоненте Tabs?
Какое свойство компонента Box может переопределить, каким HTML элементом будет являться этот компонент в результирующем дереве?
К какому props компонента TextField относится описание: Количество строк, которое должно быть в текстовом поле. Напишите название атрибута в camelCase.
Установите соответствие между названием props и его типом для компонента Button.
К какому props компонента Button относится описание: Отключает анимацию нажатия на кнопку. Если значение равно true, анимация не будет отображаться. Значение по умолчанию — false. Напишите название атрибута в camelCase.
К какому props компонента TextField относится описание: Указывает на наличие ошибки валидации. Напишите название атрибута в camelCase.
К какому props компонента TextField относится описание: Это текст, который отображается в текстовом поле, пока пользователь не введет свой собственный текст. Он используется для подсказки пользователю о том, что нужно ввести в поле. Напишите название атрибута в camelCase.
К какому props компонента TextField относится описание: Этот параметр определяет, будет ли текстовое поле доступно для редактирования. Если значение равно true, поле не может быть изменено пользователем. Напишите название атрибута в camelCase.
Какое свойство позволяет отображать элемент текстовые области вместо стандартного поля ввода в компоненте TextField?
Какие компоненты авторы документации MUI относят к группе Navigation?
В проекте используется дизайн система MUI. На странице имеется список элементов, каждый из которых обернут в Tooltip. эти элементы должны иметь подсказки при наведении. Выберите наиболее предпочтительный вариант создания подсказок для повторяющихся элементов.
В проекте используется дизайн система MUI. На главной странице расположены элементы, которые рендерятся из массивов объектов — данных, получаемых от сервера. Как правило, данные приходят с сервера дольше чем за 1 секунду. Данных о прогрессе загрузки сервер не предоставляет. Укажите наиболее предпочтительный вариант реализации интерфейса.
Какое свойство позволяет делать множественный выбор, сохраняя значение в массив, в компоненте Select?
Какое свойство устанавливает степень детализации, с которой ползунок можно перемещать по значениям в компоненте Slider?
К какому props компонента Breadcrumbs относится описание: Указывает максимальное количество отображаемых навигационных цепочек. Если их число превышает максимальное, будут показаны только первые itemsBeforeCollapse и последние itemsAfterCollapse с многоточием между ними? Напишите название атрибута в camelCase.
Какое свойство отвечает за количество всегда видимых страниц до и после текущей страницы в компоненте pagination?
К какому props компонента TextField относится описание: Если значение — true, вместо input отображается элемент текстовой области textarea? Напишите название атрибута в camelCase.
К какому props компонента Tooltip относится описание: Определяет задержку появления подсказки при наведении курсора на элемент. Значение указывается в миллисекундах. Если значение равно 0, подсказка появляется сразу при наведении. Если задать значение больше нуля, то подсказка появится через указанное количество миллисекунд. Напишите название атрибута в camelCase.
Какое значение свойства максимальной ширины для компонента Container необходимо указать, если хотим ограничить ширину блока в диапазоне 1200-1536 px (при использовании темы по умолчанию)?
Какое свойство определяет серьезность предупреждения – цвет предупреждения и иконку в компоненте Alert?
К какому props компонента Slider относится описание: Степень детализации, с которой ползунок (при дискретном варианте) может перемещаться по значениям? Напишите название атрибута в camelCase.
Укажите порядок действий при создании компонента кнопки с MUI.
Установите соответствие между названием props и его типом для компонента Button.
К какому props компонента Tooltip относится описание: Определяет, будет ли отображаться стрелка у tooltip. Если значение true, стрелка будет отображаться. Если false, стрелка будет скрыта. По умолчанию имеет значение false. Напишите название атрибута в camelCase.
К какому props компонента Tooltip относится описание: Определяет, где будет отображаться всплывающая подсказка относительно элемента. Возможные значения этого свойства: ‘top’ | ‘right’ | ‘bottom’ | ‘left’ | ‘auto’ (позиция подсказки определяется автоматически в зависимости от доступного пространства и ориентации экрана). Напишите название атрибута в camelCase.
К какому props компонента Table относится описание: Управляет горизонтальным выравниванием текста в ячейке. Он может принимать значения ‘left’, ‘center’, ‘right’, и ‘justify’. Значение по умолчанию — ‘left’. Напишите название атрибута в camelCase.
К какому props компонента Avatar относится описание: Этот параметр определяет стиль аватара. Возможные значения: circle, rounded, square. Значение по умолчанию — circle. Напишите название атрибута в camelCase.
Какой атрибут установит количество столбцов, используемых компонентом Grid, для размера xs в количестве трех столбцов?
Какие компоненты авторы документации MUI относят к группе Data Display?
В проекте используется дизайн система MUI. Для одного из элементов Button необходимо переопределить стили для состояния disabled. Укажите наиболее предпочтительный способ в соответствии с дизайн системой MUI.
В проекте используется дизайн система MUI. Задача создания кастомной темы. Необходимо добавить в палитру новый ключевой цвет. При этом заранее известен только базовый вариант цвета. Укажите наиболее предпочтительный вариант создания дополнительного цвета.
При необходимости переопределении стилей для повторно используемых компонентов применяют:
Стандартная тема содержит следующие точки адаптивности:
К какому props компонента Typography относится описание: отвечает за выравнивание текста внутри элемента. Он может принимать следующие значения: ‘left’ | ‘center’ | ‘right’ | ‘justify’. По умолчанию значение этого свойства равно ‘left’, то есть текст выравнивается по левому краю. Напишите название атрибута в camelCase.
Какое значение свойства максимальной ширины для компонента Container необходимо указать, если хотим ограничить ширину блока в диапазоне 0-600 px (при использовании темы по умолчанию)?
К какому props компонента Grid относится описание: Позволяет указать расстояние между строками в гриде. Напишите название атрибута в camelCase.
Для создания и переопределения стилей компонентов при некоторых состояниях документацией MUI рекомендуется использовать:
К какому props компонента Grid относится описание: Количество столбцов для размера 900-1200 px (для темы по умолчанию), используемых элементом сетки, задается числом. Это число не может превышать общее количество столбцов в контейнере (по умолчанию равное 12). Значение “auto” заставляет ширину элемента сетки подстраиваться под его содержимое. Если этому свойству присвоено значение false, оно игнорируется. А если ему присвоено значение true, ширина элемента сетки возрастает, чтобы занять все доступное пространство в контейнере сетки. Напишите название атрибута в camelCase.
К какому props компонента Table относится описание: Позволяет зафиксировать заголовок таблицы, чтобы он всегда был виден при прокрутке страницы. Если значение равно true, то заголовок будет зафиксирован и всегда будет виден сверху таблицы независимо от того, прокручивается ли пользователь вниз или вверх страницы. Напишите название атрибута в camelCase.
К какому props компонента Autocomplete относится описание: Отвечает за то, будет ли автоматически выбран первый подходящий вариант при вводе текста. Если значение равно true, то при вводе текста будет автоматически выбран первый подходящий вариант. Если значение равно false, то выбор варианта нужно будет сделать вручную. Напишите название атрибута в camelCase.
Какое свойство устанавливает задержку ожидания перед скрытием всплывающей подсказки, но не влияет на задержку отображение всплывающей подсказки (компонент Tooltip)?
Укажите порядок действий при создании селекта (компонента с выпадающим списком) кнопки с MUI.
В проекте используется дизайн система MUI. В заголовке страницы необходимо создать меню, состоящее из кнопок. При этом каждая из кнопок на самом деле должна являться ссылкой и вести на одну страниц приложения, либо являться якорной ссылкой на элемент. Выберите наиболее предпочтительный вариант исполнения кнопки.
Какие компоненты авторы документации MUI относят к группе Data Display?
По задумке дизайнера в проекте с Tailwind используется шрифт ‘Montserrat’. Необходимо переопределить шрифт по умолчанию на ‘’Montserrat’’. Укажите верную последовательность действий.
Установите соответствие между выражением условного рендеринга и его результатом
Установите соответствие между цветами палитры по умолчанию и их логическим предназначением.