FrontendQuiz - задачи с собеседований по фронтенду – Telegram
FrontendQuiz - задачи с собеседований по фронтенду
1.69K subscribers
246 photos
2 videos
2 files
164 links
Задачки для фронтендщиков:
алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения.

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Какие псевдоклассы есть?

Псевдоклассы позволяют стилизовать элементы в определённом состоянии. Примеры:
- :hover — при наведении;
- :active — при нажатии;
- :focus — при получении фокуса;
- :first-child, :last-child — для первого/последнего дочернего элемента;
- :nth-child(n) — выбор по порядку;
- :not() — отрицание условия;
- :disabled, :checked, :required — состояния форм.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение будет в переменной f после выполнения следующего кода?
let f = "Hello World!";
f = f.split("").reverse().join("");
Anonymous Poll
4%
Hello World!
92%
!dlroW olleH
0%
olleH dlroW!
4%
!Hello World
🤔 Какое значение будет в переменной i после выполнения следующего кода?
let i = [1, 2, 3];
i.splice(1, 1, 4);
Anonymous Poll
19%
[1, 2, 3]
57%
[1, 4, 3]
14%
[1, 2, 4]
10%
[4, 2, 3]
🤔 Какое CSS свойство задаёт границы для расчётной модели форматирования?
Anonymous Poll
35%
border-box
9%
content-box
0%
padding-box
57%
box-sizing
🤔 Каким сайтам может быть полезно AMP?

- Новостные порталы, блоги, СМИ.
- Страницы лендингов, где важна моментальная загрузка.
- Сайты, сильно зависящие от SEO и мобильного трафика.
Но AMP имеет ограничения и постепенно теряет популярность в пользу Core Web Vitals и PWA.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое CSS свойство позволяет управлять видимостью фрагментов переполненного контента при использовании печатных медиа?
Anonymous Poll
58%
overflow-style
5%
page-break-inside
37%
content-visibility
5%
mask-composite
🤔 Какое значение свойства CSS scroll-snap-stop предотвращает автоматическую прокрутку за пределы указанного элемента?
Anonymous Poll
19%
always
25%
normal
19%
start
38%
end
🤔 Какие достоинства у инкрементального DOM против виртуального?

Инкрементальный DOM (например, в Svelte):
- Менее абстрактен — ближе к реальному DOM.
- Быстрее монтируется — нет необходимости в полной виртуальной копии.
- Меньше памяти и меньше промежуточных структур.
В отличие от виртуального DOM:
- он не сравнивает деревья, а прямо вставляет нужные изменения.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение будет в переменной h после выполнения следующего кода?
let h = "abcdefg";
h = h.substring(1, 4);
Anonymous Poll
11%
abc
39%
bcd
0%
cde
50%
bcde
🤔 Какой метод JavaScript позволяет проверить, содержит ли элемент указанный класс?
Anonymous Poll
27%
hasClass()
8%
containsClass()
4%
getClass()
62%
classList.contains()
🤔 Какое правило Flexbox задаёт вывод flex items в одну строку или в несколько строк?

Свойство flex-wrap:
- nowrap — всё в одну строку (по умолчанию);
- wrap — разрешает перенос;
- wrap-reverse — перенос в обратном направлении.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript позволяет асинхронно выполнять функции в заданной очередности, дожидаясь завершения каждой из них?
Anonymous Poll
50%
Promise.all()
7%
Promise.any()
21%
Promise.sequence()
21%
Promise.race()
🤔 Какой атрибут HTML определяет видимость элемента только для читалок?
Anonymous Poll
48%
aria-hidden="true"
12%
hidden
20%
display: none
20%
aria-visible="false"
🤔 Какими способами можно клонировать объект?

- Поверхностное копирование: Object.assign, спред-оператор;
- Глубокое копирование: structuredClone, JSON.parse(JSON.stringify(...)), lodash (cloneDeep);
- Вручную, если объект сложный или с методами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое CSS свойство используется для создания тени за элементом?
Anonymous Poll
87%
box-shadow
6%
text-shadow
6%
border-shadow
0%
shadow
🤔 Какой HTML тег определяет термин в описательном списке?
Anonymous Poll
12%
dt
20%
dd
52%
li
16%
def
🤔 Зачем в HTML5 введены события Server-Sent Events?

SSE (Server-Sent Events) позволяют одностороннюю передачу данных от сервера к клиенту через открытое соединение. Это альтернатива WebSocket'ам, когда клиенту нужно просто "слушать" события от сервера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой тип CSS-свойства background-clip определяет, что фон будет ограничен контентом элемента?
Anonymous Poll
23%
border-box
5%
padding-box
73%
content-box
0%
margin-box
🤔 Какие есть способы центрирования через inline-block?

Можно задать text-align: center родителю и сделать элемент display: inline-block. Это работает как с текстом, так и с визуальными элементами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript используется для удаления первого элемента из массива?
Anonymous Poll
3%
push()
18%
pop()
44%
shift()
35%
unshift()