Подготовка к собеседованию на позицию

junior front-end developer, m1+m2

Справка
● Жирным шрифтом отмечены самые важные вопросы.
● Курсивом отмечены более сложные дополнительные вопросы.

Вопросы
HTML/CSS
● Отличие div от span
● Отличия padding и margin.
● Схлопывание margin соседних элементов.
● Дайте определение элементу main. Какова его цель?
● Является ли атрибут alt обязательным для img элемента? Зачем он
используется? Приведите пример, когда его значение может быть
пустым.
● Расскажите о принципах семантической верстки. В чем минусы
верстки таблицами?
● Какие единицы измерения CSS вы знаете
● Какая разница между position:relative, fixed, absolute и static?
● Что такое и как работает специфичность CSS? Приоритет
применения правил
● Директива !important. Зачем она? Приведите пример, где ее
использование необходимо.
● Отличие классов от псевдоклассов
● Каким образом можно использовать нестандартные шрифты на
веб-странице?
● Какие теги по умолчанию являются блочными, а какие строчными?
Можно ли изменить их поведение и как?
● Что делает CSS свойство display. Приведите примеры его
использования.
● Разница между inline и inline-block
● Зачем использовать flex-direction:column, ведь по-умолчанию блоки и
так позиционируются вертикально друг за другом?
● Каким образом браузер определяет (устанавливает) размер элемента?
Что на него влияет?
● Есть ли у тегов предопределенные стили? Как их узнать?
● Как центрировать элемент по горизонтали не зная ширину
родительского блока? Приведите несколько примеров.
● Как центрировать элемент по вертикали не зная высоту
родительского блока? Перечислите все известные вам методы.
● Что такое «резиновая» вёрстка? Что такое адаптивная вёрстка.
● Как проверить html-код на валидность?
● Опишите варианты задания свойства background-size.

Вопросы, выходящие за пределы курса

● CSS-анимации, CSS-transition
● CSS-grid
● Отличия в работе с CSS у различных браузеров. Поддержка
устаревших версий браузеров.
● Принципы наложения контента. z-index
● SVG
● Кроссплатформенная верстка. @media
● Использование CSS-препроцессоров
● Что такое CSS спрайты и как они используются?

JavaScript
● Типы данных в JS
● В чем разница между null и undefined?
● Для чего используется оператор "&&"?
● Для чего используется оператор "||"?
● Как можно преобразовать строку в число?
● Что такое DOM?
● Какие методы работы с DOM вы знаете?
● Что делает метод event.preventDefault()?
● Что такое цель события или целевой элемент (event.target)?
● В чем разница между операторами "==" и "==="?
● Для чего используется оператор "!!"?
● Что такое тернарный оператор?
● Что такое область видимости (Scope)?
● Какие значения в JS являются ложными?
● Какое значение имеет this?
● Как бы Вы реализовали метод .map?
● Как бы Вы реализовали метод .filter?
● Как бы Вы реализовали метод .reduce?
● Что такое объект arguments?
● В чем разница между ключевыми словами «var», «let» и «const»?
● Что такое стрелочные функции (Arrow Functions)?
● Что такое классы (Classes)?
● Что такое шаблонные литералы (Template Literals)?
● Что такое деструктуризация объекта (Object Destructuring)?
● Что такое функция обратного вызова (Callback Function)?
● В чем разница между spread-оператором и rest-оператором?
● Что такое NaN? Как проверить, является ли значение NaN?
● Как проверить, является ли значение массивом?
● Как определить наличие свойства в объекте?
● Как в JS создать объект?
● Как в JS вызвать функцию?
● Для чего используется ключевое слово «new»?
● Самовызывающиеся функции.
● Что такое чистая функция?
● Что такое функции высшего порядка?

Вопросы, выходящие за пределы курса

● Что представляет собой цикл событий (event loop) в JavaScript и что он
делает?
● Что такое всплытие события (Event Bubbling)?
● Почему 0.1 + 0.2 === 0.3 возвращает false?
● Что делают методы call, apply, bind ?
● Что такое замыкания

Задачи

1. Переверните массив. Напишите функцию reverseArray(), которая

получает в качестве параметра массив и возвращает массив,
состоящий из тех же элементов, записанных в обратном порядке.

Пример:
const sentence = [“sense.“, “make”, “all”, “will”, “This”];
console.log(reverseArray(sentence));

Вывод:
[‘This’, ‘will’, ‘all’, ‘make’, ‘sense.’];

2. Поприветствуйте инопланетян. Напишите функцию, greetAliens(),

которая принимает массив строк и использует цикл чтобы вывести в
консоль приветствие для каждого инопланетянина. Приветствие
должно быть такого формата: “Oh powerful [name], we humans offer our
unconditional surrender!”
Пример:
const aliens = [“Blorgous”, “Glamyx”, “Wegord”, “SpaceKing”];
greetAliens(aliens);
Вывод:
Oh powerful Blorgous, we humans offer our unconditional surrender!
Oh powerful Glamyx, we humans offer our unconditional surrender!
Oh powerful Wegord, we humans offer our unconditional surrender!
Oh powerful SpaceKing, we humans offer our unconditional surrender!

3. Написать функцию justCoolStuff(), которая принимает в качестве

параметров 2 массива и выводит одинаковые значения.

Пример:
const coolStuff = [
“gameboys”,
“skateboards”,
“backwards hats”,
“my room”,
“temporary tattoos”
];
const myStuff = [
“sweaters”,
“skateboards”,
“family-night”,
“my room”,
];
console.log(justCoolStuff(myStuff, coolStuff));

Вывод:
[“skateboards”, “my room”]

4. Написать функцию isTheDinnerVegan(), которая получает в качестве

параметра массив блюд в формате { name: “Название блюда“, source:
“plant, meat или dairy” } и определяет, являются ли все они
вегетерианскими.

Пример:
const meal = [
{ name: “arugula”, source: “plant” },
{ name: “tomatoes”, source: “plant” },
{ name: “lemon”, source: “plant” },
{ name: “olive oil”, source: “plant” },
];
const dinner = [
{ name: “hamburger”, source: “meat” },
{ name: “cheese”, source: “dairy” },
{ name: “ketchup”, source: “plant” },
 { name: “bun”, source: “plant” }
];
console.log(isTheDinnerVegan(meal));
console.log(isTheDinnerVegan(dinner));

Вывод:
true
false