Este artigo lhe diz o que voc\u00ea precisa saber sobre o que os desenvolvedores frontend fazem, as habilidades que eles precisam e como voc\u00ea pode conseguir o trabalho.<\/p>\n
Voc\u00ea \u00e9 um empregador que quer contratar um desenvolvedor frontend? N\u00f3s cobrimos isso tamb\u00e9m.<\/p>\n
O que \u00e9 um desenvolvedor frontend?<\/h2>\n
Um desenvolvedor frontend usa c\u00f3digo para implementar um site ou projeto de aplicativo.<\/p>\n
Suas principais ferramentas s\u00e3o HTML<\/a>, CSS<\/a> e JavaScript<\/a> – HTML para a estrutura geral e conte\u00fado do site, CSS para estilo e JavaScript para interatividade avan\u00e7ada.<\/p>\n Desenvolvimento frontend \u00e9 o desenvolvimento da interface do usu\u00e1rio do site. Qualquer coisa que o usu\u00e1rio possa visualizar ou interagir (como o layout, imagens, menus ou formul\u00e1rio de login) \u00e9 considerado o frontend do site.<\/p>\n O outro tipo prim\u00e1rio de desenvolvimento web \u00e9 o desenvolvimento backend. O usu\u00e1rio n\u00e3o v\u00ea o trabalho de um desenvolvedor backend, mas isso torna o site poss\u00edvel. O backend de um site inclui servidores, bancos de dados, l\u00f3gica backend e APIs.<\/p>\n Voc\u00ea tamb\u00e9m ouvir\u00e1 o termo “desenvolvimento Full Stack”. Desenvolvedores Full Stack s\u00e3o generalistas que fazem desenvolvimento tanto frontend quanto backend.<\/p>\n\n Um desenvolvedor frontend constr\u00f3i e mant\u00e9m a interface p\u00fablica de um site ou aplicativo. Exemplos das partes de um site em que eles trabalham incluem:<\/p>\n Um desenvolvedor frontend \u00e9 respons\u00e1vel pela constru\u00e7\u00e3o de um site ou aplicativo que proporcione uma experi\u00eancia agrad\u00e1vel para o usu\u00e1rio. Isso significa que ele tem boa apar\u00eancia e funciona do jeito que deveria.<\/p>\n Os desenvolvedores do frontend normalmente n\u00e3o s\u00e3o respons\u00e1veis pelo design do site. No entanto, eles trabalhar\u00e3o de perto com os designers de UI e UX para transformar suas id\u00e9ias em realidade.<\/p>\n Uma vez que o site ou aplicativo \u00e9 constru\u00eddo, os desenvolvedores do frontend s\u00e3o respons\u00e1veis pela manuten\u00e7\u00e3o, testes e desenvolvimentos cont\u00ednuos, como atualiza\u00e7\u00f5es de recursos.<\/p>\n Todo desenvolvedor do frontend precisa ser habilidoso com HTML, CSS e JavaScript. Essas tr\u00eas linguagens s\u00e3o a base de quase tudo o que voc\u00ea ir\u00e1 fazer.<\/p>\n Voc\u00ea precisar\u00e1 de outras habilidades tamb\u00e9m, mas o mesmo conjunto de habilidades exigido variar\u00e1 de emprego para emprego.<\/p>\n A lista abaixo cobre algumas das habilidades mais comuns necess\u00e1rias para trabalhos de desenvolvimento frontend. Conhecer o maior n\u00famero poss\u00edvel far\u00e1 de voc\u00ea o melhor candidato para uma ampla gama de cargos.<\/p>\n HTML e CSS<\/a> andam de m\u00e3os dadas e s\u00e3o os blocos de constru\u00e7\u00e3o do design do site.<\/p>\n HTML significa HyperText Markup Language (Linguagem de marca\u00e7\u00e3o HyperText). Ele define a estrutura de uma p\u00e1gina web. Por exemplo, voc\u00ea usar\u00e1 HTML para indicar para onde os cabe\u00e7alhos v\u00e3o, onde colocar uma quebra de par\u00e1grafo e onde inserir uma imagem. Todos os textos e imagens que voc\u00ea est\u00e1 vendo nesta mesma p\u00e1gina s\u00e3o todos gra\u00e7as ao HTML.<\/p>\n CSS significa Cascading Style Sheets, e trata de estilo. Por exemplo, CSS pode ditar a cor de fundo ou a fonte. Voc\u00ea pode usar uma \u00fanica stylesheet (folha de estilo) CSS para definir estilos em um site (ou seja, v\u00e1rias p\u00e1ginas ao mesmo tempo).<\/p>\n Um bom desenvolvedor frontend \u00e9 experiente com HTML e CSS e pode rapidamente entender como us\u00e1-los juntos para criar um design.<\/p>\n Por sorte, HTML e CSS s\u00e3o muito f\u00e1ceis de aprender. Mas domin\u00e1-los verdadeiramente pode levar tempo.<\/p>\n Uma vez que voc\u00ea tenha aprendido o b\u00e1sico, voc\u00ea pode praticar suas habilidades de codifica\u00e7\u00e3o observando os sites existentes e tentando clonar o layout e as caracter\u00edsticas que voc\u00ea v\u00ea.<\/p>\n Enquanto o HTML define a estrutura e o CSS define o estilo, o JavaScript torna um site interativo.<\/p>\n Se um site est\u00e1 fazendo mais do que exibir informa\u00e7\u00f5es est\u00e1ticas, provavelmente \u00e9 gra\u00e7as ao JavaScript. Por exemplo, voc\u00ea pode usar JavaScript para criar um mapa que \u00e9 atualizado em tempo real ou para animar parte do seu site.<\/p>\n De acordo com uma pesquisa StackOverflow, JavaScript \u00e9 a linguagem de programa\u00e7\u00e3o mais usada <\/a>por desenvolvedores web profissionais. A pr\u00f3xima linguagem mais popular \u00e9 HTML\/CSS.<\/p>\n JavaScript \u00e9 mais complexo do que HTML ou CSS, mas ainda \u00e9 uma das linguagens de programa\u00e7\u00e3o mais acess\u00edveis. Preveja aprend\u00ea-lo em apenas alguns meses.<\/p>\n As bibliotecas e frameworks JavaScript<\/a> s\u00e3o ferramentas que tornam o desenvolvimento JavaScript mais r\u00e1pido e f\u00e1cil.<\/p>\n Uma biblioteca JavaScript \u00e9 um conjunto de c\u00f3digos reutiliz\u00e1veis que voc\u00ea pode colocar em seu projeto. Ela lhe poupa o trabalho de desenvolver um recurso do zero quando outros desenvolvedores j\u00e1 o fizeram.<\/p>\n H\u00e1 mais de 83 bibliotecas existentes, cada uma com um prop\u00f3sito espec\u00edfico. Por exemplo, Chart.js \u00e9 uma biblioteca que permite que voc\u00ea crie facilmente gr\u00e1ficos para o seu site.<\/p>\n Uma biblioteca JavaScript com a qual voc\u00ea deve estar familiarizado \u00e9 o React. React \u00e9 uma biblioteca gratuita e de c\u00f3digo aberto, mantida pelo Facebook. \u00c9 usada para construir interfaces de usu\u00e1rio para aplicativos de p\u00e1gina \u00fanica e \u00e9 atualmente a biblioteca JavaScript mais popular.<\/p>\n Os frameworks JavaScript s\u00e3o similares a bibliotecas. Ambos fornecem c\u00f3digo reutiliz\u00e1vel, mas o uso \u00e9 um pouco diferente.<\/p>\n Quando voc\u00ea usa uma biblioteca, voc\u00ea \u00e9 o respons\u00e1vel pelo fluxo da aplicativo. Voc\u00ea decide onde em seu c\u00f3digo deve chamar um componente de biblioteca.<\/p>\n Com as frameworks, voc\u00ea est\u00e1 ligando seu c\u00f3digo \u00e0 estrutura. Ao inv\u00e9s de seu c\u00f3digo chamar a biblioteca, o framework chama seu c\u00f3digo em pontos designados.<\/p>\n Algumas das frameworks populares com as quais voc\u00ea deve estar familiarizado s\u00e3o Angular.js<\/a> e Vue.js<\/a>.<\/p>\n Node.js<\/a> \u00e9 frequentemente chamado erroneamente de framework ou uma linguagem de programa\u00e7\u00e3o, mas \u00e9 um ambiente de tempo de execu\u00e7\u00e3o para desenvolvimento frontend e backend.<\/p>\n Tipicamente, o navegador do usu\u00e1rio renderiza JavaScript. Node.js permite que voc\u00ea execute seu c\u00f3digo JavaScript fora de um navegador.<\/p>\n O Node.js \u00e9 popular porque torna o desenvolvimento web mais eficiente. Ele permite que programadores criem o frontend e backend de um aplicativo usando uma \u00fanica linguagem de programa\u00e7\u00e3o.<\/p>\n Voc\u00ea pode ter que usar o Node.js em seu trabalho de desenvolvedor frontend, ent\u00e3o \u00e9 uma coisa boa de aprender. Voc\u00ea pode baix\u00e1-lo e instal\u00e1-lo voc\u00ea mesmo<\/a> para que possa praticar.<\/p>\n Ajax \u00e9 a abrevia\u00e7\u00e3o de Asynchronous JavaScript and XML. Ajax n\u00e3o \u00e9 uma tecnologia por si s\u00f3<\/a>, mas um conjunto de t\u00e9cnicas de programa\u00e7\u00e3o.<\/p>\n Ajax \u00e9 sobre desenvolvimento ass\u00edncrono. Isso significa que voc\u00ea pode atualizar o conte\u00fado da web em uma parte de uma p\u00e1gina web sem recarregar a p\u00e1gina inteira.<\/p>\n Um exemplo t\u00edpico \u00e9 o auto-complete. Quando voc\u00ea come\u00e7a a digitar uma consulta de pesquisa no Google, o mecanismo de pesquisa lhe oferecer\u00e1 op\u00e7\u00f5es de auto-completar. Ele pode fazer isso sem recarregar toda a p\u00e1gina de resultados da pesquisa.<\/p>\n Muitos trabalhos de desenvolvimento frontend exigem familiaridade com os conceitos do Ajax. Uma vez que voc\u00ea tenha dominado o JavaScript, tutoriais online podem ensin\u00e1-lo a us\u00e1-lo para o Ajax.<\/p>\n Dependendo do projeto em que voc\u00ea est\u00e1 trabalhando, voc\u00ea pode querer conhecer outras linguagens de programa\u00e7\u00e3o<\/a> al\u00e9m do JavaScript.<\/p>\n Por exemplo, o TypeScript \u00e9 uma linguagem de programa\u00e7\u00e3o cada vez mais popular desenvolvida pela Microsoft. O Typescript \u00e9 um super conjunto de JavaScript. Ao contr\u00e1rio do JavaScript, ele foi projetado para criar aplicativos de n\u00edvel empresarial.<\/p>\n O JavaScript \u00e9 uma linguagem essencial para se conhecer, mas uma vez que voc\u00ea \u00e9 proficiente com ele, voc\u00ea pode olhar para outras possibilidades como:<\/p>\n Conhecer uma ou duas linguagens de programa\u00e7\u00e3o al\u00e9m do JavaScript pode diferenci\u00e1-lo como um candidato a emprego.<\/p>\n N\u00f3s j\u00e1 falamos sobre frameworks e bibliotecas para JavaScript.<\/p>\n O CSS tamb\u00e9m faz uso de frameworks. O mais importante \u00e9 o Bootstrap.<\/p>\n Bootstrap \u00e9 uma cole\u00e7\u00e3o gratuita de pe\u00e7as de c\u00f3digo reutiliz\u00e1veis escritas em HTML, CSS, e (opcionalmente) JavaScript. Ele permite que os desenvolvedores criem rapidamente sites de dispositivos moveis responsiveis.<\/p>\n Como um desenvolvedor frontend, \u00e9 \u00fatil ter pelo menos um conhecimento b\u00e1sico do Bootstrap. H\u00e1 muitos cursos online e tutoriais dispon\u00edveis, mas n\u00e3o se aprofunde at\u00e9 que voc\u00ea tenha desenvolvido uma forte compreens\u00e3o de HTML e CSS.<\/p>\n Um Sistema de Gerenciamento de Conte\u00fado<\/a> \u00e9 um software que ajuda os usu\u00e1rios a criar, editar e gerenciar conte\u00fado em um site sem a necessidade de habilidades t\u00e9cnicas.<\/p>\n Por exemplo, voc\u00ea pode digitar um post no blog e adicion\u00e1-lo ao seu site sem se preocupar com o HTML e CSS usados para exibir o post.<\/p>\n O WordPress \u00e9 de longe o CMS mais popular. Outros que voc\u00ea vai encontrar incluem Drupal, Joomla! e Ghost.<\/p>\n Como um desenvolvedor frontend, voc\u00ea trabalhar\u00e1 frequentemente em sites que utilizam um CMS. O conhecimento de trabalho destas plataformas \u00e9 uma habilidade comercializ\u00e1vel.<\/p>\n Voc\u00ea tamb\u00e9m pode ser capaz de fazer alguns trabalhos criando novos temas para WordPress<\/a> ou outros Sistemas de Gerenciamento de Conte\u00fado.<\/p>\n Uma API (Application Programming Interface) permite que um aplicativo ou servi\u00e7o acesse um recurso dentro de outro aplicativo ou servi\u00e7o.<\/p>\n Por exemplo, um desenvolvedor pode querer integrar dados meteorol\u00f3gicos em seu site. Eles poderiam usar uma API que alcance um servi\u00e7o meteorol\u00f3gico e obtenha os dados.<\/p>\n As APIs RESTful s\u00e3o um tipo de API que est\u00e1 de acordo com as restri\u00e7\u00f5es do estilo arquitet\u00f4nico REST (Representational State Transfer) e permite a conex\u00e3o com os servi\u00e7os web RESTful.<\/p>\n Como desenvolvedor frontend, voc\u00ea n\u00e3o precisar\u00e1 escrever suas APIs para que outros as chamem (isso \u00e9 um trabalho backend), mas voc\u00ea deve saber como chamar uma API e exibi-la de forma significativa em seu site.<\/p>\n Atualmente, os visitantes de um site utilizam uma grande variedade de navegadores e dispositivos.<\/p>\n N\u00e3o basta um site ficar bem na tela de um laptop quando os dispositivos m\u00f3veis respondem por 54,8%<\/a> do tr\u00e1fego global do site.<\/p>\n Alguns sites ter\u00e3o vers\u00f5es separadas para vers\u00f5es desktop e mobile, mas mais comumente, voc\u00ea precisar\u00e1 construir o site para ser amig\u00e1vel para dispositivos m\u00f3veis<\/a>.<\/p>\n Um site responsivo \u00e9 projetado para renderizar bem em qualquer dispositivo, janela, ou tamanho de tela.<\/p>\n \u00c9 importante se um site \u00e9 m\u00f3vel-responsivo. 45%<\/a> dos consumidores abandonar\u00e3o qualquer peda\u00e7o de conte\u00fado que esteja mal exibido no dispositivo que est\u00e3o usando.<\/p>\n Como n\u00e3o existe mais um site que n\u00e3o precisa mais trabalhar com celulares, entender os princ\u00edpios de design responsivo \u00e9 uma habilidade n\u00e3o negoci\u00e1vel para um desenvolvedor frontend.<\/p>\n O design responsivo \u00e9 realizado atrav\u00e9s de HTML e CSS. N\u00e3o \u00e9 intuitivo, mas muitos cursos e recursos online est\u00e3o dispon\u00edveis.<\/p>\n Um site precisa ter boa apar\u00eancia e funcionar bem em qualquer navegador. Enquanto o Chrome \u00e9 o navegador mais popular<\/a>, os desenvolvedores n\u00e3o devem ignorar o Safari, Edge ou Firefox.<\/p>\n Parte do seu trabalho como desenvolvedor frontend ser\u00e1 assegurar que seu trabalho tenha boa apar\u00eancia em qualquer navegador principal. Isso significa entender as diferen\u00e7as entre os navegadores e testar seus projetos neles.<\/p>\n Voc\u00ea pode ler sobre o desenvolvimento entre plataformas em sites populares de recursos de codifica\u00e7\u00e3o. Voc\u00ea tamb\u00e9m deve praticar. Quando voc\u00ea faz projetos por conta pr\u00f3pria, por favor, n\u00e3o deixe de test\u00e1-los em m\u00faltiplos navegadores.<\/p>\n H\u00e1 tamb\u00e9m ferramentas dispon\u00edveis para ajud\u00e1-lo a fazer testes de cross-browser. Algumas que t\u00eam vers\u00f5es gratuitas incluem:<\/p>\n Um sistema de controle de vers\u00e3o ajuda voc\u00ea a acompanhar as mudan\u00e7as feitas no c\u00f3digo do seu site. Voc\u00ea pode us\u00e1-las para reverter para uma vers\u00e3o anterior do c\u00f3digo se algo der errado.<\/p>\n Isso pode economizar muito tempo no caso de um erro. Ao inv\u00e9s de encontrar o problema e desfaz\u00ea-lo manualmente, voc\u00ea pode reverter o projeto para uma vers\u00e3o anterior.<\/p>\n Os sistemas de controle de vers\u00e3o tamb\u00e9m s\u00e3o essenciais para a colabora\u00e7\u00e3o. Eles permitem que v\u00e1rios usu\u00e1rios trabalhem no mesmo projeto sem vers\u00f5es conflitantes.<\/p>\n Git \u00e9 o sistema de gerenciamento de controle de vers\u00e3o mais popular e ser\u00e1 necess\u00e1rio para muitos trabalhos de desenvolvimento, seja frontend, backend ou full-stack. Comece a aprender instalando Git <\/a>e criando uma conta no GitHub.com<\/a>.<\/p>\n A qualifica\u00e7\u00e3o mais importante para se tornar um desenvolvedor frontend<\/a> \u00e9 a profici\u00eancia em HTML, CSS, JavaScript, e algumas das outras habilidades listadas acima. Sem capacidade de codifica\u00e7\u00e3o, nada mais no seu curr\u00edculo importa.<\/p>\n Hoje em dia, \u00e9 poss\u00edvel aprender a codificar por conta pr\u00f3pria usando recursos online.<\/p>\n 40.39%<\/a> dos desenvolvedores web atuais fizeram um curso de codifica\u00e7\u00e3o online, 31,62% aprenderam em f\u00f3runs online e 59,53% usaram outros recursos online como blogs ou v\u00eddeos.<\/p>\n Para aprender a desenvolver a web, confira sites como:<\/p>\n \u00c9 poss\u00edvel ensinar c\u00f3digo a si mesmo, mas isso n\u00e3o significa que sua educa\u00e7\u00e3o formal n\u00e3o importa. Muitos trabalhos de desenvolvedor frontend preferem ou at\u00e9 mesmo exigem que voc\u00ea tenha um diploma relacionado. Se voc\u00ea n\u00e3o tem um, voc\u00ea ter\u00e1 que ter certeza de que seu portf\u00f3lio de desenvolvimento web<\/a> fala por si mesmo.<\/p>\n Ent\u00e3o, como voc\u00ea cria um portf\u00f3lio se voc\u00ea n\u00e3o tem experi\u00eancia de trabalho?<\/p>\n Uma maneira de mostrar suas habilidades de desenvolvimento de frontend \u00e9 construir sites e aplicativos de forma independente. Crie uma ferramenta relacionada aos seus interesses ou veja se algu\u00e9m que voc\u00ea conhece precisa de trabalho de desenvolvimento feito.<\/p>\n Tornar-se um desenvolvedor web \u00e9 um grande passo na carreira. N\u00f3s podemos esperar ver um crescimento de 8% no emprego<\/a> na pr\u00f3xima d\u00e9cada. S\u00e3o cerca de 13.400 vagas de emprego por ano – um crescimento muito mais r\u00e1pido do que a m\u00e9dia das profiss\u00f5es.<\/p>\n Tanto os desenvolvedores frontend quanto os de backend est\u00e3o em demanda, mas h\u00e1 um pouco mais de vagas de trabalho para desenvolvedores frontend. No Indeed.com, h\u00e1 atualmente 14.600<\/a> vagas abertas para desenvolvedores frontend nos EUA, enquanto 12.300 est\u00e3o dispon\u00edveis para desenvolvedores de backend.<\/p>\n De acordo com Glassdoor, o sal\u00e1rio m\u00e9dio do desenvolvedor do frontend<\/a> \u00e9 de US$ 86.088<\/a>.<\/p>\n Mas essa n\u00e3o \u00e9 a hist\u00f3ria toda.<\/p>\n Os sal\u00e1rios dos desenvolvedores web<\/a> podem variar muito dependendo do tipo de empresa, das habilidades necess\u00e1rias para o trabalho, da sua localiza\u00e7\u00e3o e do seu n\u00edvel de experi\u00eancia. Voc\u00ea pode esperar ganhar um sal\u00e1rio mais alto se voc\u00ea ficar com ele por anos. Pessoas com o t\u00edtulo de desenvolvedor s\u00eanior de frontend ganham em m\u00e9dia US$ 107.276.<\/p>\n Muitos desenvolvedores web est\u00e3o por a\u00ed, mas os verdadeiramente talentosos s\u00e3o dif\u00edceis de encontrar.<\/p>\nO que \u00e9 desenvolvimento frontend?<\/h3>\n
![\"Desenvolvimento](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-48.png\")
O que faz um desenvolvedor frontend?<\/h2>\n
\n
Quais s\u00e3o as responsabilidades de um desenvolvedor frontend?<\/h3>\n
Que habilidades voc\u00ea precisa para ser um desenvolvedor frontend?<\/h2>\n
HTML e CSS<\/h3>\n
JavaScript<\/h3>\n
![\"Linguagens](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-56.png\")
React\u00a0e outras bibliotecas e frameworks JavaScript<\/h3>\n
N\u00f3.js<\/h3>\n
Ajax<\/h3>\n
Outras linguagens de programa\u00e7\u00e3o<\/h3>\n
\n
Bootstrap<\/h3>\n
Sistemas de Gerenciamento de Conte\u00fado (CMS – Content Management Systemsc)<\/h3>\n
Servi\u00e7os RESTful e APIs<\/h3>\n
Design amig\u00e1vel para dispositivos m\u00f3veis<\/h3>\n
![\"Design](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-62.png\")
Teste e desenvolvimento cruzado de navegadores<\/h3>\n
\n
Sistema de controle de vers\u00e3o<\/h3>\n
Como se tornar um desenvolvedor frontend<\/h2>\n
\n
![\"Onde](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-69.png\")
Os desenvolvedores Frontend est\u00e3o em demanda?<\/h2>\n
Qual \u00e9 o sal\u00e1rio m\u00e9dio dos desenvolvedores frontend?<\/h2>\n
![\"Sal\u00e1rios](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/Untitled-73.png\")
O que procurar ao contratar um desenvolvedor frontend<\/h2>\n