Собеседование фронтендера

На позицию джуна

Собеседование фронтендера

Николай Громов

go-go-go!

Разное

Табы или пробелы для отступов в коде?

Что происходит в браузере после того, как он получил из сети разметку страницы?

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

С какими css-фреймворками вы работали?

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

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

Что такое спрайты?

Сколько каких браузеров (в процентах, примерно) сейчас используют пользователи рунета?

Как вы проверяете кроссбраузерность?

Что такое адаптивность?

Что такое брейкпоинт? Какие брейкпоинты стоит делать для адаптивного проекта?

Что такое PixelPerfect?

Что такое прогрессивное улучшение?

Опишите файловую организацию проекта, если от вас просят сверстать 6 страниц сайта и хотят получить html, css и прочую статику.

Вы написали некие стили, но они «не работает».
Что делать?

Что такое БЭМ и зачем он нужен?

Как отличить Блок от Элемента?

Может ли класс-модификатор быть единственным классом на теге?

Можно ли написать на одном теге и класс-блок и класс-элемент?

Как делать «элементы элементов»?

В проекте есть серая, синяя и зеленая кнопки, а серая и синяя присутствуют в уменьшенном размере.
Как проименовать классы по БЭМ?

Контроль версий

Каким образом взаимодействуете с git?

Что такое удаленный репозиторий?

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

Каковы требования к коммитам?

Как переключиться на ветку?

Какой командой создаётся новая ветка?

Что такое git-конфликт и как его решать?

Разметка

Можно ли верстать таблицами?

В чем разница между тегами <div>, <section> и <article>?

Есть интерактивный элемент (с текстом), реагирующий на клик. Это кнопка или ссылка?

Для чего нужен тег <label>?

Какие элементы форм знаете?

Как из разметки указать браузеру загружать картинку в поддерживаемом формате (jpg/webp)?

В чем отличие между использованием двойного тега <br> и нового параграфа?

В чем отличие между добавлением в потоке текста тега <p> с увеличенным размером шрифта и использовании заголовочного тега?

Как выбрать уровень заголовка?

Можно ли писать тег <div> внутри тега <p>?

Опишите разметку карточки товара для каталога: картинка, название, короткое описание, цена, возможность покупки.

Опишите разметку страницы Каталога, выводящего карточки товаров (только контентная область с самими карточками).

Какие препроцессоры или шаблонизаторы используете для написания разметки?

Стилизация

Как подсчитывается вес селектора?
Условие: все стили написаны в одном файле, подключенном к странице.

В чём разница боксовых моделей content-box и border-box?
Как безопасно задать боксовую модель для всего проекта?

В чём отличие normalize и reset?

Как подключить кастомные шрифты?

В каком формате подключать шрифты?

Что такое FOIT и FOUT? Как их обойти?

Какие стилевые правила наследуются?

Что такое 1vh?

Что такое 1em и чем он отличается от 1rem?

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

Какие состояния компонента «кнопка» нужно простилизовать?

Какие состояния компонента «поле ввода» нужно простилизовать?

Как сделать кастомный чекбокс средствами css?

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

Как разместить блоки в ряд?

Как отцентровать блок неизвестных размеров внутри родителя неизвестных размеров?

В чем разница между flexbox и CSS grid.

Однострочный флекс-родитель, два потомка. Второй потомок содержит много контента и заставляет первого сужаться. Как это предотвратить?

Как сделать блок в 100% высоты родителя?

Можно ли простилизовать скролл?

Есть иконка гитхаба в формате SVG, можно ли средствами CSS сделать тень от иконки, а не от её габарита?

Есть ли в CSS переменные?

Есть ли в CSS математические функции?

Javascript

Как выполнить JS на странице?

Какие особенности подключения JS из внешних файлов вы знаете?

Что такое транспиляция кода?

Что такое линтинг кода?

Какие есть типы данных?

Что такое подъем переменных?

В чем отличие var, let и const?

Что такое область видимости? Какие бывают области видимости?

В чем разница между равенством и идентичностью?

Каков синтаксис тернарного оператора?

Что такое делегирование событий, зачем оно нужно?

Как прервать цикл?

Что такое шаблонная строка?

Чем отличается function declaration от function expression?

Как прервать выполнение функции?

Как указать функции значение параметров по умолчанию?

Создана переменная arr1, в нее записан массив из 3 элементов.
Создана переменная arr2, в нее записана переменная arr1 (const arr2 = arr1;).
Почему при добавлении в arr1 четвертого элемента этот четвертый элемент появляется и в arr2?

Как «обойти массив» (перебор, фильтрация, трансформация)?

Какими способами можно получить значение поля объекта по ключу?

Что такое метод объекта?

Что такое this?

Что такое коллбэк?

Что такое лексическое окружение?

Расскажите про event loop.