Программирование на языке верстки HTML и стилей CSS - ответы на вопросы

Какой служебный класс Tailwind позволяет создать 4 строки в Grid контейнере? Напишите полное название класса.

Какое свойство устанавливает значение индикатора прогресса в процентах для детерминированного варианта компонента CircularProgress?

Какого (каких) из служебных классов семейства “поля” нет по умолчанию в Tailwind?

Как добавить JSS в проект на React? Напишите полностью консольную команду для установки этого пакета через пакетный менеджер Yarn.

В проекте используются CSS модули. Элемент в DOM дереве имеет класс component_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку.
Какая из частей класса содержит уникальный идентификатор класса, которая позволяет создавать уникальные изолированные стили? Запишите ответ в виде строки.

Какой размер текста можно считать максимальным из предустановленных в абсолютных единицах измерения в Tailwind? Напишите полное название класса вместе с его базовой частью.

Какого (каких) из служебных классов семейства “ширина” нет по умолчанию в Tailwind?

Какое количество символов устанавливает утилита max-w-prose в качестве максимального и оптимального для удобства чтения текста.

Расставьте служебные классы по возрастанию значения высоты строки, которые они применяют к элементу.
1) leading-none
2) leading-tight
3) leading-snug
4) leading-normal
5) leading-relaxed
6) leading-loose

Установите соответствие служебного класса Tailwind и CSS правила.

1. border-radius: 9999px;
2. border-radius: 0.5rem; /* 8px */
3. border-radius: 0.25rem; /* 4px */
4. border-radius: 1rem; /* 16px */
5. rounded-full
6. rounded-lg
7. rounded
8. rounded-2xl

Как можно управлять порядком элементов в контейнере Flexbox?

За что отвечает поле theme в файле конфигурации Tailwind?

Какого значения для утилиты aspectRatio нет в теме Tailwind по умолчанию?

Какой подход к верстке можно охарактеризовать следующим образом: подход к организации CSS, который позволяет использовать изолированные уникальные имена классов и идентификаторов для каждого компонента?

Расположите подстроки названия класса, сгенерированного CSS модулем component, в порядке их написания в результирующем классе.
1) component
2) _
3) select
4) __
5) axqqx

Укажите порядок, в котором выполняются консольные команды при инициализации проекта.
1) npx create-react-app my-app
2) cd my-app
3) yarn add ˂необходимые пакеты˃
4) yarn start

В React используется специальная разновидность разметки - JSX. Напишите полное название атрибута onclick применимо к JSX разметке.

Styled components это

К какому props компонента Button относится описание: Отвечает за добавление иконки в начало кнопки. Вы можете указать путь к иконке или компонент иконки, который нужно отобразить. Напишите название атрибута в camelCase.

Какое свойство отключает эффект пульсации в компоненте Tabs?

Установите соответствие между названием props и его типом для компонента Button.

1. 'contained' | 'outlined' | 'text' | string
2. boolean
3. string
4. elementType
5. variant
6. disabled
7. href
8. component

В проекте используется дизайн система MUI. На главной странице расположены элементы, которые рендерятся из массивов объектов - данных, получаемых от сервера. Как правило, данные приходят с сервера дольше чем за 1 секунду. Данных о прогрессе загрузки сервер не предоставляет. Укажите наиболее предпочтительный вариант реализации интерфейса.

Какое свойство устанавливает степень детализации, с которой ползунок можно перемещать по значениям в компоненте Slider?

Установите соответствие между названием props и его типом для компонента Button.

1. align
2. noWrap
3. component
4. variant
5. 'center' | 'inherit' | 'justify' | 'left' | 'right'
6. boolean
7. elementType
8. 'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2'

К какому props компонента Typography относится описание: отвечает за выравнивание текста внутри элемента. Он может принимать следующие значения: ‘left’ | ‘center’ | ‘right’ | ‘justify’. По умолчанию значение этого свойства равно ‘left’, то есть текст выравнивается по левому краю. Напишите название атрибута в camelCase.

Установите соответствие между цветами палитры по умолчанию и их логическим предназначением.

1. для индикации потенциально опасных действий или важных сообщений
2. для основных элементов интерфейса
3. для вторичных элементов интерфейса
4. для выделения нейтральной информации
5. для индикации успешного завершения действия, инициированного пользователем
6. для элементов, о которых пользователь должен быть осведомлен
7. error
8. primary
9. secondary
10. warning
11. success
12. info

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

Какой класс позволяет изменить общий размер типографики на 1.25rem внутри контейнера, к которому применен класс prose и действует плагин typography? Напишите полное название класса.

Установите соответствие между директивой Tailwind и ее предназначением.

1. Подключает дополнительные классы для вариантов служебных утилит (наведение, фокус, темный режим и тд.).
2. Подключает служебные классы Tailwind и любые служебные классы, зарегистрированные подключенными к проекту плагинами.
3. Подключает базовые классы компонентов Tailwind и любые классы компонентов, зарегистрированные подключенными к проекту плагинами.
4. Подключает базовые стили Tailwind и любые базовые стили, зарегистрированные подключенными к проекту плагинами.
5. @tailwind variants
6. @tailwind utilities
7. @tailwind components
8. @tailwind base

Какое свойство CSS используется для управления прозрачностью элемента?

Выберите вариант правильного неименованного импорта компонента

Какой вариант написания стилей используется в Styled Components?

Установите соответствие между вариантом стилизации в React проекте и его описанием.

1. это способ стилизации компонентов, который позволяет темизировать проект, используется обычную CSS нотацию, освобождает от работы с классами.
2. способ стилизации, имеющий расширенную интеграцию с jаvascript
3. это способ организации, при котором каждому компоненту присваивается уникальный набор классов и идентификаторов, позволяет избежать конфликтов имен и улучшает изоляцию стилей.
4. привычный способ стилизации, используется в create-react-app по умолчанию
5. Styled Components
6. JSS
7. CSS modules
8. CSS

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

Какой вариант значения свойства variant в компоненте LinearProgress стоит использовать, если значение прогресса отсутствует?

Укажите порядок действий для инициализации проекта с использованием MUI.
1) npx create-react-app project
2) cd project
3) yarn add @mui/material @emotion/react @emotion/styled
4) yarn start

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

К какому props компонента Breadcrumbs относится описание: Указывает максимальное количество отображаемых навигационных цепочек. Если их число превышает максимальное, будут показаны только первые itemsBeforeCollapse и последние itemsAfterCollapse с многоточием между ними? Напишите название атрибута в camelCase.

К какому props компонента Tooltip относится описание: Определяет, где будет отображаться всплывающая подсказка относительно элемента. Возможные значения этого свойства: ‘top’ | ‘right’ | ‘bottom’ | ‘left’ | ‘auto’ (позиция подсказки определяется автоматически в зависимости от доступного пространства и ориентации экрана). Напишите название атрибута в camelCase.

При необходимости переопределении стилей для повторно используемых компонентов применяют:

К какому props компонента Grid относится описание: Позволяет указать расстояние между строками в гриде. Напишите название атрибута в camelCase.

Установите соответствие между выражением условного рендеринга и его результатом

1. some_string
2. some_string_1
3. some_string_2
4. null
5. {false ? “some_string_2” : some_string_1}
6. {false ? “some_string_1”: “some_string_2”}
7. {true ? null : “some_string”}
8. {true ? “some_string” : null}

Укажите порядок действий при добавлении Tailwind в проект.
1) инициализируем проект
2) добавляем в проект пакет tailwindcss
3) создаем конфигурацию проекта
4) устанавливаем пути к файлам где будем использовать
5) В src/input.css добавляем базовые директивы
6) Запускаем процесс сборки с подпиской на изменения

Установите соответствие служебных классов Tailwind и CSS свойств.

1. text-overflow
2. word-break
3. letter-spacing
4. line-height
5. text-ellipsis
6. break-keep
7. tracking
8. leading

Выберите полное название класса, с помощью которого можно указать отступ границы (ring) блока в размере 8 пикселей.

Что такое переход в CSS/Tailwind?

Какие свойства можно анимировать с помощью Tailwind переходов?

Укажите служебные классы в порядке увеличения сдвига по оси X (от наименьшего по модулю к наибольшему)
1) translate-x-0
2) translate-x-px
3) translate-x-0.5
4) translate-x-1
5) translate-x-1.5

Расставьте служебные классы по возрастанию в порядке отображения слоя от самого заднего до самого переднего.
1) 0
2) 10
3) 20
4) 30
5) 40
6) 50

Чтобы переопределить стандартную палитру Tailwind, не расширяя ее, необходимо использовать этот объект. Напишите полный путь до него в конфигурации, начиная с theme.

Что используется для создания блочных элементов в CSS?

Установите соответствие между названиями плагинов Tailwind и функциями, которые они выполняют

1. добавляет новые варианты размеров, которые позволяют вам стилизовать элемент на основе размеров родителя, отмеченного специальным образом.
2. добавляет набор классов, которые можно использовать для быстрого добавления разумных типографских стилей к блокам контента, которые поступают из таких источников, как маркдаун или база данных CMS.
3. добавляет упорядоченный уровень сброса формы, который упрощает стилизацию элементов формы с помощью классов утилит.
4. является альтернативой встроенной поддержке aspect-ratio, которая работает в старых браузерах, и добавляет классы , которые могут дать элементу фиксированное соотношение сторон.
5. container-queries
6. typography
7. forms
8. aspect-ratio

Выберите характерные аспекты для Styled Components

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

Установите соответствие между компонентом дизайн системы MUI и группой, к которой авторы документации относят этот компонент

1. Box
2. Tabs
3. Avatar
4. Text Field
5. Layout
6. Navigation
7. Data display
8. Inputs

Какое свойство позволяет отображать элемент текстовые области вместо стандартного поля ввода в компоненте TextField?

Какое значение свойства максимальной ширины для компонента Container необходимо указать, если хотим ограничить ширину блока в диапазоне 1200-1536 px (при использовании темы по умолчанию)?

К какому props компонента Table относится описание: Управляет горизонтальным выравниванием текста в ячейке. Он может принимать значения 'left', 'center', 'right', и 'justify'. Значение по умолчанию — 'left'. Напишите название атрибута в camelCase.

В проекте используется дизайн система MUI. Задача создания кастомной темы. Необходимо добавить в палитру новый ключевой цвет. При этом заранее известен только базовый вариант цвета. Укажите наиболее предпочтительный вариант создания дополнительного цвета.

В проекте используется дизайн система MUI. В заголовке страницы необходимо создать меню, состоящее из кнопок. При этом каждая из кнопок на самом деле должна являться ссылкой и вести на одну страниц приложения, либо являться якорной ссылкой на элемент. Выберите наиболее предпочтительный вариант исполнения кнопки.

В проекте используется дизайн система MUI. Для одного из элементов Button необходимо переопределить стили для состояния disabled. Укажите наиболее предпочтительный способ в соответствии с дизайн системой MUI

Что значит “низкоуровневый” в контексте Tailwind?

Как с помощью служебного класса Tailwind указать длительность перехода в 1 секунду? Классы transition и класс с указанием функции изменения уже указан. Напишите полное название класса.

В разметке компонента находится следующая структура:
{ false? ˂h1˃Заголовок1˂/h1˃ : null }.
Какой их фрагментов разметки окажется в результирующей верстки?

Установите соответствие условных обозначений размера и реального размера в плагине @tailwindcss/container-queries.

1. @container (min-width: 48rem /* 768px */)
2. @container (min-width: 36rem /* 576px */)
3. @container (min-width: 20rem /* 320px */)
4. @container (min-width: 24rem /* 384px */)
5. @3xl
6. @xl
7. @xs
8. @sm

Какого слова не хватает: “________: ˂выбранный цвет˃;”?

Установите соответсвие с понятиями из React и их значениями

1. процесс отображения списка данных в пользовательском интерфейсе с использованием компонентов React.
2. позволяет рендерить различные компоненты или фрагменты кода в зависимости от выполнения определенного условия.
3. механизм передачи данных (атрибутов) от одного компонента к другому.
4. используются для определения уникальности элементов в списке.
5. lists rendering
6. conditional rendering
7. props
8. keys

Какое свойство отвечает за количество всегда видимых страниц до и после текущей страницы в компоненте pagination?

В проекте используются CSS модули. Элемент в DOM дереве имеет класс card_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку.
Какое название было у файла CSS модуля, в котором был определен этот класс? Запишите ответ в виде строки - полное название файла с раширением.

В проекте используется Styled Components. Необходимо элементу CustomInput задать скругление границ углов в размере 14 пикселей. Заготовка выглядит следующим образом: const CustomInput = styled.input``. Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы. Пример ответа: margin: 12px;

К какому props компонента TextField относится описание: Это текст, который отображается в текстовом поле, пока пользователь не введет свой собственный текст. Он используется для подсказки пользователю о том, что нужно ввести в поле. Напишите название атрибута в camelCase.

Укажите в порядке возрастания непрозрачности (от прозрачного до непрозначного) значения служебного класса opacity в Tailwind.
1) 0
2) 10
3) 50
4) 75
5) 100

К какому props компонента Tooltip относится описание: Определяет задержку появления подсказки при наведении курсора на элемент. Значение указывается в миллисекундах. Если значение равно 0, подсказка появляется сразу при наведении. Если задать значение больше нуля, то подсказка появится через указанное количество миллисекунд. Напишите название атрибута в camelCase.

Укажите порядок действий при создании компонента кнопки с MUI.
1) Импортируйте Button компонент из Material-UI: import Button from '@mui/material/Button'
2) Создайте экземпляр Button компонента: ˂Button˃Кнопка˂/Button˃
3) Настройте свойства кнопки, такие как цвет, размер, тип содержимого и т.д. ˂Button color="primary" variant="contained" size="large"˃Кнопка˂/Button˃
4) При необходимости добавьте обработчик событий, например, onclick: ˂Button onclick={(event) =˃ {console.log('Вы нажали на кнопку')}}˃Кнопка˂/Button˃

К какому props компонента Avatar относится описание: Этот параметр определяет стиль аватара. Возможные значения: circle, rounded, square. Значение по умолчанию - circle. Напишите название атрибута в camelCase.

Стандартная тема содержит следующие точки адаптивности:

Укажите порядок действий при создании селекта (компонента с выпадающим списком) кнопки с MUI
1) Инициализировать компонент ˂Select˃ из MUI: import Select from '@mui/material/Select';
2) Создать экземпляр этого компонента с использованием JSX. Например: ˂Select defaultValue="None" /˃
3) При необходимости настроить параметры компонента, такие как доступные опции, стиль и т. д.
4) Добавить обработчик события изменения значения селекта, если это необходимо. Например: onchange={handleChange}.

Какой вариант является правильным для создания горизонтальной цепочки элементов с использованием Flexbox?

Укажите порядок, в котором стоит расположить импорты в корневой CSS файл.
1) @config “./tailwind.admin.config.js”
2) @import “tailwindcss/base” @import “tailwindcss/components” @import “tailwindcss/utilities”
3) @import “./custom-base.css” @import “./custom-components.css” @import “./custom-utilities.css”

Какой класс позволяет контейнеру, к которому применен класс prose и действует плагин typography, активировать темную версию темы? Напишите полное название класса вместе с модификатором.

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

Имеется компонент списка новостных анонсов. Предположим, что у нас есть массив данных товаров, которые мы хотим отобразить в виде карточек новостных анонсов, который пришел в этот компонент посредством props. Здесь мы предполагаем, что данные о товарах будут переданы в виде массива объектов с полями order, id, title, price, imageUrl и description.
При рендеринге списков какой вариант задания ключей самый оптимальный?

CustomButton и CustomFormButton - стилизованные компоненты в React проекте со styled-components. Что означает const CustomFormButton = styled(CustomButton)`...`

К какому props компонента Button относится описание: Указывает, должна ли кнопка занимать всю ширину родительского элемента. Если значение равно true, кнопка будет занимать всю доступную ширину. Значение по умолчанию - false. Напишите название атрибута в camelCase.

В проекте используется дизайн система MUI. На странице имеется список элементов, каждый из которых обернут в Tooltip. эти элементы должны иметь подсказки при наведении. Выберите наиболее предпочтительный вариант создания подсказок для повторяющихся элементов.

К какому props компонента Slider относится описание: Степень детализации, с которой ползунок (при дискретном варианте) может перемещаться по значениям? Напишите название атрибута в camelCase.