Um dos profissionais mais requisitados do mercado é o programador frontend, que na prática é o responsável por criar a interface de aplicações web. Atualmente um bom ponto de partida para conseguir a primeira vaga no mercado de trabalho é justamente iniciar como um programador frontend e nesse artigo vou mostrar os passos para se tornar um desenvolvedor frontend ainda em 2021.

Mas o que faz um desenvolvedor Frontend

Como desenvolvedor front-end, você provavelmente estará trabalhando em uma das seguintes opções:

• Designing layouts
• Styling
• Gerenciamento de estado
• Tratamento e renderização de dados assíncronos

Abaixo segue as etapas que vão te ajudar a começar do zero e crescer.

1. Aprender HTML
   
   
   
   
   HTML é o básico para qualquer um que deseje trabalhar com frontend, ele define o significado e a estrutura do conteúdo da web. Você não precisa saber tudo sobre HTML ou todas as tags, mas vou deixar alguns pontos chave que seria bom você focar:
   
   
   • O básico para construção de uma página HTML;
   • Adicionar e formatar um texto em HTML;
   • Criar listas, tabelas e formulários;
   • Incorporar links, imagens e vídeos em páginas web;
2. Aprender CSS
   
   
   
   
   Uma página web sem CSS é como uma folha com fundo branco, por isso precisamos utilizar o CSS (Cascading Style Sheets) para estilizar e dar vida ao HTML. O CSS informa como os elementos HTML deveriam se portar na tela.
   
   
   
   
   Abaixo alguns conceitos importantes:
   
   
   • Seletores CSS (como selecionar um elemento ou grupo específico no HTML);
   • Unidades no CSS (pixels, percentual, em+rem, vh+vw);
   • Posicionamento no CSS (static, relative, absolute, fixed e sticky)
   • CSS box model;
   • CSS Flexbox;
   • CSS grids;
3. CSS Frameworks
   
   
   
   
   Esse é um ponto opcional, mas pode ser um grande diferencial quando tentar entrar no mercado de trabalho. Conhecer algumas das grandes ferramentas para criação rápida de websites e UIs pode virar um plus no seu currículo. Tenha em mente que CSS frameworks fornecem modelos / componentes prontos para uso e classes que você pode importar para sua base de código e obter belos componentes responsivos sem precisar escrever nenhum CSS extra.
   
   
   
   
   Abaixo alguns dos mais populares frameworks.
   
   
   • Tailwind CSS;
   • Bootstrap 5;
   • Materialize;
4. Aprender JavaScript
   
   
   
   
   Até esse ponto você será capaz de criar belos sites web com HTML e CSS. Mas só isso não basta, você precisa criar sites que sejam funcionais, para isso você precisa de JavaScript.
   
   
   
   
   JavaScript é uma linguagem de script que pode ser usada tando do lado do cliente (Frontend) quanto do lado do servidor (Backend), por isso existem muitas vantagens quando se escreve toda a aplicação em uma mesma linguagem, fazendo assim a experiência de desenvolvimento suave e agilizando a aplicação.
   
   
   
   
   Por isso JavaScript é tão popular e amada na web e todo programador que deseja entrar nesse mercado, deve no mínimo conhecer. Abaixo o básico do JavaScript para você aprender:
   
   
   • Variáveis, tipos de dados, loops e funções;
   • DOM (Document Object Model);
   • DIferença entre as palavras chave var, let e const;
   • Métodos arrays (foreach, map, filter, reduce, etc);
   • ES6 (arrow functions, template literals, desestruturação);
   • Programação assíncrona (async/await)
5. Frameworks JavaScript
   
   Semelhante às CSS frameworks, no sentido de tornar a vida do desenvolvedor mais fácil, as frameworks JavaScript trazem bibliotecas, boilerplate e fornece recursos comuns para construir aplicações web.
   
   As mais populares são React, Angular e Vue.js, mas recomendo escolher e estudar uma delas. React e Vue, são semelhantes e têm o mesmo nível de dificuldade. Angular possui uma curva maior de aprendizagem mas traz algumas features interessantes.
   
   Caso queira saber um pouco mais sobre cada uma, acesse esse artigo onde faço um comparativo entre elas.
6. Aprender Git
   
   Git é de longe o sistema de controle de versão moderno mais usado no mundo. Essa é uma habilidade importante que todo desenvolvedor seja frontend e backend deveria conhecer. É largamente usada na maioria das empresas de desenvolvimento de software e por isso essa é uma skill muito importante.
   
   Além do mais, armazenar os seus projetos no GitHub (o mais popular serviço para armazenamento e versionamento de código) para que a comunidade tenha acesso e principalmente pessoas que estão à frente de processos seletivos pode te trazer grandes benefícios.
   

Coisas extras que você deveria saber

Até aqui, você já está pronto para procurar a sua primeira oferta de trabalho como um desenvolvedor frontend. Mas nós podemos sempre melhorar e por isso vou te dar mais alguns passos que podem ser um diferencial na busca da sua primeira vaga e além disso com certeza quando estiver no ambiente profissional de trabalho poderá te ajudar a resolver alguns problemas.

1. Global State Management
   
   
   
   
   O gerenciamento de estado é um ponto importante quando trabalhamos com grandes aplicações web, abaixo uma lista do que estudar para cada uma das frameworks citadas acima.
   
   
   • React: Context API, Redux, MobX;
   • Angular: Shared service, NgRx;
   • Vue.js: Vuex
2. Server-side Rendering
   
   
   
   
   SSR resolve uma série de problemas principalmente em relação ao SEO (Search Engine Optimization) que os SPA (Single Page Application) trouxeram, portanto estude:
   
   
   • React: Next.js
   • Vue.js: Nuxt.js
   • Angular: Angular Universal
3. Opcional
   
   
   
   
   Agora itens que são totalmente opcionais mas vão te ajudar a ser mais completo como programador frontend.
   
   
   • Deploy e host de projetos (Netlify, Github pages, Heroku);
   • Aprenda TypeScript, sério você deveria aprender com urgência, pois isso irá transformar você em um programador melhor, seu código será mais robusto e com menos erros.
   • Aprenda sobre frameworks de testes(Jest ou Mocha para JavaScript);

Conclusão

Tentei neste artigo sintetizar tudo que seja necessário para alguém sair do zero ao avançado para se tornar um desenvolvedor frontend, espero que esse roadmap ajude a alcançar os seus objetivos.

Boa sorte nos estudos e projetos, caso necessite de algum auxílio não deixe verificar os outros posts no blog.