ENTRAR MATRICULE+SE

TODOS OS NOSSAS PARA DEV

CURSOS FORMAÇÕES EMPRESAS EM 5T6

Artigos > Front-end

Do zero para
programador front-end

Flavio Henrique de
Souza Almeida
Atualizado em 01/10/2021

COMPARTILHE

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.

Confira neste artigo:

Passo 1l HTML5 e CSS3
Passo 2l lógica de programação e
JavaScript
Passo 3l bibliotecas
Passo 4l mais JavaScript
Passo 5l frameworks
Passo 6l (desejável): pré-
processador
Passo 7l (desejável): ferramenta de
build
Passo 8l (desejável): noção de como
funciona um back-end
Conclusã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 barbearia é 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 fES6h 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!h 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.

Flavio Henrique de Souza Almeida

Flávio é desenvolvedor e instrutor, focado no

desenvolvimento com Angular e procurando conciliar
o frontend com o backend. Palestrou em
conferências como QCON e MobileConf. É autor do
best-seller "Cangaceiro JavaScript". Além da sua
graduação e MBA em TI, também é graduado em
Psicologia, aplicando os aprendizados desta área no
desenvolvimento de software e de aplicações web.

Artigo Anterior Próximo Artigo

Entendendo o Como lidar com os

Material Design limites de resolução
em sites responsivos?

Leia também:
Começando com o desenvolvimento Front-
end
Como escolher minha carreira em TI?
Como se tornar um(a) desenvolvedor(a) full-
stack no próximo ano?

Front-end, Back-end e Full Stack

Veja outros artigos sobre

Front-end

Quer mergulhar em
tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO

escreve pessoalmente, com insights do
mercado de trabalho, ciência e
desenvolvimento de software

Escreva seu email

ME INSCREVA

Nossas redes e apps

Institucional

Sobre nós

Trabalhe conosco

Para Empresas

Para Escolas

Política de Privacidade

Compromisso de Integridade

Termos de Uso

Status

A Alura

Como Funciona

Todos os cursos

Depoimentos

Instrutores(as)

Dev em WTX

Conteúdos

Alura Cases

Imersões

Artigos

Podcasts

Artigos de educação

corporativa

Fale Conosco

Email e telefone

Perguntas frequentes

Novidades e Lançamentos

mariaquinyas@gmail.com ENVIAR

CURSOS

Cursos de Programação
Lógica | Python | PHP | Java | .NET |
Node JS | C | Computação | Jogos | IoT

Cursos de Front-end
HTML, CSS | React | Angular | JavaScript |
jQuery

Cursos de Data Science

Ciência de dados | BI |
SQL e Banco de Dados | Excel |
Machine Learning | NoSQL | Estatística

Cursos de DevOps
AWS | Azure | Docker | Segurança | IaC |
Linux

Cursos de UX & Design

Usabilidade e UX | Vídeo e Motion | 3D

Cursos de Mobile
React Native | Flutter | iOS e Swift |
Android, Kotlin | Jogos

Cursos de Inovação & Gestão

Métodos Ágeis | Softskills |
Liderança e Gestão | Startups | Vendas