Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Что такое специфичность в CSS?
Специфичность в CSS — это способ определения приоритета CSS-правил, когда к одному элементу применяются несколько конфликтующих стилей. Она рассчитывается на основе количества селекторов разных типов в правиле:
Инлайн-стили (например, style="color: red;") имеют наивысший приоритет.
ID-селекторы (#id) более специфичны, чем классы (.class) или теги (div).
Универсальные селекторы (*) и каскадность имеют минимальный приоритет.
Например:
#id { color: blue; } /* более специфично, чем */
.class { color: green; }Можете объяснить концепцию CSS box model (блочная модель)?
CSS box model - это основной концепт в CSS, описывающий как элементы на веб-странице представлены в виде прямоугольных блоков, состоящих из контента, отступов, границ и внутренних полей.
В чем разница между display: none и visibility: hidden?
• display: none полностью удаляет элемент с веб-страницы, как если бы его не существовало. Он не занимает места в макете, и элементы после него сдвигаются, чтобы занять его пространство.
• visibility: hidden скрывает элемент, но оставляет его место на странице. Элемент всё ещё занимает пространство в макете, но не виден пользователю.
Какие есть виды подключения CSS в HTML?
Существует три основных способа подключения CSS к HTML: встроенный, внутренний и внешний. Встроенный CSS применяет стили непосредственно к элементу с помощью атрибута style. Внутренний CSS размещается внутри тега <style> в <head> HTML-документа и применяется ко всем элементам на странице. Внешний CSS хранится в отдельном файле с расширением .css, который подключается к HTML через тег <link> в <head>, что позволяет использовать одни и те же стили на нескольких страницах.
Как интегрировать веб-шрифты (например, Google Fonts) в HTML и какие факторы влияют на производительность загрузки?
Веб-шрифты, такие как Google Fonts, можно подключить через элемент <link> в разделе <head> HTML или использовать CSS @import. Однако шрифты могут замедлять рендеринг страницы, поэтому важно оптимизировать их загрузку. Основные факторы, влияющие на производительность, включают количество стилей шрифтов, их формат и стратегию загрузки (например, font-display: swap, чтобы избежать блокировки рендеринга текста).
Как реализовать поддержку темной темы (dark mode) с помощью HTML и CSS? Какие метатеги и медиавыражения используются?
Какова важность адаптивного дизайна во фронтенд-разработке?
Каковы преимущества использования CSS-препроцессоров, таких как Sass или Less?
Каковы преимущества использования CSS Grid и Flexbox ?
В чем разница между inline, block и inline-block элементами в CSS?
Рейтинг:
1
Сложность:
4
Темную тему можно реализовать с помощью CSS-медиавыражения prefers-color-scheme, которое определяет предпочтения пользователя относительно цветовой схемы (светлой или темной). В зависимости от предпочтений браузера применяются соответствующие стили. Также можно настроить переключение темы вручную с помощью JavaScript и CSS-классов.
Рейтинг:
2
Сложность:
2
Адаптивный дизайн важен, чтобы сайт или приложение выглядело и работало корректно на устройствах с разными размерами экранов — от мобильных телефонов до настольных компьютеров. Он улучшает пользовательский опыт и повышает доступность, делая интерфейс удобным для всех. Это также помогает поддерживать единый стиль и функциональность на всех устройствах.
Рейтинг:
4
Сложность:
8
CSS-препроцессоры, такие как Sass и Less, позволяют использовать переменные, вложенные правила, функции и миксины, что упрощает создание и поддержку стилей. Они способствуют модульности и повторному использованию кода, что делает стили более структурированными и удобными для изменения. Препроцессоры также добавляют возможность логических операций и циклов, что невозможно в обычном CSS.
Рейтинг:
3
Сложность:
6
CSS Grid и Flexbox упрощают создание адаптивных и сложных раскладок. Grid подходит для построения двухмерных макетов, где нужно управлять как строками, так и столбцами, в то время как Flexbox идеально подходит для одномерных раскладок, таких как выравнивание элементов в строке. Оба инструмента позволяют легко управлять выравниванием, распределением пространства и адаптивностью.
Рейтинг:
1
Сложность:
2
Элементы block занимают всю ширину родителя и начинаются с новой строки, элементы inline размещаются в одной строке и занимают только необходимую ширину, а inline-block совмещает свойства обоих — размещается в одной строке, но позволяет задавать ширину и высоту. Различие между этими типами влияет на построение и компоновку страницы.
Рейтинг:
3
Сложность:
3
Рейтинг:
2
Сложность:
3
Рейтинг:
2
Сложность:
4
Рейтинг:
3
Сложность:
4
Рейтинг:
2
Сложность:
4