Типичные вопросы на собеседовании на должность front-end разработчика

Вопросы по HTML

Вопросы на которые вы должны с легкостью отвечать 

1. Как работают флоаты?
2. Как работают инлайн-блоки?
3. Как работает vertical-align?
4. Как центрировать по высоте?
5. Как работает сокращенная запись.
6. Как сделать, чтобы элемент занимал всю доступную ему ширину?
7. Как работает z-index? Понятие «stacking context».

Так же возможны вопросы с области svg canvas. 

Знаете ли вы  HTML5 (новые теги секционирования документа, Canvas, Geolocation, Web Storage)?

Canvas – элемент для создания растровых 2D-изображений при помощи Java Script.

Geolocation – элемент для определения местоположения пользователя на карте с помощью навигационной спутниковой системы (GPS), привязки к сотам мобильного оператора (GSM или CDMA), MAC-адресам в сетях WI-FI (WI-FI или Bluetooth), IP-адресам или данным, определенным пользователем.

Web Storage – программный интерфейс, упрощающий сохранение данных посредством веб-запросов. Этот интерфейс дает возможность сохранять данные непосредственно на стороне клиента, в браузере, где они остаются доступными даже после закрытия браузера, тем самым снижая сетевой трафик.

Что еще есть в HTML5: работа со звуком (AUDIO), работа с видео (VIDEO), коммуникационные средства (XMLHttpRequest Level 2), веб-сокеты (WebSocket), работа с формами (HTML5 Forms), технология Web Workers, создание автономных веб-приложений.

Что такое DOCTYPE и зачем он нужен?

DOCTYPE – определение типа документа (Document Type Definition (DTD)), правила, в соответствии с которыми осуществляется проверка конкретного документа (веб-страницы) XML или (X)HTML.

Чем отличается DIV от SPAN?

DIV – блочный контейнер, а SPAN – линейный. DIV используется для разметки блоков, а SPAN – для текста.

Расскажите, в каких случаях уместно использование элемента small и приведите пример?

Элемент small был представлен в HTML 4.01 и предназначался для того, чтобы делать текст маленьким. В HTML5 этому тэгу придали семантическое значение и рекомендуют помещать в него различного рода предупреждения, юридические текст и прочее, что должно быть написано «мелким шрифтом». При этом текст может выглядеть маленьким, но это уже не обязательно.

Возможно ли изобразить интервал дат с помощью одного элемента time?

Нет, невозможно. Можно представить эту информацию используя два элемента time. Например, для того, чтобы представить временной интервал,  разработчик может написать:

<time datetime="2015-12-12">12</time>-
<time datetime="2016-01-13">13</time>

 

Что такое атрибут longdesc? 

Этот атрибут был сделан для того, чтобы позволить более детально описывать изображения, нежели это позволяет сделать атрибут alt. Интересная вещь: вместо того, чтобы являть собой описание изображения, longdesc указывает на гиперссылку, содержащую описание.

Пример использования:

<img src="test.jpg"
     alt="описание" longdesc="/about.html">

Вопросы по CSS

Для чего необходим файл reset.css на сайте?

Каждый html – элемент изначально имеет определенный набор свойств и значений, определяемых браузером. Они могут как совпадать, так и различаться.

Чтобы не зависеть от этого, рекомендуется использовать файл reset.css (он может называться по-разному), который содержит обнуленные значения всех свойств тегов.

Достоинства: во всех браузерах все элементы будут иметь одинаковые начальные свойства.

Недостатки: приходится повторно определять большее количество свойств.

Пример (фрагмент):

html, body, div, span, p, h1, h2, h3, h4, h5, h6, … { 
    margin: 0; 
    padding: 0; 
    border: 0 none; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    text-decoration: none; 
}

Объясните, что такое плавающие элементы (floats) и как они работают?

Что такое CSS спрайты? Как они реализуются на странице или сайте?

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

Вопросы по javascript

вы можете посмотреть в другой статье: "типичные вопросы на собеседовании  javascript разработчика"