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