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

Вы работаете веб-разработчиком в компании, которая занимается продажей спортивного оборудования. Ваша задача - создать веб-страницу, на которой будет отображаться информация о разных видах спорта, их пользе для здоровья, оборудовании и советах по тренировкам. Вы уже сверстали страницу с помощью HTML и подготовили текстовый контент и изображения для страницы. Теперь вам нужно оформить страницу с помощью CSS.

Какой способ подключения стилей CSS к HTML-документу является наиболее гибким и удобным для работы с несколькими страницами сайта?

• Внешний стилевой файл через тег <link>

• Внутренние стили в теге <style>

• Встроенные стили в атрибуте style элемента

• Импорт стилей из другого файла через директиву @import

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

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

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

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

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

Вы работаете веб-разработчиком в компании, которая занимается продажей цветов. Ваша задача - создать веб-страницу, на которой будет отображаться каталог цветов с фотографиями, названиями, ценами и описаниями. Вы уже получили макет страницы от дизайнера в формате Figma и подготовили текстовый контент и изображения для страницы. Теперь вам нужно сверстать страницу с помощью HTML и CSS.

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

• Прототип

• Анимация

• Слайд

• Сценарий

Вы работаете веб-разработчиком в компании, которая занимается продажей книг. Ваша задача - создать веб-страницу, на которой будет отображаться информация о разных жанрах книг, их авторах, рейтингах и отзывах читателей. Вы уже сверстали страницу с помощью HTML и CSS и подготовили текстовый контент и изображения для страницы. Теперь вам нужно сделать страницу адаптивной и кроссбраузерной.

Какой способ задания размеров элементов на странице является наиболее подходящим для адаптивной верстки?

• Задавать размеры в пикселях (px)

• Задавать размеры в процентах (%)

• Задавать размеры в относительных единицах (em, rem, vw, vh и т.д.)

• Задавать размеры в абсолютных единицах (cm, mm, in и т.д.)

Вы работаете веб-разработчиком в компании, которая занимается продажей музыкальных инструментов. Ваша задача - создать веб-страницу, на которой будет отображаться каталог инструментов с фотографиями, названиями, ценами и описаниями. Вы уже сверстали страницу с помощью HTML и CSS и подготовили текстовый контент и изображения для страницы. Теперь вам нужно сделать страницу адаптивной и кроссбраузерной.

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

• <meta name="viewport" content="width=device-width">
• <meta name="viewport" content="scale=device-width">
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• <meta name="viewport" content="scale=device-width, initial-scale=1.0">

Вы работаете веб-разработчиком в компании, которая занимается продажей косметики. Ваша задача - создать веб-страницу, на которой будет отображаться информация о новинке - туши для ресниц. Вы уже подготовили текстовый контент и изображение для страницы, а также выбрали подходящий шрифт и цветовую схему. Теперь вам нужно оформить страницу с помощью CSS.

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

• "border-style" - это свойство задает стиль границы элемента, такой как сплошной, пунктирный, двойной и т.д. Например: "border-style: solid;"

• "border-type" - это свойство задает тип границы элемента, такой как квадратный, круглый, ромбовидный и т.д. Например: "border-type: square;"

• "border-shape" - это свойство задает форму границы элемента, такую как прямая, изогнутая, волнистая и т.д. Например: "border-shape: curved;"

• "border-mode" - это свойство задает режим границы элемента, такой как нормальный, перекрывающий, внутренний и т.д. Например: "border-mode: normal;"

Вы работаете веб-разработчиком в компании, которая занимается продажей книг. Ваша задача - создать веб-страницу, на которой будет отображаться информация о новинке - книге “Война и мир” Льва Толстого. Вы уже подготовили текстовый контент и изображение для страницы, а также выбрали подходящий шрифт и цветовую схему. Теперь вам нужно сверстать страницу с помощью HTML.

Какой тег нужно использовать для создания заголовка первого уровня с названием книги “Война и мир”?

• <h1>Война и мир</h1>
• <title>Война и мир</title>
• <header>Война и мир</header>
• <head>Война и мир</head>

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

Как называется селектор CSS, который выбирает элементы, которые находятся в состоянии фокуса (например, при переходе по табуляции или клике мышью)? (укажите полное название псевдо-класса без двоеточия)

Как называется селектор CSS, который выбирает элементы, которые являются первыми дочерними элементами своих родителей? (укажите полное название псевдо-класса без двоеточия)

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

Какой тег используется для создания подвала (нижней части) HTML-документа? (укажите название тега без угловых скобок)

Какой тег используется для создания ячейки заголовка таблицы в HTML-документе? (укажите название тега без угловых скобок)

Какой атрибут тега <table> определяет ширину таблицы в HTML-документе?

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

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

Какой атрибут тега <img> определяет альтернативный текст для изображения, который отображается, если изображение не загружается или недоступно?

Чтобы открыть макет в Figma, нужно

• скачать файл с расширением .fig и запустить его на своем компьютере
• зарегистрироваться на сайте figma.com и получить ссылку на макет
• установить приложение Figma на свой компьютер или смартфон
• ввести ссылку на макет в браузере или открыть его через приложение Figma

Префикс -webkit- используется для стилей, которые поддерживаются только в браузере

• Firefox
• Internet Explorer
• Safari
• Opera

Свойство align-items задает

• направление главной оси в flexbox
• выравнивание элементов по главной оси в flexbox
• направление поперечной оси в flexbox
• выравнивание элементов по поперечной оси в flexbox

Свойство flex-direction задает

• направление главной оси в flexbox
• выравнивание элементов по главной оси в flexbox
• направление поперечной оси в flexbox
• выравнивание элементов по поперечной оси в flexbox

Чтобы применить стили только для определенного диапазона ширины экрана, нужно использовать

• media-запросы
• flexbox
• grid
• viewport

Media-запросы в CSS позволяют

• применять разные стили в зависимости от характеристик устройства или окна просмотра
• применять разные стили в зависимости от типа медиа (например, экран или печать)
• применять разные стили в зависимости от времени суток или года
• применять разные стили в зависимости от настроек пользователя или браузера

Резиновая верстка означает, что

• ширина элементов задается в относительных единицах (например, процентах)
• ширина элементов задается в абсолютных единицах (например, пикселях)
• ширина элементов изменяется в зависимости от содержимого
• ширина элементов фиксирована и не зависит от размера экрана

Свойство display может принимать следующие значения, кроме

• block
• inline
• inline-block
• inline-flex

Поле (padding) в CSS определяет

• расстояние между границей элемента и соседними элементами
• расстояние между границей элемента и контентом элемента
• расстояние между контентом элемента и родительским элементом
• расстояние между контентом элемента и дочерними элементами

Идентификатор в CSS позволяет

• стилизовать один или несколько элементов HTML с одним и тем же именем класса
• стилизовать один элемент HTML с уникальным идентификатором
• стилизовать все элементы HTML с одним и тем же тегом
• стилизовать все элементы HTML на странице

Для подключения внешнего файла стилей к HTML-документу необходимо использовать тег

• <link>
• <meta>
• <script>
• <style>

Для указания заголовка страницы в HTML-документе необходимо использовать тег

• <h1>
• <title>
• <head>
• <header>

Формы в HTML служат для отображения данных на странице

• сбора данных от пользователя
• отправки данных на сервер
• обработки данных на стороне клиента

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

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

Как называется способ верстки, при котором элементы подстраиваются под разные размеры экранов с помощью относительных единиц измерения и медиа-запросов? (укажите одно слово)

Как называется модель компоновки в CSS, которая позволяет выравнивать и распределять элементы в двумерном пространстве (по горизонтали и по вертикали)? (укажите одно слово)

Закрытый вопрос по теме Grid: Какое свойство CSS используется для задания контейнера Grid?

• display: flex

• display: grid

• display: box

• display: block

Что такое Grid в CSS?

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

• Это модуль, который позволяет создавать сложные макеты с помощью двумерной системы сеток.

• Это модуль, который позволяет создавать анимированные макеты с помощью трехмерной системы трансформаций.

• Это модуль, который позволяет создавать адаптивные макеты с помощью медиа-запросов.

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

• flex-direction

• flex-wrap

• flex-flow

• flex-align

Что такое Flexbox в CSS?

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

• Это модуль, который позволяет создавать сложные макеты с помощью двумерной системы сеток.

• Это модуль, который позволяет создавать анимированные макеты с помощью трехмерной системы трансформаций.

• Это модуль, который позволяет создавать адаптивные макеты с помощью медиа-запросов.

Как называется элемент CSS, который позволяет задавать стили для одного или нескольких элементов HTML? (укажите одно слово)

Открытый вопрос по теме Анимации: Как называется правило CSS, которое используется для определения ключевых кадров анимации?

Открытый вопрос по теме Анимации: Какое свойство CSS используется для задания направления анимации?

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

• width

• size

• length

• span

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

• background-color

• color

• fill

• bgcolor

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

• border-style

• border-type

• border-mode

• border-shape

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

• margin

• border

• padding

• space

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

• element element

• element > element

• element + element

• element ~ element

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

• .id

• #id

• id

• @id

Как называется способ верстки, при котором используются теги HTML по их назначению, то есть согласно смыслу и содержанию элементов? (укажите одно слово)

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

Какой атрибут тега < form > указывает на метод передачи данных формы на сервер? (укажите название атрибута без знака равенства)

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

Какой тег используется для создания таблицы в HTML-документе? (укажите название тега без угловых скобок)

Какой атрибут тега < p > позволяет выровнять текст по центру, по левому или правому краю? (укажите название атрибута без знака равенства)

Закрытый вопрос по HTML: Какой тег HTML используется для создания выпадающего списка?

• <select>

• <option>

• <list>

• <dropdown>

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

• <table>

• <tr>

• <td>

• <grid>

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

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

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

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

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

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

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

Укажите порядок, в котором стоит расположить импорты в корневой 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”

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

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

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

К какому props компонента Avatar относится описание: Этот параметр определяет стиль аватара. Возможные значения: circle, rounded, square. Значение по умолчанию - circle. Напишите название атрибута в 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 компонента Tooltip относится описание: Определяет задержку появления подсказки при наведении курсора на элемент. Значение указывается в миллисекундах. Если значение равно 0, подсказка появляется сразу при наведении. Если задать значение больше нуля, то подсказка появится через указанное количество миллисекунд. Напишите название атрибута в camelCase.

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

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

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

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

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

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

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

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

Установите соответствие условных обозначений размера и реального размера в плагине @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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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