Fala amigos tudo beleza? E se eu te perguntasse agora: O que é front end e o que faz de fato um front end developer? Vamos bater um papo bem tranquilo, leia até o final que vai te ajudar a ter uma boa “iluminada” nas ideias.

A grosso modo podemos entender que tudo é considerado desenvolvimento web mas é muito importante saber delimitar a parte de cada profissional quando pensamos num projeto que envolva web.

Diferença de front-end e back-end

Basicamente quando vamos construir um sistema web ou um aplicativo mobile temos os profissionais que vão construir a lógica de funcionamento do sistema, as funcionalidades que dão utilidade ao sistema como por exemplo cadastrar pessoas no banco de dados que são os desenvolvedores back-end.

E temos também os profissionais que vão cuidar da interface desse sistema, criar toda a parte que lida diretamente com os usuários, a parte que possibilita os usuários usarem o sistema, interagirem com o aplicativo. Sendo direto ao ponto: O(a) desenvolvedor(a) front end cria a tela do sistema.

Front-end x web designer

Mas calma aí, quando falo que o front end developer cria a interface do sistema não estou dizendo que ele cria o design “bonitinho” do sistema, para isso temos os designers de interface, responsáveis por pensar e projetar a aparência e comportamento de cada elemento do sistema.

O desenvolvedor front end vai ser a pessoa que pegará todas as informações do designer sobre como deve ser a interface e vai “traduzir” isso para os códigos, transformando aquele protótipo do designer numa interface web através de HTML, CSS e Javascript.

Isso quer dizer que o front end não deve saber criar uma interfce gráfica? Claro que não! O front-end deve saber SIM utilizar as ferramentas de prototipagem para criar o design das interface, o que quero dizer é que não é a especialidade da função, visto que existem especialistas nisso, os designers.

O que estudar para ser um front-end?

Se você deseja se tornar um desenvolvedor front end saiba que o caminho é bem longo. E esse caminho tem um começo ESSENCIAL: Dominar o HTML, CSS e Javascript.

Esse é o trio que pode ser considerado o “mobral” do desenvolvimento web, tanto front-end (principalmente) quando o back-end. Eu sugiro que antes de qualquer coisa você deve aprender BEM o HTML, CSS e JS para depois começar a pensar numa carreira na web.

Se me permite uma sugestão, conheça o curso ao lado direito que te pega pela mão e te ensina TUDO para você se tornar um desenvolvedor completo, tanto front-end quanto back-end em pouco tempo.

Então depois de você dominar o HTML, CSS e Javascript você pode pensar: Tô pronto! Sinto muito mas temos que aprender ainda MUITA coisa. Tudo bem que com essas 3 tecnologias você já vai poder criar uns sites, fazer uns freelas e ganhar um dinheiro, mas a web evolui muito e surgem novas tecnologias que ajudam a desenvolver melhor e é muito importante aprender a usá-las.

Frameworks CSS

Framework CSS é uma tecnologia que ficou muito popular entre os desenvolvedores por ser uma mão na roda. Já pensou se você pudesse ter vários modelos prontos de CSS como por exemplo botões, tabelas, classes prontas para estilizar os elementos de nossa interface?

Você pode ter! Os frameworks no CSS são usados para facilitar nossa vida na hora de criar as propriedades do CSS, pois eles nos oferecem vários modelos pré-prontos para reutilizarmos.

Bootstrap

O framework CSS mais conhecido é o Bootstrap que dentre muitas facilidades que nos traz, uma enorme contribuição é quanto a responsividade.

Deixar uma interface responsiva é tornar ela adaptável para todas as resoluções de tela, para que a sua interface abra com qualidade em smartphones, tablets, PC’s, etc.

O Bootstrap nos oferece uma estrutura pronta de classes com media queries ajustadas para deixar nossa interface naturalmente responsiva. O Bootstrap é bem simples de usar, basta inserir alguns arquivos em seu HTML. Clique aqui para saber mais sobre o Bootstrap.

Pré-processadores

Se você já domina BEM o CSS um próximo passo pode ser aprender a usar um pré-processador. Calma, não é nada de outro mundo, é só uma tecnologia criada pra permitir que você incremente seu CSS com por exemplo variáveis, funções, etc.

É uma linguagem parecida com CSS que você cria seus comandos de forma mais avançada, é como se você programasse no CSS. Imagina poder criar seu CSS com condicionais, funções, repetições como numa espécie de linguagem de programação, possibilitando extender propriedades e evitando duplicação de códigos.

Os pré-processadores facilitam muito a manutenção dos códigos, deixam o seu CSS mais flexível e reutilizável.

Funciona basicamente assim: Você “programa” como deve ser o CSS na linguagem do pré-processador (bem parecida com o CSS) e depois você manda ele processar o arquivo. Depois de processar, ele vai simplesmente gerar um arquivo CSS do jeito que você programou.

Os pré-processadores mais comuns são o SASS e LESS.

GIT: Versionamento

Se tem uma coisa importante de usar como desenvolvedor te digo de coração: GIT. Depois que você começa a usar o GIT a tendência é que nunca mais deixe de usar. Imagine se a cada implementação que você faz nos seus códigos você pudesse simplesmente salvar essa versão?

O GIT é uma ferramenta de versionamento, é muito utilizado para ter controle das modificações de seus códigos. A cada mudança que você faz nos seus códigos você pode “commitar” criando um ponto de referência no histórico de seu projeto, e caso você queira depois recuperar seus códigos do jeito que era antes você pode simplesmente restaurar para qualquer ponto do histórico de commits.

Existem diversas funcionalidades no GIT que permitem equipes trabalharem juntas simultaneamente no mesmo projeto. O GIT é um programa que você instala em sua máquina para controlar o versionamento de seus códigos localmente.

Existem diversos repositórios na internet que se integram ao GIT para você “guardar” todo o versionamento de seu projeto online e trabalhar remotamente com outras pessoas no mesmo projeto em sintonia. Temos por exemplo o Github, Gitlab e Bitbucket.

Bibliotecas e frameworks Javascript

Se você já começou a estudar o Javascript vai perceber que é uma linguagem de programação muito poderosa, pois é possível deixar suas interfaces muito dinâmicas, criando comportamentos aos elementos da interface baseados nas ações dos usuários.

O javascript pode ser utilizado tanto no front end quanto no back end, isso significa que podemos usar o javascript no lado da interface rodando ele pelo navegador ou usar no lado do servidor como responsável por processar as funcionalidades do sistema.

Por essa flexibilidade o Javascript tem sido o protagonista do desenvolvimento web, e por consequência cada dia surge uma nova ferramenta implementando seu uso pelos Dev’s.

O que são?

As bibliotecas e frameworks em Javascript no front end são a grosso modo estruturas pré prontas de códigos que podem ser reutilizadas, facilitando o trabalho do desenvolvedor.

Bibliotecas podem ser entendidas como “pedaços” de códigos já criados que podemos utilizar, sem precisar recriar a roda.

Já frameworks são mais complexos, podem ser entendidos como uma estrutura genérica que resolve vários problemas recorrentes dos desenvolvedores. Algumas bibliotecas e frameworks que são muito usados no mercado Javascript são Jquery, React, Angular e Vue.

Pra concluir

Agora que você viu o que é front-end você deve ter percebido que o caminho para ser um front end developer é bem cumprido, e olha que nem falei de coisas importantes como Task Runners que servem para automatizar os processos, e de testes.

A questão é: Vale a pena estudar tudo isso? Com certeza! A área de desenvolvimento web cresce de forma exponencial, as empresas estão procurando muito por bons desenvolvedores, tanto front end quanto back end. E tem mais: Uma tendência forte no mercado é a busca por desenvolvedores full stack.

O que são desenvolvedores full stack? São desenvolvedores completos, que dominam o front end e dominam também o back end.

Caso você esteja querendo se tornar um desenvolvedor conheça ao lado o curso mais completo da internet, com ele você consegue se tornar um desenvolvedor full stack em poucos meses.