Do zero para programador front-end

Inicio este post com o seguinte encontro:

“Fernanda e Gustavo conheceram-se em uma conferência. Fernanda disse para Gustavo que era programadora front-end. Gustavo disse que tinha vontade de ingressar nessa carreira e não sabia por onde começar.”

Apesar desse encontro nunca ter existido, Gustavo personifica bem com sua dúvida aqueles que desejam começar no front-end, mas que não sabem qual caminho trilhar. Este post visa lançar uma luz sobre essa questão.

Passo 1: HTML5 e CSS3

O HTML é uma linguagem de marcação responsável pela estrutura de páginas web, dando significado para cada parte que a compõe, já o CSS é aquela tecnologia que aplica um atrativo estético na estrutura da página criada.

Aprender HTML5 e CSS3 criando uma página de bio é um bom começo, pois além de aprender os fundamentos, você terá algo prático já criado.

Depois de consolidar seus conhecimentos, poderá avançar e aplicar novas técnicas para aprimorar ainda mais esta parte.

Além do que vimos, saber criar um web site responsivo, aquele com páginas que se adaptam do mobile ao desktop, é prática do mercado, não mais um plus.

Preparados para o passo seguinte?

Passo 2: lógica de programação e JavaScript

A profissão programador front-end além de envolver os conhecimentos de HTML5 e CSS3 demanda também conhecimento da linguagem JavaScript.

Ela é a única linguagem efetivamente de programação (podemos declarar variáveis, loops, funções…) suportada pelos navegadores do mercado, inclusive este é um dos motivos de boa parte dos programadores, sejam de front-end ou não, terem algum conhecimento desta linguagem.

Contudo, sendo JavaScript uma linguagem de programação, é necessário conhecimento de lógica de programação, aquele que uma vez aprendido pode ser aplicado nas mais diversas linguages do mercado.

Para quem nunca programou na vida, aprender e praticar lógica de programação desde o fundamental até a criação de animações e um jogo, o prepará ainda melhor para a linguagem JavaScript.

Com a parte da lógica de programação em dia, aprender a linguagem JavaScript completa a tríade de tecnologias mínimas que um programador front-end precisa ter. Contudo, a jornada não para por aqui. É preciso ir além!

Passo 3: bibliotecas

O mercado de trabalho adora padronização e nós, desenvolvedores, queremos escrever cada vez menos.

Neste sentido, ter contato com bibliotecas e frameworks populares do mercado aumentará o seu índice de empregabilidade, além de dar subsídios para criar mais facilmente aplicações. No caso, focarei por enquanto nas bibliotecas.

O Bootstrap é sem dúvidas o framework HTML, CSS e JavaScript mais popular para criação de projetos mobile first, aquele no qual primeiro pensamos em nossas páginas em dispositivos móveis para depois adaptá-la em dispositivos maiores, como computadores Desktop ou até mesmo smart TVs gigantes.

Criar um site com Bootstrap a partir de um layout já existente é uma prática bem comum no mercado. Porém, ele faz uso de outra biblioteca que está no coletivo imaginário dos desenvolvedores, o jQuery.

O jQuery é uma biblioteca que permite o programador front-end realizar mais facilmente modificações na página através das ações do usuário, como o clique de um botão que oculpa uma barra lateral ou até mesmo aquele banner rotativo lindão que dá vida à sua página.

Existem diversas maneiras de aprendemos jQuery, inclusive criando jogos, dessa forma, tornando ainda mais divertida a aprendizagem. Independente do seu uso pelo Bootstrap, há muito código escrito no mercado com esta biblioteca.

Passo 4: mais JavaScript

Hoje vivemos no reino encantado do JavaScript. A versão ES2015 (ES6) do JavaScript se popularizou rapidamente devido a introdução de novos recursos da linguagem que visam ajudar o desenvolvedor a resolver problemas do dia a dia.

Criar um projeto do zero e ir aplicando gradativamente os novos recursos da linguagem é uma forma de absorver as mudanças. Inclusive, o ES2015 é pré-requisto para aprender alguns dos mais famosos frameworks do mercado.

Passo 5: frameworks

Uma biblioteca resolve um problema bem específico, já um framework pode ser considerado um conjunto de bibliotecas que visam resolver um problema maior.

Hoje no mercado há uma explosão de Single Page Applications, páginas que não recarregam durante seu uso (parecem aplicações nativas como aquelas que rodam em seu smartphone) e que fazem uso pesado de JavaScript.

Frameworks como Angular 1, Angular 2 (hoje, chamado de Angular!) e React são os que invadem o coletivo imaginário dos desenvolvedores e das empresas

Passo 6: (desejável): pré-processador

Aprender a utilizar pré-processadores CSS como SASS ou LESS.

Um pré-processador nada mais é do que um compilador que traduz uma sintaxe rebuscada que pode trabalhar com varíaveis e funções para um código CSS, aquele compreendido pelo navegador. Em suma, a ideia é darmos ao CSS poder semelhante das linguagens de programação como o próprio JavaScript que vimos.

Dependendo do escopo do projeto e da cultura da equipe, pré-processadores podem ser utilizados para tornar o trabalho mais produtivo.

Passo 7: (desejável): ferramenta de build

Por exemplo, sabemos que um site depois de pronto precisa ainda passar por uma série de otimizações. Nesse sentido, dominar alguma ferramente de build como Gulp pode ser um diferencial na hora de concorrer por uma vaga de estágio ou emprego. A boa notícia é que essas ferramentas utilizam a linguagem JavaScript, aliás, uma linguagem bem onipresente no universo do desenvolvimento.

Passo 8: (desejável): noção de como funciona um back-end

Ter uma noção de como funciona um back-end e como o seu trabalho de programador front-end se integra com ele o ajudará a ter mais confiança ao trabalhar dentro de uma equipe.

Nesse sentido, começar pelo PHP criando um projeto web que se integre com o banco de dados é um bom começo.

Conclusão

Saber o essencial que é HTML5, CSS3 e JavaScript abre oportunidades tanto para estágio, como também, para ofertas de emprego. Além disso, nada o impede de trabalhar por conta própria como um freelancer.

Contudo, completar seu conhecimento com bibliotecas e frameworks populares do mercado ampliam ainda mais essas oportunidades.

Por fim, segundo Rogers, o processo de aprendizagem ocorre de maneira particular em cada individuo e o papel dos educadores é facilitar a aprendizagem do aluno.

A sequência de passos aqui aprensentada é apenas uma proposta que pode facilitar sua aprendizagem, mas sinta-se à vontade de adequá-la ao seu modus operandi de aprender.

(Última atualização em: 12 de julho de 2017)

Flávio Almeida é desenvolvedor e instrutor na Caelum e no Alura. Autor do livro MEAN "Full stack JavaScript para aplicações web com MongoDB, Express, Angular e Node", possui mais de 15 anos de experiência na área de desenvolvimento. Bacharel em Informática com MBA em Gestão de Negócios em TI, tem Psicologia como segunda graduação e procura aplicar o que aprendeu no desenvolvimento de software e na educação. Atualmente foca na plataforma Node.js e na linguagem JavaScript, tentando aproximar ainda mais o front-end do back-end. Já palestrou e realizou workshops em grandes conferências como QCON e MobileConf e esta sempre ávido por novos eventos.

  • Arlon Mars

    É primordial estas informações pra mim que estou começando a pouco tempo na profissão. Fera!!!

  • Matheus Martins

    Ótimo artigo, bem direto ao ponto. Praticamente um guia para quem quer começar na área de front-end.

  • Cristiano Gonçalves

    Show!! Estava hoje mesmo me perguntando se aprender jQuery ainda era algo relevante.

    • Flávio Almeida

      JQuery e seu ecossistema ainda vive em milhões de sites. Há também milhares de plugins com as mais diversas funcionalidades fornecendo uma solução pontual para problemas do dia a dia.

      Com a popularidade de SPAs o JQuery exerce um papel menor. Para saber mais sobre SPA, sugiro este pod cast

      http://hipsters.tech/single-page-applications-hipsters-16/

  • Durval Nascimento

    Desculpem a pergunta: mas podem explicar o que é front-end e back-end?

  • Thiano Pereira Lima

    A pergunta que não quer calar, muito se fala ainda dos SPA mas o que devo usar quando meu site não vai ter esse formato, Jquery ou ECMA puro seria a solução?

  • Rodrigo Penido

    Flávio, vc ensina como poucos. Parabéns e obrigado!

  • Edjanio Silva

    Um ótimo artigo, recomendo a todos que tem dúvidas por onde começar.

  • Carlos Ferreira

    Excelente artigo! Muito bem explicado e didático. Me ajudou muito. Obrigado.

  • Jônatas Bueno Do Livramento

    Muito bom o artigo, direto… Mas me pergunto por que a parte de teste não foi nem cogitada? Será por que se trará de algo mais avançado?

    • Flávio Almeida

      É uma leitura válida sim, a questão do avançado, porque para que alguém seja capaz de realizar um teste, tem que entender várias coisas antes.

      • Jônatas Bueno Do Livramento

        Certo…

  • Elder Pinto

    Ótimo artigo. Mas acho que faltou o git. Talvez seja mais fácil aprender um pré-processador css antes de js/jQuery. E sei que isso é uma pergunta bem relativa. Mas quanto tempo você acha que seria para ter um domínio de nível pleno de todas as tecnologias citadas no artigo. Ah, e seria um tema de artigo legal… Níveis de front-end jr/pleno/sênior

    • Flávio Almeida

      Curti a ideia do post sobre front-end jr/pleno/sênior!

  • Fabio Faria

    Bacana esse caminho!
    Tenho certeza que posts como esse ajudam e bastante muitos usuários!

Próximo ArtigoDetalhes que fazem toda a diferença em usabilidade