Como se tornar um desenvolvedor front-end: habilidades e recursos [2022]

Como você gostaria de trabalhar em empresas líderes mundiais enquanto causa impacto por meio de um belo desenvolvimento de front-end?

Há uma grande demanda por artistas excepcionais da web moderna, e este guia mostrará como começar.

E como as pessoas que trabalham no software são algumas das pessoas mais bem recompensadas, vale a pena considerar adquirir essa nova habilidade. Você nunca sabe, pode eventualmente se transformar em uma carreira para você.

A primeira seção deste guia é dedicada a responder perguntas urgentes sobre desenvolvimento front-end. Se você sabe sobre responsabilidades, salários e outros aspectos de ser um desenvolvedor front-end, pode pular a segunda parte. A segunda seção deste guia é dedicada a recursos, tutoriais e dicas.

O que é desenvolvimento front-end?

Desenvolvimento Web front-end é a prática de usar HTML, CSS e JavaScript para criar aplicativos Web exclusivos. Aplicativos como sites, sites móveis, mas também aplicativos móveis e Aplicativos da Web progressivos.

Você também pode pensar desta forma, cada site que você navega, incluindo este, foi de alguma forma construído por um desenvolvedor front-end. Pelo menos no lado do cliente.

O que antes exigia ferramentas e estruturas extensas agora pode ser feito usando especificações nativas.

Embora o front-end seja um dos caminhos mais acessíveis no desenvolvimento de sites, também pode ser um dos mais desafiadores.

A tecnologia para criar sites está sempre mudando, o que significa que os desenvolvedores precisam adaptar suas habilidades às práticas mais recentes regularmente. Pode ser cansativo para um iniciante, mas fica melhor depois de um ou dois anos de prática sólida de desenvolvimento.

Você pode aprender desenvolvimento front-end de graça?

Você absolutamente pode!

Está ficando muito mais fácil aprender desenvolvimento web, principalmente graças ao grande fluxo de novos recursos, tutoriais e projetos de código aberto.

Projetos como o freeCodeCamp estão ajudando milhões de pessoas a escrever código para seus primeiros programas. E a blog freeCodeCamp está cheio de artigos interessantes não apenas sobre front-end, mas também sobre outros aspectos do desenvolvimento web. Vale a pena marcar!

Parece complicado? Fica mais fácil com a prática!

Embora a premissa deste guia seja ajudá-lo a aprender gratuitamente, não podemos ignorar os benefícios dos cursos pagos.

Existem muitas startups por aí atendendo a uma multidão determinada, e destacaremos algumas plataformas de cursos incríveis que até lhe darão um certificado no final de tudo.

Qual é o salário médio de um desenvolvedor front-end?

Um desenvolvedor front-end com experiência anterior pode esperar levar para casa mais de US$ 100.000 por ano se morar nos Estados Unidos.

Não é um número ruim!

Os desenvolvedores juniores podem esperar levar para casa a partir de US $ 60.000 ou mais.

E os salários na Europa também parecem bastante razoáveis; A Alemanha tem uma média de $ 50.000 por ano.

Digno de nota é que a popularidade do trabalho remoto explodiu nos últimos anos, o que significa que os desenvolvedores estão procurando equalizar seus salários em todos os níveis com os padrões internacionais. Esta é mais uma razão para considerar se tornar um desenvolvedor front-end!

Como encontrar um emprego como desenvolvedor front-end?

Tecnicamente, um trabalho deve ser a última coisa a se falar. Primeiro, você deve acumular as habilidades e depois pensar em oportunidades potenciais. Mas, como este post está estruturado como um guia, você sempre pode voltar e verificar esta seção para referência.

Os empregos remotos estão crescendo a uma taxa sem precedentes. Afinal, quem não gosta da ideia de trabalhar em casa, ou melhor, direto da praia?

Aqui está uma lista dos quadros de empregos mais populares para desenvolvedores front-end:

Esta é uma lista um tanto condensada de sites que fornecem recomendações para encontrar seu próximo trabalho de front-end. Outras alternativas que você tem são trabalhar em um projeto pessoal na esperança de torná-lo lucrativo ou gastar seu tempo fazendo shows freelance.

Recursos: Por onde começar.

Os recursos a seguir são sobre como começar. Estamos adotando uma abordagem razoavelmente linear a esse respeito. E pela simples razão de que há uma enorme quantidade de recursos por aí.

Para você começar rapidamente, nosso foco está em plataformas e ferramentas de front-end que se integram ao fluxo de trabalho moderno. Como resultado, você pode aprender a sintaxe de codificação básica a intermediária enquanto entende as ferramentas que controlam o fluxo de trabalho do desenvolvedor moderno.

  Como escolher o melhor

É altamente recomendável que você reserve um tempo com esses recursos, pois eles o prepararão para os cursos e tutoriais encontrados na segunda parte deste guia.

Codecademy

Se você gastar alguns minutos procurando recursos para aprender a codificar, o Codecademy será, sem dúvida, um dos seus primeiros acessos. Essa plataforma de aprender a codificar é bem conhecida e atendeu mais de 100 milhões de pessoas ao longo de sete anos.

Na época, o Codecademy era bastante revolucionário com sua interface de codificação dinâmica e interativa. E enquanto muitos seguiram o mesmo caminho, a Codecademy manteve um histórico consistente.

Hoje em dia, você pode obter um certificado após a conclusão, e muitos usaram o referido certificado para conseguir um emprego em uma startup de nível superior; como um desenvolvedor júnior, nada menos.

O tempo todo, há o argumento de que Codecademy não é suficiente.

Do ponto de vista de um desenvolvedor experiente – claro, talvez essa plataforma seja muito simples. Mas, se você está apenas aprendendo sobre desenvolvimento front-end, não há nada mais satisfatório do que seguir instruções passo a passo com resultados em tempo real.

Codecademy oferece aulas de HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL e Java.

Aprenda layout CSS

Como desenvolvedor front-end, você gastará uma quantidade razoável de tempo trabalhando com o layout. O layout é a tela sobre a qual você estrutura um site. Este texto do blog está posicionado dentro de uma linha, que faz parte de um contêiner maior.

E isso se aplica a todos os designs de páginas da web. Usando o Learn CSS Layout, você pode obter uma compreensão fundamental de como os contêineres e as linhas funcionam e também como posicionar o conteúdo exatamente onde deseja.

As ferramentas adicionais que você pode explorar são Flexbox Froggy por Flexbox fundamentos e Jardim da Grade por Rede fundamentos, respectivamente.

O layout é um tópico bastante importante para entender, então passe algumas horas mergulhando profundamente em sua experiência de layout. A melhor maneira de aprender é através da prática.

Bootstrap

Depois de entender como os layouts funcionam, é hora de fazer alguns experimentos concretos. Claro, você pode seguir em frente e tentar desenvolver uma interface do usuário personalizada como seu primeiro projeto, mas isso pode afastá-lo mais do que incentivá-lo a continuar.

Então, você precisa aprender sobre um framework ou dois. Um framework é uma maneira simples de começar com qualquer tipo de desenvolvimento web. Você recebe as ferramentas e a documentação para começar a criar sites interativos no primeiro dia. E um dos melhores a fazer isso é o Bootstrap.

Crie projetos responsivos e voltados para dispositivos móveis na Web com a biblioteca de componentes de front-end mais popular do mundo. Bootstrap é um kit de ferramentas de código aberto para desenvolvimento com HTML, CSS e JS.

Bootstrap é muito usado em toda a Web e é, sem dúvida, um dos frameworks de front-end mais populares do mundo.

Caramba, uma boa porcentagem dos sites que você visita diariamente está usando alguma funcionalidade do Bootstrap.

Uma das coisas fantásticas do Bootstrap é com que rapidez você pode começar. As páginas de documentação estão cheias de exemplos e casos de uso. E o melhor de tudo, o sistema de layout Bootstraps foi projetado com design responsivo em mente. Portanto, seus sites baseados em Bootstrap são automaticamente compatíveis com dispositivos móveis.

E se você gosta do que o Bootstrap tem a oferecer, aqui estão recursos adicionais sobre frameworks front-end populares:

Lista de verificação de front-end

Apesar da tecnologia que você está usando para construir seus sites, você ainda precisa seguir certas regras e regulamentos. Obviamente, pode-se optar por ignorar esses requisitos, mas ao custo da experiência do usuário e da compatibilidade digital.

A lista de verificação de front-end é uma excelente ferramenta na qual você pode fornecer a URL do seu site e a plataforma audita seu site quanto às práticas recomendadas no desenvolvimento de front-end. Isso inclui verificar se você otimizou suas imagens ou se está seguindo as melhores práticas de SEO.

Você deve tentar usar este aplicativo pelo tempo que for necessário para entender quais são os requisitos modernos para sites e aplicativos profissionais. Além disso, a interface do usuário não intrusiva e suave é um prazer absoluto de trabalhar.

Vue.js

Vue.js é um ótimo exemplo que mostra como uma pequena ideia/conceito pode se transformar em uma das coisas mais reconhecidas do mundo. De fato, o Vue.js conquistou a comunidade de front-end.

Essa estrutura progressiva ajuda os desenvolvedores a criar interfaces de usuário incríveis usando HTML e JavaScript.

A estrutura é totalmente apoiada pela comunidade – tanto no lado financeiro quanto no de desenvolvimento.

É o exemplo perfeito de como o código aberto pode se unir e fazer grandes coisas acontecerem. E, como desenvolvedor front-end, você deveria estudar mais sobre código aberto e por que é importante.

  Como alterar a conta do PayPal de comercial para pessoal

Aqui estão algumas leituras altamente recomendadas no Vue.js:

E por último, mas não menos importante, confira os diferentes projetos construídos com Vue.js no Demonstração do Vue.js local na rede Internet.

Fundamentos de front-end

Tudo o que vimos até agora foi gratuito e de código aberto em sua maior parte. Tudo que você precisa é se agarrar Texto sublime, e você pode estar no caminho certo para a experimentação de front-end, e com certeza deveria estar! Ler tutoriais e documentação do framework é apenas metade da batalha.

O verdadeiro aprendizado acontece no seu editor de texto e no navegador. A única desvantagem dessa abordagem é que ela não é totalmente sistemática. Você está operando no modo livre para todos, e os resultados podem variar de acordo com sua capacidade de se disciplinar.

A menos que você decida investir, e por investir, quero dizer gastar uma quantia simbólica para comprar qualquer um dos livros de front-end da Um livro à parte. Esses caras são alguns dos melhores do setor, e desenvolvedores de front-end veteranos recomendam repetidamente seus livros.

A seção de fundamentos de front-end tem um livro sobre SVG, CSS, HTML, JavaScript e Sass, que é o ponto de partida perfeito para fluxos de trabalho de front-end modernos.

GitHubGenericName

O GitHub é o seu escritório digital para codificação e desenvolvimento de tudo. É a maior plataforma de código aberto do mundo, que abriga a maioria das estruturas e ferramentas mais populares do mundo.

Com o GitHub, você pode hospedar seus projetos e receber outras pessoas para enviar suas contribuições. E você mesmo pode enviar contribuições para outros projetos.

Você também pode explorar o GitHub e tudo o que ele tem a oferecer. Por exemplo, o GitHub é o lar das famosas listas Awesome, que são coleções massivas de tutoriais, recursos, ferramentas e outras coisas para estruturas e tecnologias específicas.

Por exemplo, Lista de front-end incrível que inclui informações atualizadas sobre as últimas novidades sobre o front-end e para onde ele está indo.

Estouro de pilha

O Stack Overflow tem uma notória reputação de ser o site de programação de perguntas e respostas mais rigoroso do mundo. E realmente é assim.

Os usuários do Stack Overflow não aceitam levianamente perguntas que não foram pesquisadas ou analisadas adequadamente. E embora isso possa parecer decepcionante, ajuda a criar um forte senso de propósito.

Você vê, sempre que um usuário envia uma resposta a uma pergunta, outros usuários podem avançar e votar nessa resposta. No final, você obtém várias respostas ‘verificadas’ que respondem completamente às perguntas dos usuários. Como resultado, a hierarquia do site permanece clara e consistente.

Como desenvolvedor de front-end iniciante, você desejará usar o Stack Overflow para entender determinados tópicos, mas também para fazer perguntas, se necessário. Para a maioria das coisas para iniciantes, porém, você deve ser capaz de encontrar respostas concisas em segundos.

Tutoriais e cursos: Conhecendo o ecossistema.

A primeira seção foi dedicada inteiramente a recursos e plataformas que ajudarão você a começar. Você deve gastar uma quantidade razoável de tempo em cada recurso que listamos para que você possa ter uma ideia real do que esperar do desenvolvimento front-end.

Depois de ter feito tudo isso, você pode voltar sua atenção para tutoriais e cursos. Estes são recursos mais estritamente organizados com uma forte ênfase na aprendizagem.

O desenvolvimento front-end é uma coleção de ferramentas, estruturas, bibliotecas, software de teste e muito mais. Mas não deixe que o alcance absoluto disso te assuste!

Vale a pena notar que alguns dos cursos a seguir não estão disponíveis gratuitamente. No entanto, garantimos que as recomendações a seguir são absolutamente top de linha.

Além disso, plataformas como o Frontend Masters o deixarão atualizado com todas as tecnologias usadas nas startups mais bem-sucedidas do mundo.

O objetivo deste post não é promover o desenvolvimento front-end como um hobby, mas fornecer recursos palpáveis ​​para que você possa estar no caminho de estabelecer uma carreira a partir de todo o seu aprendizado.

Documentos da Web MDN

MDN (Mozilla Developer Network) vai fazer você conhecer de uma forma ou de outra. Esta plataforma de Documentação Web é inteiramente dedicada a promover o funcionamento da Web. Aqui você pode aprender sobre ferramentas para desenvolvedores, tecnologias web e o próprio desenvolvimento web.

Quando você procura por alguns detalhes em CSS ou HTML, geralmente é o MDN que aparece como o primeiro resultado no Google e em outros mecanismos de pesquisa. Os guias, especificações e insights gerais são estruturados de uma forma que faz sentido para desenvolvedores front-end.

Cursos edX Front-End

Como afirmado anteriormente neste guia, seguir um currículo rígido é uma maneira muito linear de aprender e se adaptar. E para começar com os cursos, você precisa conferir o que o edX tem a oferecer. Você não apenas pode obter certificados após a conclusão, mas também pode aprender no seu ritmo preferido.

Os cursos edX são totalmente estruturados, com uma ênfase clara em ajudar os alunos a entender os fundamentos de cada tópico do curso. No momento, você pode aprender tecnologias como JavaScript, HTML5, CSS3 e muito mais.

  Bluetooth 5.1: O que há de novo e por que é importante

Se você deseja obter o certificado completo de front-end, terá que fazer um investimento modesto de US $ 500 – mas isso também oferece acesso direto aos instrutores do curso e muito mais. Várias empresas usaram o edX para inscrever seus funcionários neste programa específico.

Mestres de front-end

O Frontend Masters é semelhante a uma experiência de bootcamp. Os cursos que você pode encontrar nesta plataforma são extremamente completos, com ênfase em conteúdo de formato longo e aprendizado orientado a projetos.

Aqui você pode aprender sobre tecnologias como React, Vue, Angular, Node.js e muito mais. A qualidade da produção é extremamente alta para que você possa desfrutar de uma experiência semelhante à de um curso Bootcamp real.

Como usuário registrado, você pode acompanhar seu progresso no Aprender página. Esta página acompanha seu progresso de aprendizado, mostrando porcentagens para cada tecnologia individualmente, mas também porcentagens para pilhas inteiras. É uma maneira divertida de se manter motivado.

Por último, mas não menos importante, ter uma conclusão do curso de mestrado Frontend em seu currículo não passará despercebido pelo seu empregador.

Cabeça de ovo

Egghead é muito parecido com a plataforma mencionada acima, mas se destaca com lições mais firmes e condensadas. Por exemplo, a lição ‘Construindo listas dinâmicas no Flutter com ListViews’ tem apenas 2 minutos, embora forneça material de aprendizado suficiente para entender o conceito de verdade.

Egghead fornece tutoriais e cursos sobre frameworks, bibliotecas, linguagens, ferramentas e plataformas. Quer aprender sobre desenvolvimento mobile? Não é um problema, Egghead tem material de curso para iOS, Android e outras plataformas.

O preço anual é de modestos $ 250, mas isso concede acesso a todos os cursos e tutoriais encontrados no site. Você também pode discutir cada lição com outros membros da comunidade. Vale a pena o investimento!

Truques de CSS

Chris Coyier é uma lenda absoluta na comunidade CSS. Ele não apenas acompanha o CSS-Tricks há mais de uma década, mas também é cofundador da CodePen — uma plataforma popular de compartilhamento de código para desenvolvedores da web.

Uma coisa com a qual você pode contar sobre o CSS-Tricks é que ele permanece constantemente atualizado e as histórias são publicadas com base em tópicos e tecnologias atuais. Como resultado, você pode aumentar rapidamente seu conjunto de habilidades usando os tutoriais fornecidos por muitos dos autores do site.

Em suma, é um site útil para manter em seus favoritos e verificar uma vez por dia. Você obterá imenso valor dos próprios tutoriais, mas também das recomendações que os acompanham.

escocês

Scotch é tanto um recurso de aprendizado quanto um lugar para os últimos acontecimentos em desenvolvimento web. Existente desde 2014 – o site acumulou um enorme número de seguidores ao lado de milhares de tutoriais gratuitos de desenvolvimento web.

Os autores escoceses se concentram fortemente em tecnologias como Vue, React, Laravel, Angular, JavaScript, Node.js e similares. E não pense que estes são alguns tutoriais falsos também.

Na maioria das vezes, você criará aplicativos reais e tangíveis. Por exemplo, você gostaria de aprender a construir um clone do Twitter Vue e Adonis? Não é um problema, basta se inscrever no curso gratuito, e você estará pronto.

Site maravilhoso e não posso recomendá-lo o suficiente para desenvolvedores de front-end novos e existentes!

Dicas: Se não houver luta, não há progresso.

Já que você chegou até aqui, você também pode se deliciar com algumas das dicas a seguir. Embora o front-end seja uma escolha de carreira lucrativa, envolve uma curva de aprendizado bastante íngreme e um pouco de dor de cabeça enquanto você se concentra na linha do tempo atual.

No entanto, pelo nível de oportunidades, você pode atrair – vale a pena a batalha árdua!

Aprenda dentro da razão.

Por que você está aprendendo a programar? Você quer conseguir um emprego melhor? Você gostaria de construir sites criativos? Descubra o seu motivo, porque será útil. Será útil naqueles dias, até semanas, quando você estiver batendo a cabeça contra a parede – questionando se isso vale a pena.

Encontre sua tribo.

Você vai querer fazer pelo menos algumas conexões com pessoas que pensam como você e até mesmo mentores, se possível. Quando fui pegar emprestado um livro de Pascal de um professor de CS da minha antiga escola, ele foi super amigável e aberto à ideia de me ajudar com qualquer problema que eu pudesse ter. Considere uma rota semelhante, encontrando uma comunidade local ou encontrando outros desenvolvedores em comunidades online. É muito mais fácil aprender quando alguém aponta o dedo para onde você precisa olhar.

Evite aprender tudo.

Não coloque o fardo de ter que saber tudo sobre si mesmo. Quando se trata de front-end, começar com HTML5 e CSS3 é mais que suficiente. JavaScript é como a cereja no topo do bolo, então tenha cuidado com a quantidade de cobertura que você recebe, porque você pode inchar! Depois de se sentir confortável com o básico, explore novas áreas, tópicos e estruturas. Pequenas e compactas mordidas de aprendizado são a chave aqui.

Se quiser saber mais, leia este post por Ali Spittel onde ela está compartilhando mais de 25 dicas para novos desenvolvedores.

Saia daí

O que você está esperando? Vá lá e comece a aprender! Certifique-se de verificar este guia para desenvolvimento front-end a cada poucos meses para novas atualizações e dicas.

Boa sorte!