Começando com Front-end: entenda os conceitos, as áreas e as tecnologias que você precisa estudar

Deixa eu adivinhar: você decidiu começar a estudar Front-end, mas não faz ideia por onde começar. Acertei?

Bom, essa é uma situação bastante comum, principalmente diante de tantas tecnologias, linguagens e frameworks. De fato, é difícil definir um plano de estudos para alcançar seu objetivo.

Mas não se preocupe. Nesse artigo, vou esclarecer alguns pontos importantes para você dar o primeiro passo nos seus estudos. Esse é um panorama geral para você ficar por dentro dos principais conceitos, ok?

Depois de dominar os conceitos e conseguir distinguir as principais áreas e tecnologias, recomendo que você leia o guia de como iniciar os estudos em Front-end. Esse material é ótimo para essa situação :)

Vamos lá?

Antes de começar, uma contextualização

O primeiro passo, antes de começar a escrever linhas de códigos, é entender o que é Front-end, especialmente a partir da diferença em relação à Back-end.

Em um resumo rápido, o processo de criação (e manutenção) de uma aplicação se divide em duas partes. A primeira é a parte que fica a lógiga da aplicação: o Back-end. É o motor oculto que faz todas as funcionalidades funcionarem.

A segunda é a parte que roda no dispositivo da pessoa que está usando a aplicação. É a parte visual, a partir da qual a pessoa usuária interage com as funcionalidades (imagens, vídeos, botões, animações e daí por diante). Essa segunda parte é conhecida como Front-end.

Só precisamos tomar cuidado quando usamos o termo “Front-end”. Eu disse que é no front-end que fica toda a parte visual e interação. Mas front-end não é apenas parte visual. Atualmente, essa parte também compreende bastante lógica e programação.

Inclusive, existe uma subdivisão dentro do próprio Front-end: a parte visual e a parte lógica. A parte visual é exatamente o que a pessoa vê quando abre a aplicação: imagens, botões, cores, ícones, tabelas e animações.

A parte lógica é a parte que promove a interação entre o Front-end e o Back-end: requisições para APIs, preenchimento de informações de maneira dinâmica, contas, validações e por aí vai.

Independentemente dessas divisões, as duas precisam de conhecimento básico em quatro habilidades principais:

• Lógica;
• HTML
• CSS
• JavaScript.

Então, se a sua vontade é trabalhar apenas na parte lógica do front-end ou apenas na parte visual, essas quatro habilidades são fundamentais para se tornar alguém que desenvolve front-ends.

O que é HTML?

De forma geral, HTML é o esqueleto de uma página. Ou seja, é sua estrutura. HTML é uma linguagem de marcação de texto feita para indicar para o navegador qual o tipo de conteúdo que está sendo colocado em uma página. É a base para exibir algum conteúdo na web.

É com o HTML que falamos para o navegador que a página que estamos construindo tem um título, um parágrafo, uma imagem, um link para outra página, uma lista e todos os outros elementos que a constituem.

O que é CSS?

Se HTML é a estrutura estética de uma página web, o CSS é a tinta na parede, a moldura do quadro pendurado, é o tamanho do letreiro.

Isto é, CSS é uma linguagem criada para estilizar coisas em uma página web, seja tamanho de fontes, cores de caixas e efeitos visuais.

O que é JavaScript?

Javascript, por sua vez, é a linguagem criada para trazer interação em páginas web.

Quer clicar em um botão e mudar a cor de algum componente? JavaScript! Quer mostrar uma mensagem na tela do navegador da pessoa usando sua aplicação? JavaScript! Quer preencher uma página com informações dinâmicas de algum serviço na web? JavaScript!

Podemos dizer então que JavaScript é o “cérebro” de uma página web.

Entendi o conceito, mas por onde começo?

A base de uma página web é HTML. Sem HTML você não tem o que estilizar com CSS, nem como criar interações. Então, o primeiro passo é entender o que é HTML e como se começa uma página utilizando HTML.

Nem todas as páginas web precisam de interações mais avançadas, mas todas as páginas precisam de algum tipo de estilização. Com esse pensamento em mente, o segundo passo é aprender estilização de páginas com CSS.

O terceiro passo é aprender a deixar a página mais dinâmica para quem for usar. Micro interações, carregamento dinâmico de informações, buscas e até mesmo mudar estilizações usando JavaScript.

Já sei o básico dos três, para onde vou agora?

Agora tudo depende do que mais chama sua atenção. Lembrando que Front-end pode ser dividido em duas partes: a parte visual e a parte lógica. Qual dessas te chama mais atenção?

Essa não é uma decisão definitiva, você pode trocar de trilha caso ache que um caminho não é o ideal. É importante que você faça o que te traz satisfação pessoal. Se for possível, não se force a fazer algo que não gosta de fazer. Não é bobagem considerar a sua saúde mental.

Gosto muito da parte visual! Qual é meu caminho?

A parte visual exige um pouco mais de especialização em HTML e CSS. Você precisa aprender várias tecnologias, técnicas e padrões. E também podem existir outros caminhos mais específicos.

HTML

O mais importante na hora de escrever HTML é escrever um HTML semântico. As tags existem exatamente para descrever o conteúdo que é apresentado na página.

Também aprenda atributos de acessibilidade para deixar a página mais inclusiva. Lembre-se de que uma página com um HTML semântico e inclusivo possui um ranking maior nos motores de busca! Aprenda técnicas de SEO e acessibilidade.

CSS

Dentro de CSS, você precisa aprender as seguintes tecnologias e propriedades:

• Transition
• Animation
• Transform
• Perspective
• CSS Grid
• Flexbox
• Object-fit

Essas tecnologias são bem interessantes para quem quer desenvolver páginas sem utilizar frameworks CSS.

E os seguintes pré/pós processadores:

• SASS (pré processador)
• PostCSS (pós processador)

Pré/Pós processadores existem para facilitar a escrita de CSS. Você acaba escrevendo código CSS de uma maneira diferente e na hora de enviar para um servidor, tudo é transformado em CSS comum.

Também precisa ficar por dentro dos frameworks:

• Bootstrap
• Materialize CSS
• Tailwind CSS

Frameworks são interessantes para quem precisa agilizar a escrita de CSS, sem precisar se preocupar com responsividade ou nomes de classes.

Você também deve conhecer os padrões de CSS:

• BEM
• Atomic CSS
• Cube CSS
• SMACSS

Padrões de CSS são maneiras diferentes de se escrever CSS, seja em nomes de classes ou na separação de propriedades. A ideia principal desses padrões é escrever um CSS mais limpo e fácil de entender e dar manutenção.

Alguns pontos para se adicionar: É interessante para quem quiser seguir esse caminho ter o conhecimento de JavaScript para pequenas interações e principalmente saber lidar com eventos.

O conhecimento de JavaScript é extremamente importante para se trabalhar com WebGL. E também é um extra ter conhecimentos em design.

Qual o nome dessa profissão? O que ela faz?

É um pouco complicado dizer exatamente qual é o nome da pessoa que trabalha com esse caminho. Alguns chamam de Web Designer, Designer de Interação, UI Designer. Mas talvez o nome mais aceito seja Designer Front-end.

Uma das grandes vantagens de se ter uma pessoa designer front-end é que ela é a ponte entre designers e programadores. Exatamente porque essa pessoa ter conhecimento básico nas duas partes: ela consegue traduzir o que as duas áreas acabam pedindo ou brigando durante a fase de desenvolvimento.

Ou seja, é a pessoa principal na hora de transformar o desenho da equipe de design em uma página real.

Gosto muito da parte lógica! Qual é meu caminho?

A parte lógica demanda uma especialização total em JavaScript. O que acaba acontecendo com algumas pessoas que seguem esse caminho é que elas apenas aprendem frameworks CSS, já que não é foco delas aprender tudo de CSS e HTML.

Mas, assim como o caminho para quem quer seguir a parte visual, existem várias tecnologias para se escolher e aprofundar.

“Linguagem”

O TypeScript é a principal “linguagem” usada para escrever aplicações ou funcionalidades com JavaScript. Deixei o termo “linguagem” entre aspas porque na verdade é um JavaScript.

Existem outras “linguagens” que não citei porque a principal e mais usada é TypeScript, mas as outras são apenas maneiras diferentes de se escrever JavaScript.

Frameworks

É fundamental ficar por dentro dos seguintes frameworks:

• React
• Angular
• Vue.js
• Next.js
• Ionic
• React Native

Frameworks são ferramentas JavaScript que facilitam a escrita de aplicações e funcionalidades mais complexas e robustas. Assim como no caso das “linguagens”, no final se executa um código JavaScript.

Features/Tecnologias

Conheça as seguintes features ou tecnologias:

• Fetch
• WebSocket
• LocalStorage
• Async/Await
• Promises
• Map
• Arrays tipados
• SPA
• Progressive Web Apps
• WebGL

Aqui vem funcionalidades e conceitos que são comumente usados em aplicações do dia-a-dia, principalmente se sua aplicação faz coisas a mais do que só mostrar HTML e CSS.

Muitos desses conceitos são extremamente importantes para aplicações que se conectam com um serviço Back-end ou outras APIs. WebGL entra como um bônus para o desenvolvimento de games, por exemplo.

Qual o nome dessa profissão? O que ela faz?

Aqui já fica um pouco mais complexo de dar um nome único porque algumas pessoas acabam se especializando em um ou mais frameworks. Mas se for dar um nome genérico seria "pessoa engenheira Front-end" ou "dev Front-end". Dependendo de qual framework você queira focar, pode procurar por Dev React, por exemplo.

A Vanessa explica bem nesse vídeo:

Front-end é uma área com muitos caminhos para seguir, mas vale ressaltar que independente do caminho que você escolher, é necessário ter um certo conhecimento básico.

Tecnologias, frameworks e conceitos mudam em uma velocidade extremamente alta no mundo front-end, então uma recomendação é sempre se atualizar.