Do zero para programador front-end

(Last Updated On: 12 de julho de 2017)

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.

FIQUE POR DENTRO

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.

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