Questões para entrevista de profissionais Front-end
Questões para entrevista de profissionais Front-end
Este repositório contém uma série de perguntas para entrevista de profissionais de front-end que podem ser usadas para avaliar os candidatos. Não é recomendado de maneira alguma usar todas as perguntas aqui no mesmo candidato (que levaria horas). A escolha de alguns itens dessa lista deverá ajudar a identificar as habilidades requeridas do candidato.
O artigo Baseline For Front-End Developers de Rebecca Murphey é também uma ótima fonte para ler antes de entrevistar um candidato.
Note: Tenha em mente que muitas destas questões estão em aberto e poderia levar a discussões interessantes que dizem mais sobre as capacidades do candidato do que a resposta em si.
Tabela de Conteúdos
- Questões Gerais
- Questões de HTML
- Questões de CSS
- Questões de JS
- Questões de Acessibilidade(external link)
- Questões sobre Teste
- Questões de Performance
- Questões de Rede
- Questões de Código
- Questões Divertidas
⬆ Contribuintes originais:
A maiorida das questões foram retiradas de um _thread_da oksoclap originalmente criada por Paul Irish (@paul_irish) e com a contribuição das seguintes pessoas: @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed @iansym
⬆ Questões Gerais:
- O que você aprendeu ontem / esta semana?
- O que te anima ou te interessa em programação?
- Qual foi um desafio tecnico que teve recentemente e como o resolveu?
- Quando construindo um novo site ou mantendo um existente, pode explicar algumas das tecnicas que usou para aumentar a performance?
- Pode descrever algumas melhores práticas ou metodologias de SEO que usou recentemente?
- Pode explicar metodologias comuns ou problemas que resolveu recentemente em termos de seguranca em front-end?
- Que acções tomou pessoalmente em projetos recentes para aumentar a manutenibilidade do código?
- Fale sobre seu ambiente de desenvolvimento preferido.
- Com quais sistemas de controle de versão você é familiar?
- Descreva seu processo quando cria uma página web.
- Se você tivesse 5 diferentes arquivos de folhas de estilo, qual seria a melhor forma de integrá-los no site?
- Descreva a diferença entre progressive enhancement and graceful degradation.
- Como você pode otimizar os recursos de um site?
- Quantos recursos um navegador pode baixar, simultaneamente, de um determinado domínio?
- Quais são as exceções?
- Descreva 3 formas de diminuir o page load (tempo de carregamento real ou percebido)
- Se você caísse em um projeto que as pessoas usam tabs para indentação e você usa espaços, o que você faria?
- Descreva como criaria uma simples página com um slideshow
- Se você pudesse dominar uma tecnologia este ano, qual seria?
- Explique a importância de normas e órgãos normativos.
- O que é Flash of Unstyled Content? Como você evita FOUC?
- Explique o que são ARIA e leitores de tela, e como fazer um site de web acessivel.
- Explique alguns contras e a favor de usar animações em CSS em vez de Javascript.
- O que significa CORS e qual é o problema que resolve?
- Como resolveria um desentendimento com um patrão ou colega?
- Que recursos usa para aprender sobre as tendencias em desenvolvimento front-end e design?
- Quais so as qualificações necessarias para ser um bom programador de front-end?
- Em que cargo você se vê?
- Explique a diferença entre cookies, session storage e local storage.
⬆ Questões de HTML:
- Qual é a função de
doctype? - Como se serve uma página com conteúdo em múltiplos idiomas?
- Que tipo de coisas que você deve tomar cuidado ao desenvolver um website multi-língua?
- Quais são os benefícios em utilizar o atributo
data-? - Considere o HTML5 como uma plataforma web aberta. Quais são os blocos de construção de HTML5?
- Descreva a diferença entre
cookie,sessionStorageelocalStorage. - Descreva a diferença entre
<script>,<script async>e<scrypt defer>. - Porque é, geralmente, uma boa ideia colocar os
<link>CSS entre<head></head>e JS<script>diretamente antes de</body>? Conhece exceções? - O que é progressive rendering?
- Porque usaria um atributo
srcsetnuma tag imagem? Explique o processo que o navegador usa quando avalia o atributo. - Utilisou diferentes linguagens de HTML templating?
- Qual é a diferença entre
canvasesvg? - O que são elementos vazios (elementos nulos) em HTML?
⬆ Questões de CSS:
- O que é a especificidade de um seletor CSS e como funciona?
- Qual é a diferenca entre resetting e normalizing em CSS? Qual escolheria e por quê?
- Descreva floats e como funcionam.
- Descreva z-index e como o empilhamento do contexto é formado.
- Descreva BFC (Block Formatting Context) e como funciona.
- Quais são as várias técnicas para clearing e quais delas são apropriadas para que contexto?
- Qual seria a sua abordagem para resolver problemas de estilo relacionados com browsers diferentes?
- Como desenvolve uma página para navegadores com recursos limitados?
- Quais técnicas/processos que usa?
- Quais são as diferentes formas de utilizar conteúdo escondido (e como fazer para deixá-los disponíveis apenas para leitores de tela?)
- Já utilizou algum sistema de grid, se sim, qual você prefere?
- Já utilizou ou implementou media queries ou CSSs específicos para mobile?
- Qual é sua familiaridade com estilos em SVG?
- Consegue dar um exemplo de de uma propriedade
@mediaque não sejascreen? - Quais são algumas técnicas para escrever CSS eficiente?
- Quais são as vantagens/desvantagens de usar pré-processadores CSS?
- Descreva o que você gostou e o que não gostou com de pré-processadores que usou.
- Como você implementaria um website que não utilizaria fontes padrões?
- Explique como um navegador determina quais os elementos que correspondem a um seletor CSS.
- Descreva pseudo-elementos e como são utilizados.
- Explique o que você entende sobre box model e como você poderia dizer para o navegador en CSS para renderizar seu layout em diferentes box models.
- O que
* { box-sizing: border-box; }faz? Quais são as vantagens? - Qual é a função da propriedade
display? Dê alguns exemplos de como pode ser usada. - Qual é a diferença entre
inlineeinline-block? - Qual é a diferença entre seletores
nth-of-type()enth-child()? - Qual é a diferença entre elementos posicionados de forma relativa, fixa, absoluta e estática (
relative,fixed,absoluteandstatic)? - Quais frameworks CSS você tem usado localmente ou em produção?
- Como você mudaria/melhoraria ele(s)?
- Alguma vez usou CSS Grid?
- Explique a diferença entre desenvolver um site para ser responsivo ou usando uma tática Mobile First?
- Você já trabalhou com gráficos retina? Se sim, quando e quais técnicas você usou?
- Qual a razão porque usaria
translate()em vez de absolute positioning, ou vice-versa? Por quê? - O que é a propriedade de CSS
clearfixe como é usada? - Explique a diferença entre px, em e rem relacionados com o tamanho da fonte.
- Pode dar um exemplo de uma pseudo class? Pode dar um exemplo de como é utilizada?
- Qual é a diferença entre elementos block level e elementos inline. Pode dar exemplos de cada tipo de elemento?
⬆ Questões de JS:
- Explique a delegação de eventos (event delegation).
- Explique como
thisfunciona em JavaScript.- Dê um exemplo de como o uso de
thismudou com ES6.
- Dê um exemplo de como o uso de
- Explique como funciona herança prototípica.
- Qual a diferença entre uma variável
null,undefinedouundeclared?- Como verificar esses estados?
- O que é uma closure, e como/por que você usaria uma?
- Que construções da linguagem javascript se usa para iterar por propridades de um objeto ou elementos de um array?
- Descreva a diferença principal entre os metodos
Array.forEach()eArray.map(). Por que usaria um em vez do outro? - Qual o caso de uso típico para funções anônimas?
- Qual a diferença entre objetos herdados e objetos nativos?
- Qual a diferença entre:
function Person(){},var person = Person(), evar person = new Person()? - Quais são as diferenças do uso de
fooentrefunction foo() {}evar foo = function() {} - Explique como funciona
Function.calleFunction.apply? Qual a diferença mais importante? - Explique
Function.prototype.bind. - Qual a diferença entre feature detection, feature inference, e o uso de UA string?
- Explique o que é hoisting.
- Descreva o que é borbulhar do evento (event bubbling).
- Descreva o que é captura do evento (event capturing).
- Qual a diferença entre um “atributo” e uma “propriedade”?
- Quais são os pros e contras da extensão de objetos nativos em Javascript?
- Qual a diferença entre
==e===? - Explique a política de same-origin em relação a Javascript.
- Porque é chamado um operador condicional ternário, o que a palavra “ternário” indica?
- O que é o
"use strict";? Quais a vantagens e desvantagens de sua utilização? - Quais as vantagens a desvantages de escrever código Javascript numa linguagem que é compilada para Javascript?
- Que instrumentos e técnicas usa para depurar código Javascript?
- Explique a diferença entre objetos mutáveis e imutáveis.
- Dê um exemplo de um objeto imutável em Javascript
- Quais são os pros e contras da imutabilidade?
- Como consegue desenvolver imutabilidade no seu código?
- Explique a diferença entre funções síncronas e assíncronas.
- O que é o loop de eventos?
- Qual a diferença entre a pilha de chamadas (call stack) e a fila de chamadas (stack queue)?
- Quais as diferenças entre variáveis criadas usando o
let,varouconst? - Quais as diferenças entre uma classe em ES6 e construtores de função em ES5?
- Dê um exemplo do uso para a sintaxe das funções de seta
=>? Como a nova sintaxe difere de outras funções? - Qual a vantagem de usar a sintaxe de seta para o metodo em um construtor?
- Qual é a definição de uma função de ordem superior?
- Dê um exemplo de desestruturação de um objeto ou array.
- Dê um exemplo da geração de uma string usando Template Literals em ES6.
- Dê um exemplo de uma curry function e as vantagens da sintaxe?
- Quais os benificios de usar
spread syntaxe quais as diferencas comrest syntax? - Como partilhar código entre ficheiros?
- Qual a razão para criar membros de classe estáticos?
- Qual a diferenca entre loops
whileedo-whileem JavaScript? - O que é uma promise? Onde, e como usaria uma promise?
Questões de código
- Faça isso funcionar:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]- Crie um loop for que itere até
100enquanto retorna fizz em múltiplos de3, buzz em múltiplos de5e fizzbuzz em múltiplos de3e5. - O que será retornado de cada um desses?
console.log("hello" || "world")
-console.log("foo" && "bar")- Escreva uma função de invocação imediata (IIFE - Immediately Invoked Function Expression)
⬆ Questões de teste:
- Quais são algumas vantagens / desvantagens de testar seu código?
- Que ferramentas usaria para testar a funcionalidade do seu código?
- Qual é a diferença entre um teste de unidade e um teste funcional / de integração?
- Qual é a finalidade de uma ferramenta de linting de estilo de código?
- Quais são algumas das práticas recomendadas para efetuar testes?
⬆ Questões de performance:
- Que ferramentas você usaria para encontrar um bug de performance em seu código?
- Quais são algumas maneiras de melhorar o desempenho de rolagem do seu site?
- Explique a diferença entre layout, pintura e composição.
⬆ Questões de rede:
- Tipicamente, porque é melhor servir os assets do site de multiplos dominios?
- Descreva o processo do momento em que digita o URL de um site até ele ser carregado na tela.
- Quais as diferenças entre Long-Polling, Websockets e Server-Sent Events?
- Explique os seguintes cabeçalhos de solicitação e resposta:
- Diferença entre Expires, Date, Age e If-Modified
- Do Not Track
- Cache-Control
- Transfer-Encoding
- ETag
- X-Frame-Options
- O que são métodos HTTP? Liste e explique os métodos HTTP que conhece.
- O que é pré-busca (prefetching) de domínio e como isso ajuda na performance?
- O que é um CDN e qual é a sua vantagem?
⬆ Questões de código:
Questão: Qual é o valor de foo?
var foo = 10 + '20';Questão: Qual o retorno do código abaixo?
console.log(0.1 + 0.2 == 0.3);Questão: Como você faria isso funcionar?
add(2, 5); // 7
-add(2)(5); // 7Questão: Qual valor é retornado da seguinte declaração?
"sou uma lasanha".split("").reverse().join("");Questão: Qual é o valor de window.foo?
( window.foo || ( window.foo = "bar" ) );Questão: Qual o retorno dos dois alerts abaixo?
var foo = "Hello";
-(function() {
- var bar = " World";
- alert(foo + bar);
-})();
-alert(foo + bar);Questão: Qual o valor de foo.length?
var foo = [];
-foo.push(1);
-foo.push(2);Questão: Qual o valor d foo.x?
var foo = {n: 1};
-var bar = foo;
-foo.x = foo = {n: 2};Questão: O que o código abaixo imprime na tela?
console.log('one');
-setTimeout(function() {
- console.log('two');
-}, 0);
-Promise.resolve().then(function() {
- console.log('three');
-})
-console.log('four');Questão: Qual a diferença entra essas quatro promessas?
doSomething().then(function () {
- return doSomethingElse();
-});
-
-doSomething().then(function () {
- doSomethingElse();
-});
-
-doSomething().then(doSomethingElse());
-
-doSomething().then(doSomethingElse);Questão: Qual será a saída do código abaixo para o console e por quê?
(function(){
- var a = b = 3;
-})();
-
-console.log("a defined? " + (typeof a !== 'undefined'));
-console.log("b defined? " + (typeof b !== 'undefined'));Questão: Considere as duas funções abaixo. Ambos retornarão a mesma coisa? Por que ou por que não?
function foo1()
-{
- return {
- bar: "hello"
- };
-}
-
-function foo2()
-{
- return
- {
- bar: "hello"
- };
-}⬆ Questões Divertidas:
- Qual a coisa mais legal que você desenvolveu recentement? Qual você ficou mais orgulhoso?
- Quais suas partes favoritas sobre as ferramentas de desenvolvimento que você usa?
- Você teve algum projeto prediletos? Qual tipo?
- Qual sua feature favorita do Internet Explorer?
⬆ Licença:
Lançado sobre a Licença MIT. Veja o arquivo LICENSE para detalhes.