Если вы веб-разработчик с амбициями сделать международную карьеру и заинтересованы успешно пройти собеседование в крупные мировые компании типа Google, Airbnb, PayPal, Skyp, Whatsapp, Uber, Amazon, Ebay, вот примеры вопросов, с которыми вы скорее всего столкнитесь на собеседовании.

Как успешно пройти собеседование на веб-разработчика

Обычно крупные компании выстраивают процесс отбора кандидатов на вакансию веб-разработчика в несколько этапов:

  • Первичное интервью по телефону с рекрутером
  • Первичное интервью по телефону с техническим экспертом
  • Однодневное собеседование в офисе с тестовыми задачами и структурированным интервью по компетенциям.
  • Тестовые задания могут включать домашнее задание, которое вас попросят подготовить заранее.

Типичные ошибки, которые русскоязычные веб-разработчики делают на собеседовании

Английский — мой враг. Низкий уровень английского иногда становится проблемой для веб-разработчика, который пытается максимально показать потенциальному работодателю, что он может. Если у вас английский не на самом высоком уровне, лучше всего в начале собеседования честно предупредить об этом. Тогда возможное недопонимание в беседе работодатель скорее отнесет на языковой барьер, нежели на вашу профессиональную некомпетентность. Во время интервью не следует стесняться признаваться, что вы не совсем поняли вопроса, поскольку английский не ваш родной язык, просить говорить помедленнее или более простыми предложениями. В конечном счете, работодатель, в первую очередь, заинтересован в ваших технических навыках, а не в ораторских способностях.

Слабая теоретическая подготовка. Достаточно часто в ходе телефонного интервью технический эксперт стремится проверить здания веб-разрабочика через ряд теоретических вопросов. В такой ситуации, если вы не освежили в своей памяти базовые термины и понятия, может создаться ложное впечатления, что вы не достаточно глубоко владеете предметом разовора.

Некорректные ожидания по уровню заработных плат. Многие рекрутеры отмечают, что кандидаты с рынка бывшего СНГ зачастую не имеют реалистичных представлений об уровне заработных плат программистов-разработчиков в той или иной стране или городе. В результате, либо они просят слишком мала, либо слишком много в качестве компенсации за свой труд. Поэтому перед интервью в международную компанию, если вакансия предполагает релокацию, лучше всего заранее ознакомиться с анализами уровня заработных плат веб-разработчиков, и мотивированно обосновывать свои зарплатные ожидания.

Не умение проходить структурированное интервью. Интервью по компетенциям, как правило, проходит в рамках техник структурированного интервью, когда кандидатов просят привести пример, когда они провялили те или иные нужные качества. И тут основная проблема русских кандидатов — не способность четко и кратко отвечать на вопрос. Поэтому перед таким собеседование лучше всего ознакомиться с техниками типа STAR и заранее подготовить несколько примеров из своей практики, отрепетировав ответ на них на английском языке.

Пример вопроса для собеседования веб разработчика

Explain each piece of the box model. 

Ожидание от правильного ответа кандидата: 

Candidate should be able to describe or draw the box model in the correct order: content, padding, border, and margin (in order with content as inner-most). See pastedGraphic.png

Explanation of how to calculate full width of an element: width + left margin + left border + left padding + right padding + right border + right margin 

Explain the difference between the border box and the content box: 

    • content-box is where the block element’s height/width matches the content of the element. Padding and borders are appended and not calculated as part of the element’s size. 
    • border-box is where the block element’s height/width is calculated from the outer-most construct of the element. Padding and borders are part of the element’s width; the content size is that of the element with the size of borders/padding subtracted. 
    • padding-box is a Mozilla-specific experimental feature that is not part of the W3C spec. It includes padding but not border as part of the width and height dimensions. 
    • Margin is not included in box-sizing calculations, it is part of the element and its layout but not part of its measured size. Explain margin-collapsing. Margins between sibling elements collapse into the greater value of the two. 

Example of margin collapse. The margin between these two divs is 15px. 

<style>

h1 {

 margin:15px 0;

}

p {

 margin:10px 0;

}

</style>

<h1>Hello</h1>

<p>World</p>

  • Point out browser-specific quirks. 
  • Clearly understand overriding and working with various box-models in CSS. 
  • Are they familiar with quirks of margin-collapse itself (not browser specific)? 

Задачи №1 на собеседовании веб разработчика и HTML-верстальщик

You have a parent div with a width of 500px and a child div element with a margin of 10px, a border of 5px and padding of 10px. What would be the calculated width of that child element? 

Ответ:  The standard box model uses content-box, but the containing element has no padding or border. Without sizing defined on the child element, the child element will be fit into the full width of the container. By this logic, your child element is forced to have an outer width of 500px. The margin is not part of the child element’s size and would be appended if a size were set on the child element, but this is not the case; the margin adds an additional constraint to the child element. Given the margin restraint of 10px, border of 5px, and padding of 10px, we have 25px restraints on each the right and left sides for a total of 50px, leaving us with an answer of 450px (50px of contraints subtracted from 500px total). 

Дополнительные вопросы:

  • Вопрос: What if you change it to a border box or a content box? 
    • Border box is a box model calculation where element width and height includes the padding and border dimensions. 
    • The border box specification is also how the box model works in quirks mode and how the box model was set up in early versions of Internet Explorer. 
    • Вопрос How does the box model apply to inline elements? 

Задачи №2 на собеседовании веб разработчика и HTML-верстальщик

      • Two ways to submit a FORM? ( Get and POST ) 
      • Difference between Get and POST 
      • Know JavaScript? When should you use it, and when should you not use it? 
      • What does the onSubmit handler do? 
      • How might you submit a form to two different locations? 
      • How do you comment your code? Is there a strategy that you use? 
      • Know perl? 
      • What are the basic datastructures in perl? 
      • What’s the difference between a hash and an array? 
      • What does use strict do? 
      • What’s the difference between passing parameters by value and by reference? 
      • Familiar with OO? 
      • What’s the difference between a class an an object? 
      • What’s a static variable? 
      • Explain polymorphism. 
      • Know Java? Does Java provide any mechanism for multiple inheritance? 
      • Do you know regular expressions? Can you give me a regular expression to match a 10 digit phone number? 

Задачи №3 на собеседовании веб разработчика и HTML-верстальщик

What does this code output: 

 #!/usr/bin/perl

 my $code = ‘

 print 1+1 . «\n»;

 $code =~ m/(\d+)\+(\d+)/; #Matches Number+Number

 my $new = $1 + $2;

 $code =~ s/(\d+)\+(\d+)/$2+$new/; #Replaces Number+Number in $code

 ‘;

 for(1..10) {

 eval ($code);

 }

0.5