As entrevistas técnicas na área de front-end são difíceis. Isso é um fato. Você não precisa apenas de um conhecimento sólido em fundamentos ciência da computação, mas também precisa de um entendimento relacionado ao desempenho da web, construção de sistemas e engines de layout com o CSS.

Apesar de existirem recursos por ai, eu encontrei apenas algumas guias para ajudar você a se preparar para uma entrevista na área de front-end. Então, eu decidi escrever um artigo em tópicos que espero poder ajudar você a se sair bem em sua próxima entrevista.

Antes da entrevista

Antes de sua entrevista, pergunte ao seu recrutador qual o formato da entrevista. Em algumas entrevistas é usado o quadro branco, enquanto em outras é usado um editor de texto on-line como o CoderPad. É importante você saber para que possa praticar no ambiente que ocorrerá na entrevista.

Pergunte para seu recrutador quais tópicos você deve focar quando estiver se preparando. A razão por trás disso é porque além de perguntas especificas de front-end, algumas empresas farão perguntas tradicionais de ciência da computação, sobre tópicos como algoritmos de busca e classificação.

Conceitos de front-end

HTML, CSS, JavaScript e padrões de design em JavaScript são as chaves do que você deverá encontrar durante uma entrevista. Examine a lista e certifique-se de que está confortável com cada tópico.

HTML e CSS são o básico do desenvolvimento para front-end. Durante as entrevistas, você deve está preparado para as perguntas sobre nuances do HTML e CSS. Desde já, esteja preparado para programar um layout baseado em um mockup.

Se você precisar relembrar alguma coisa de HTML e CSS, aqui estão alguns conceitos básicos para praticar (em inglês):

• Animações em CSS
• Sprites em CSS
• Pseudoclasses
• Sistemas de grid
• Marcação semântica

Além desses conceitos, estude sobre pré-processadores de CSS, como SASS ou LESS e seus benefícios. Também procure entender as convenções de nomenclaturas do CSS como BEM e OOCSS.

Outro ponto importante é que os entrevistadores buscam candidatos que defendam boas praticas de CSS. Como uma boa referência, esse guia escrito por um desenvolvedor de front-end do Medium proporciona informações sobre como o Medium chegou até sua arquitetura de CSS atual.

Eu mencionei inicialmente que alguns entrevistadores pedirão para você recriar layouts em HTML e CSS. Faça isso em um playground como o CodePen. Pesquise no Dribbble, pois ele tem muitos designs simples que podem ser divertidos de recriar.

Finalmente, como desenvolvedores para front-end, estamos acostumados a fazer mudanças em nosso editor e depois verificar as mudanças em nosso navegador. Porém, na maioria das vezes durante as entrevistas, você não terá esse luxo. Quando você estiver se preparando para a entrevista, tente programar a maior parte de seu layout sem ficar olhando o resultado até o fim.

Se o HTML e o CSS são o básico do desenvolvimento para front-end, o JavaScript é o que faz as coisas acontecerem. As empresas durante a entrevista, gastarão um bom tempo testando seu conhecimento em JavaScript. Muitas questões girarão em torno dos seguintes conceitos (alguns dos textos em inglês):

• Herança e cadeia de protótipos
• Escopo
• Closures
• Event loop
• Bolhas de eventos
• Apply, call e bind
• Callbacks e promises
• Hoisting de variáveis e funções
• Currying

Quando receber uma pergunta de JavaScript, descubra em qual desses conceitos você esta sendo testado e será muito mais fácil descobrir a resposta certa. Se você se sente confiante em suas habilidades, teste seus conhecimentos aqui, aqui e aqui.

Os padrões de design em JavaScript fornecem soluções repetíveis de problemas comuns. Esses são alguns padrões de design que são importantes conhecer:

• Decorator
• Factory
• Singleton
• Módulo de revelação
• Facade
• Observer
• MVC, MVP, MVVM

Além dos padrões de design do JavaScript, é bom esta familiarizado com os frameworks do JavaScript. Isso não significa que você tem que aprender outro framework antes da sua entrevista. Em vez disso, aprenda quando e por que as equipes de front-end usam frameworks. Além disso, se você está participando de uma entrevista que envolve algo como React + Flux ou Angular, revise um pouco da documentação de arquitetura do framework antes.

Conceitos da ciência da computação

Algumas empresas contratam engenheiros de software antes de desenvolvedores para front-end. Isso significa que as empresas esperam que você tenha um bom conhecimento em alguns tópicos, como princípios de design de software, arquitetura de código escalável e testes.

Se seu recrutador sugerir que você revise seus conhecimentos em estruturas de dados e algoritmos, esta sessão é pra você. Caso contrário, sinta-se a vontade para pular a seção. Se você não tem formação em ciência da computação, sem problemas. A maior parte desses conceitos são fáceis de aprender.

Essas são as estruturas básicas que eu gostaria de sugerir. Não se prenda apenas na leitura, reserve um tempo para implementá-las em JavaScript. Se você não está familiarizado com testes unitários, teste sua estrutura de dados com uma biblioteca como o Mocha para aprender.

• Listas vinculadas
• Tabelas hash
• Pilhas e filas
• Árvores (árvores binárias e heaps)
• Grafos

Nota: para grafos, procure saber como implementar travessias de busca em profundidade e em largura.

Para as implementações dessas estruturas de dados, você pode consultar a SanFoundry. Todos os exemplos estão em Java, mas reimplementá-los em JavaScript é fácil.

Uma vez que você estiver confiante sobre estruturas de dados, você pode passar para a ordenação. Implemente os algoritmos em JavaScript, faça anotações sobre suas complexidades de tempo e espaço.

• Busca binária
• Ordenação de bolha (Bubble sort)
• Ordenação de inserção (Insertion sort)
• Ordenação de mescla (Merge sort)
• Ordenação rápida (Quick sort)
• Ordenação de seleção (Selection sort)

Depois de revisar estruturas de dados e algoritmos, teste seus conhecimentos com o Leetcode e com perguntas técnicas sobre JavaScript (links em inglês).

Para encerrar

Eu sei que é muita coisa para absorver, especialmente se você é novo na área de desenvolvimento para front-end. Comece se preparando para suas entrevistas com antecedência, então você se sentirá mais confortável quando chegar a hora.

Além do mais, lembre-se de que, independentemente do resultado, as entrevistas não medem o seu valor como programador. Algumas pessoas são boas nas entrevistas; outras, não. Às vezes você conquista o entrevistador; às vezes, não.

Se você tiver alguma dúvida, deixe uma nota no Twitter para o autor. Ele gostaria saber como foi sua entrevista. Boa sorte!

Se quiser saber mais, siga o autor no Twitter. Lá, ele publica informações sobre design, desenvolvimento para front-end, bots e aprendizagem de máquina.

Alguns dos profissionais mais bem pagos do mundo são desenvolvedores de front-end. Eles usam seus conhecimentos e talentos para criar sites atraentes e fáceis de usar.
Os desenvolvedores de front-end não precisam de um diploma ou certificado escolar para trabalhar. Em vez disso, eles devem entender os fundamentos do desenvolvimento de front-end, linguagens de programação e frameworks de desenvolvimento de front-end.
Neste guia, você aprenderá como se tornar um desenvolvedor de front-end, entendendo primeiramente o que o desenvolvimento de front-end envolve, as habilidades técnicas e sociais necessárias, as linguagens e estruturas disponíveis e algumas etapas para começar.
Um desenvolvedor de front-end nos Estados Unidos pode ganhar, em média, US$ 86.178 por ano, de acordo com o Glassdoor. De acordo com o Payscale, um desenvolvedor de front-end "típico" pode ganhar uma renda anual de até US$ 71.350.

Se você é novo no setor de tecnologia, pode estar confuso sobre o que significa front-end, bem como outros aspectos do desenvolvimento para a web, como back-end e full stack. Então, vamos começar com uma explicação sobre eles.

O que é o front-end?

Todos os sites pelos quais navegamos, os sites de comércio eletrônico nos quais compramos produtos, os blogs que lemos e assim por diante, são tornados fáceis de usar e esteticamente agradáveis pelos desenvolvedores de front-end.

Existem dois aspectos principais do desenvolvimento para a web a serem considerados ao criar sites e aplicações para a web: o front-end e o back-end.
O desenvolvimento de front-end está preocupado com a "fachada" de qualquer aplicação para a web, como o nome indica (em inglês, front-end significa a "parte frontal"). É com ela que o usuário interage e é ela que o usuário vê ao executar operações como clicar em um botão, rolar uma página, preencher um formulário e assim por diante. É a funcionalidade do lado do client de uma aplicação para a web.

O back-end (em inglês, back-end significa a "parte traseira") refere-se aos eventos que ocorrem nos bastidores, como a infraestrutura, a conexão e a comunicação com o banco de dados e assim por diante. Full stack refere-se a uma combinação de front-end e back-end.

O que faz um desenvolvedor de front-end?

Acabamos de discutir os vários aspectos do desenvolvimento para a web, front-end, back-end e full stack. Para acompanhar isso, também temos diferentes tipos de desenvolvedores com base nos aspectos do desenvolvimento para a web nos quais eles são proficientes. Portanto, temos desenvolvedores de front-end, desenvolvedores de back-end e desenvolvedores full stack.

Um desenvolvedor de front-end é um profissional responsável por criar a interface do usuário e a experiência do usuário (UI/UX) com a qual os usuários interagem para acessar a aplicação em questão. Eles são solucionadores de problemas que usam linguagens de programação, ferramentas, criatividade e experiência para criar um site ou aplicação que resolva o problema de um usuário e que tenha uma boa aparência.

Como dito anteriormente, um desenvolvedor de back-end é responsável por tudo relacionado ao back-end, incluindo a lógica, a comunicação com os banco de dados e muito mais.

Por fim, os desenvolvedores full stack são aqueles que entendem tanto do desenvolvimento de front-end quanto de back-end, permitindo que eles iniciem e terminem um projeto por conta própria.

Em uma configuração profissional ou empresa padrão, geralmente há um designer de UI/UX que projeta a aparência da interface e o que eles desejam que seja a experiência do usuário.

Em seguida, eles passarão seu design para os desenvolvedores de front-end e back-end, que agora trabalham na implementação para que a aplicação que eles projetaram funcione na web. O desenvolvedor de front-end recriará o design, escrevendo o programa em HTML, CSS e JavaScript.

Como tornar-se um desenvolvedor de front-end

Até agora, discutimos o que significa front-end e quem é o desenvolvedor de front-end. Agora, vamos ver alguns dos principais requisitos/habilidades necessários antes que você possa se chamar de desenvolvedor de front-end.

É importante entender que você não precisa saber tudo antes de trabalhar como desenvolvedor de front-end, mas os fundamentos, como HTML, CSS e JavaScript, são sempre essenciais.

1. Aprenda HTML, CSS e JavaScript

Quando você olha para um site na web, as três coisas mais importantes que compõem o que você vê na web são o HTML, o CSS e o JavaScript. Portanto, essas são as três primeiras coisas a serem aprendidas como base para se tornar um desenvolvedor de front-end.

Eles são os blocos de construção para o desenvolvimento para a web e de aplicações. Portanto, você deve aprendê-los se quiser entrar no desenvolvimento para a web. Felizmente, existem vários recursos on-line disponíveis para ajudá-lo a aprender e a praticá-los.

O que é HTML?

HTML é a sigla para Hyper Text Markup Language (ou "linguagem de marcação de hipertexto", em português). Ele é o esqueleto de todas as páginas da web e aplicações, seu bloco de construção mais básico. Você usa HTML para estruturar sua página em elementos como parágrafos, seções, títulos, barras de navegação e assim por diante.

O HTML fornece a estrutura ao conteúdo que aparece em um site, como imagens, texto ou vídeos. Uma página que tenha apenas HTML é muito básica e pouco atraente, e precisará de estilo em CSS para torná-la apresentável.

O HTML é frequentemente a primeira linguagem que os desenvolvedores aprendem e é essencial para o trabalho de desenvolvimento de front-end. Quer saber mais sobre o HTML? Comece com a certificação em design responsivo para a web do freeCodeCamp e com o novo curso completo sobre HTML do Beau Carnes (texto em inglês).

O que é CSS?

CSS é a abreviação de Cascading Style Sheets (ou "folhas de estilo em cascata", em português), e você o usa para melhorar a aparência de uma página da web, adicionando estilos em CSS. Esses estilos tornam seu site mais atraente e agradável de ver e usar para o usuário final.

Você quer saber mais sobre  CSS? Para começar, verifique a segunda parte da certificação em Design Responsivo para a web do freeCodeCamp.

O que é JavaScript?

O HTML é uma linguagem de marcação e o CSS são as folhas de estilo. Então, temos o JavaScript, o terceiro bloco de construção. O JavaScript é uma linguagem de programação que permite que você torne suas páginas da web mais interativas. Isso pode incluir animações, estilo dinâmico, efeitos/comportamentos quando os botões são clicados, movimento dos jogos e assim por diante.

Se você quiser aprender JavaScript, consulte a certificação em algoritmos e estruturas de dados em JavaScript do freeCodeCamp. Você também pode complementar seu aprendizado com este excelente curso de introdução ao JS (texto em inglês).

2. Pratique programação

Existe uma expressão  popular que diz que "a prática leva à perfeição". Isso significa que você se tornará melhor em alguma coisa se a fizer com frequência.

Se você quer se tornar um desenvolvedor de front-end profissional, precisa praticar de forma consistente. Isso vai ajudá-lo a aprender os conceitos completamente (e não apenas na superfície). Quanto mais você praticar, mais (e melhor) você entenderá os conceitos.

3. Aprimore suas habilidades

"Aprenda constantemente. Sempre há mais uma coisa para aprender!" disse Steve Jobs. Isso vale em todos os aspectos da vida, incluindo programação e desenvolvimento de front-end.

À medida que novas tecnologias, ferramentas, sintaxe e abordagens são introduzidas, é sempre melhor manter-se atualizado com as novas tendências tecnológicas e evitar ficar para trás.

Isso ajudará você a aumentar suas habilidades como desenvolvedor de front-end, e você sempre poderá se manter atualizado, participando e interagindo com comunidades ativas de desenvolvedores. Existem muitas comunidades por aí, como a comunidade de desenvolvedores do freeCodeCamp e todas as outras comunidades locais que nos cercam, incluindo a sua.

4.Aprenda sobre a linha de comando e sobre controle de versão

Como desenvolvedor de front-end, você deve entender como a linha de comando funciona, pois ela permite acessar as funções do sistema operacional por meio de uma interface de texto. Muitos profissionais preferem as CLIs ("interfaces de linha de comando", em português) por sua velocidade e desempenho ao instalar bibliotecas e estruturas.

Desenvolvedores de front-end também devem estar familiarizados com sistemas de controle de versão, como o Git, que é o mais utilizado. Ao programar, você frequentemente desejará rastrear seu histórico de programação e outras informações.

O controle de versão torna isso muito mais fácil, pois permite que você e sua equipe se comuniquem e gerenciem (rastreiem) com eficiência todas as alterações feitas no código-fonte. Ele também fornece informações como quem fez as alterações e quais alterações foram feitas.

5. Compreenda as interfaces de programação de aplicativos (APIs)

Como desenvolvedor front-end profissional, você deve estar familiarizado com as APIs e com o modo de consumi-las e manipulá-las. Isso é fundamental para a comunicação com lógicas de back-end e bancos de dados.

Para interagir com APIs em JavaScript, você usará principalmente a API Fetch do navegador ou a biblioteca Axios. Este artigo (texto em inglês) explica como usar a API Fetch em JavaScript.

6. Aprenda e entenda as bibliotecas do JavaScript e do CSS

Hoje, existem inúmeras bibliotecas do JavaScript disponíveis, todas com o objetivo de facilitar o desenvolvimento de aplicações da web. Esses são scripts do JavaScript pré-escritos, que facilitam o desenvolvimento de aplicativos baseados em JavaScript.

Existem muitas delas, mas é melhor escolher uma e aprendê-la completamente, como o React, o Vue ou o Angular (três dos mais populares). Você pode conferir a certificação de bibliotecas de desenvolvimento em front-end do freeCodeCamp para aprender mais.

Existem também algumas bibliotecas de estilo que simplificam o estilo de suas páginas da web, como o Bootstrap, Sass/Scss, Tailwind e assim por diante.

7. Crie um portfólio on-line

Construir seu portfólio é uma maneira fácil de demonstrar sua experiência como desenvolvedor de front-end.

Se você está apenas começando como desenvolvedor de front-end, não precisa que cada parte de seu portfólio seja um projeto de cliente. Você pode assumir o comando e ser inventivo. Faça uso de novas ferramentas e bibliotecas para criar algo espetacular. À medida que sua carreira progride, você poderá apresentar ali mais projetos nos quais trabalhou.

Você também pode examinar os portfólios de seus colegas desenvolvedores de front-end para ver o que você gosta e o que não gosta. Então, sabendo o que você quer mostrar ao mundo, crie seu próprio site.

Aqui está um curso divertido (texto em inglês) que o ajudará a criar seu próprio site de portfólio com HTML, CSS e JavaScript – para que você possa praticar essas habilidades de desenvolvimento para a web.

Você também pode fazer com que amigos e membros da comunidade critiquem e testem seu site para garantir que tudo fique bem. Não se esqueça de que todas as palavras em seu site devem ajudá-lo a conseguir um ótimo trabalho. Você não quer que seja muito longo ou muito chato.

Aqui estão algumas dicas (texto em inglês) que o ajudarão a aumentar o nível do seu portfólio de desenvolvedor para realmente se destacar.

8. Cultive suas soft skills

Os desenvolvedores de front-end devem ser comunicadores eficazes (na escrita assim como na fala), pois devem interagir tanto com a equipe técnica quanto com o cliente.

Eles também devem ser excelentes comunicadores em seu código, pois é fundamental reservar um tempo para comentar e escrever a documentação apropriada em seu código para que você e outras pessoas possam entendê-lo facilmente, mesmo depois de muito tempo.

Os desenvolvedores de front-end também devem ter boa atenção aos detalhes e ser meticulosos em todos os aspectos de seu trabalho. Eles devem ter um olhar atento e ser capazes de detectar pequenos erros ou inconsistências ao criar páginas da web.

Os desenvolvedores de front-end também devem ser eternos aprendizes, pois os sites estão evoluindo e as expectativas de capacidade de resposta, acessibilidade e aparência estão sempre mudando. Os engenheiros de front-end devem permanecer o mais atualizados possível e quase certamente precisarão aprender novas linguagens de programação ou bibliotecas com o passar do tempo.

9. Comece a se candidatar a estágios ou empregos que você deseja

Depois de obter o conhecimento adequado em front-end, aprenda as habilidades necessárias e faça seu currículo (texto em inglês). Agora, você poderá começar a procurar oportunidades de trabalho em front-end.

Confira seus requisitos para ver em quais outras áreas você precisa melhorar como desenvolvedor de front-end.

Para concluir, sempre se candidate a empregos e nunca tenha medo de se candidatar. Isso dará a você alguma experiência para ajudá-lo a aprender como as empresas contratam e o que é preciso para ser contratado.

Conclusão

Neste artigo, aprendemos o que é um desenvolvedor de front-end e o que é preciso para se tornar um.

Também aprendemos que se tornar um desenvolvedor de front-end sem diploma não é apenas possível, mas também alcançável.

Uma pergunta final que a maioria das pessoas tem é sobre o tempo que leva para se tornar um desenvolvedor de front-end. Bem, o tempo que leva depende inteiramente do seu ritmo de aprendizado e de seu conhecimento prévio.

Apenas lembre-se de que você não deve comparar a si ou o seu ritmo de aprendizado com o de outros enquanto aprende. Reserve algum tempo a cada semana ou dia para aprender, faça o seu melhor para cumpri-lo e depois aproveite o processo.