Artigo original: https://www.freecodecamp.org/news/how-to-become-a-frontend-developer/

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.