Se você está lendo esse artigo, muito provavelmente tem interessante ou já começou a estudar sobre o lado front-end da web.
Meu objetivo com esse artigo é fazer uma breve introdução sobre o que é front-end e, em seguida, começar o roteiro que acredito ser o ideal quem está começando a jornada.
A ideia é que esse artigo te acompanhe do começo da jornada até a escolha do seu primeiro framework. Caso você tenha alguma dúvida, independente do momento, deixe um comentário.
Minha recomendação é que você leia o artigo em partes e busque dar um passo de cada vez, anotando o que você já conhece e o que precisa ser revisto. Os links dos conteúdos sugeridos vão estar sempre no final do tópico caso você queira entender um pouco mais sobre o tema.
O que é front-end?
Front-end é a parte da web que é mostrada para o usuário, responsável por enviar dados e fazer requisições para o lado back-end, também chamado de server-side.
O front-end é a primeira interação do usuário com um produto ou serviço, por isso, é normal que muitas das informações, como textos e o próprio design da página sejam feitas por outras parte da equipe dedica ao projeto — designers UI/UX, redação, entre outros que não englobam o trabalho de um profissional dedicado ao front.
Quando falamos em trabalho, os profissionais que cuidam dessa parte da web são chamados de pessoas desenvolvedoras front-end, e ficam responsáveis por estruturar, estilizar e deixar a página funcional para o usuário final.
Muitas vezes os profissionais de front-end tem conhecimentos de SEO, permitindo que os sites criados tenham um melhor desempenho no ranqueamento dos buscadores (Google, Bing, Duck Duck Go, entre outros).
Como funciona a internet
Você chegar até essa página já mostra que a internet pode trazer informações e como ela está presente nas nossas vidas. Quando falamos em programação web, é essencial que você entenda como a internet em si funciona, por isso acho que vale a pena ter um tópico para isso.
Nesse começo de jornada, entender por onde seu código vai passar e como ele pode atravessar o planeta em poucos milissegundos vai ser um conhecimento quase que essencial na minha visão.
Um ponto que vale muito a pena mencionar é o HTTP e HTTPS, que, se você está vendo essa página, agradeça a esses protocolos.
Além deles, conceitos como DNS e CDN também também serão bem úteis no começo da sua jornada e te ajudaram a entender melhor como a internet funciona.
Para um primeiro passo, acho que os links abaixo vão te ajudar muito.
- Como a Internet funciona? - @Curso em Vídeo HTML5 e CSS3
- Como o YouTube entrega este vídeo para você | Nerdologia Tech
- O que é DNS? | Tecnoblog
- O que é CDN | Go Cache
- HTTP: Entendendo a web por baixo dos panos
- HTTP // Dicionário do Programador
- API // Dicionário do Programador
Como funciona um navegador
Além da própria internet, acho que vale a pena fazer uma pequena pausa para entender como a ferramenta mais usada na web funciona: o navegador.
Se você está acessando esse artigo, pode ter certeza que alguém passou dias, semanas, meses e anos desenvolvendo um navegador funcional que conseguisse atender bem o usuário (você).
Quando programamos para web no caso front-end, é bem valido gastar boas horas ou dias aprendendo um pouco mais sobre o principal meio de comunicação entre o usuário e o nosso código.
Recomendo que você não encare esse tópico apenas como mais um, mas que realmente aprenda durante sua jornada como um navegador funciona e como ele interage com frameworks, linguagens, bibliotecas e as milhares de outras ferramentas.
Nesse tópico especifico, vou deixar um link para um vídeo em inglês, que é de longe um dos conteúdos mais interessantes e completos sobre navegadores que já consumi. Apesar disso, sinta a vontade para pular caso não se sinta confortável com o idioma.
- Cookies // Dicionário do Programador
- Como funcionam os navegadores Web? | HipstersPontoTube
- (Conteúdo em inglês) Ryan Seddon: Como o navegador realmente renderiza um website | JSConf EU 2015
HTML
Agora que você deu os primeiros passos, espero que o conceito de internet esteja mais claro na sua mente. Do back-end ao front-end, você entendeu como o mundo da web funciona e é o momento de botar a mão no código.
Para essa segunda fase, o começo mais recomendado na minha visão é o HTML. Essa linguagem de marcação é muito usada e essencial para quem quer desenvolver uma página.
Dentre os pontos que vale mencionar, acho que conhecer a estrutura inicial e deixar o HTML semântico são ótimos primeiros passos nessa linguagem, uma vez que isso é interpretado como um bom código.
Principalmente na parte da semântica, ele vai te ajudar na hora de fazer manutenção do seu código e que outras pessoas possam ler e modificar seu HTML com mais facilidade.
Além disso, o HTML semântico traz vantagens para o ranqueamento, mas, no momento, não foque nisso. O ideal é dar um passo de cada vez e buscar mais conteúdos sobre esse tema.
- HTML // Dicionário do Programador
- Meu HTML é semântico e o seu?
- HTML Semântico: o que é, para que serve e porque utilizar no seu código
CSS
Junto ao HTML, o CSS é outra ferramenta muito usada no front-end, uma vez que você precisa estilizar a página, colocando cores, ajustando os tamanhos das imagens e deixar tudo organizado para que o usuário se sinta confortável ao navegar.
Esse passo acaba sendo chutado por muitos desenvolvedores que estão começando e talvez seja o menos querido. Apesar disso, não tem como deixar essa parte da web de fora, uma vez que ela é uma das bases do front-end e permite que páginas funcionem visualmente.
No segundo link abaixo, minha recomendação trata exatamente desses "chutes". Se você quer aprender realmente como o CSS funciona e não chutar o que pode acontecer, acho que vale muito a pena ver a playlist do "Para de Chutar o CSS", do Marco Bruno Dev.
Além disso, também trouxe algo bem interessante no terceiro link, mas que não necessariamente você vai usar agora. O objetivo é que você consiga entender até onde o CSS já evoluiu e como sua jornada só está começando.
Não se assuste com os conceitos e palavras difíceis, mas também não transforme elas no seu objetivo atual.
- CSS (Cascading Style Sheets) // Dicionário do Programador
- Pare de chutar o CSS (playlist)
- Do Sass e BEM ao CSS-in-JS: A (re)evolução do CSS ao longo da história (OPCIONAL)
- Metodologia BEM para CSS
Git e GitHub
Agora que você deu seus primeiros passos, acho que está na hora de expor seu código para o mundo. Principalmente na programação, projetos abertos são muito bem vistos.
Hoje, o GitHub é a principal plataforma de compartilhamento de código no mundo. Os projetos chamados de open source unem milhões de desenvolvedores em todo o mundo e promovem a evolução de várias ferramentas.
Nesse tópico, o recomendado é que você comece pelo Git, que é o sistema de versionamento de código. Isso permite que as modificações no seu código fiquem salvas e que outros desenvolvedores possam revisita-las.
Após isso, acho que vale a pena gastar algumas horas ou dias experimentando o GitHub e entendendo como ele funciona. Se possível, tente subir algum projeto seu público.
- Git // Dicionário do Programador
- O que são Git e Github? HipstersPontoTube
- Como usar Git e Github na prática: Guia para iniciantes | Mayk Brito
Lógica e JavaScript
Para muitas pessoas, o JavaScript é realmente o primeiro passo na programação em si. A partir desse momento, você estudará lógica e essa será sua base para desenvolver um front-end com funcionalidades mais complexas e se consumir com outros serviços ou APIs.
Como você já deve ter percebido, adicionei tanto lógica quanto JavaScript no tópico, mas, no final, a linguagem vira um complemento nesse contexto.
Assim como o HTML e o CSS, considero o JavaScript como uma ferramenta. No caso, acho que o mais interessante é que você entenda a lógica antes de tudo e separe ela da linguagem.
Essa talvez seja a parte mais complicada do processo de introdução ao front-end e você investirá mais tempo. Não se apresse em aprender um framework ou uma biblioteca nesse momento, mas tenha noção que elas já existem.
- Lógica de Programação - FTP Unicamp (PDF)
- O que é JavaScript? | HipstersPontoTube
- DOM (Document Object Model) // Dicionário do Programador
- Entenda a diferença entre var, let e const no JavaScript
- JavaScript Arrow Function
- Fetch API e o JavaScript
Escolha um framework
Após a sua primeira linguagem, talvez o momento mais marcante na jornada de uma pessoa desenvolvedora front-end seja a escolha do primeiro framework.
Isso não quer dizer que você não poderá mudar de ferramenta ou que não possa trabalhar ou desenvolver coisas incríveis usando somente usando HTML, CSS e JavaScript.
Na minha visão, os frameworks são um facilitador e mais uma ferramenta para te ajudar. Apesar disso, caso seu foco seja o mercado de trabalho, acho que vale a pena tomar um pouco de cuidado nessa escolha, principalmente porque muitas empresas já pedem alguma dessas ferramentas logo de cara.
Angular
Primeiro, quero comentar sobre o Angular, a ferramenta mais antiga dessa lista, mas ainda muito utilizada por empresas que buscam migrar seu código ou que estão satisfeitas com a ferramenta.
Na opinião de muitos desenvolvedores que já conheci, essa ferramenta é a mais complicada de se aprender entre as 3 que vou citar e a que vem perdendo mais espaço no mercado.
Hoje, não recomendo que você aprenda esse framework tão cedo, principalmente porque há opções mais viáveis e com mais espaço no mercado. Apesar disso, caso as empresas que você esteja buscando peçam esse framework, talvez ainda possa ser um bom caminho.
- Uma introdução rápida ao Angular
- Curso de Angular - Loiane Groner (playlist)
- O que é uma Single-Page Application? (SPA) HipstersPontoTube
React
Seguindo a lista, temos o React, a ferramenta mais famosa dentre as três. Ela foi criada pela Meta (antigo Facebook) e é bastante utilizada por empresas em todo mundo.
Essa biblioteca pode ser um pouco complexa dependendo do seu nível de conhecimento com JavaScript, mas é a mais amigável entre as 3 ferramentas que estou descrevendo aqui.
O mercado para React é bem grande e, com a chegada de ferramentas complementares. como o NextJS, pode ser um caminho profissional bem interessante.
Além disso, caso você tenha planos de estudar sobre desenvolvimento mobile, o ecossistema React tem o React Native, que segue a mesma linha de pensamento da biblioteca web, mas foca no mundo dos smartphones.
Se você já está procurando emprego na área, muito provavelmente esbarrou com diversas vagas que pedem, pelo menos, conhecimentos básicos em React.
- React Developer - Roadmap
- React Hooks: definindo e gerenciando estados com useState
- React Hooks: aprenda a ouvir estados com useEffect
- React Hooks: aprenda a gerenciar estados com a Context API
Vue
Por fim, mas com certeza não menos importante, temos o Vue. Esse framework, diferente do React, não tem tanto espaço no mercado brasileiro, mas, mesmo assim, talvez seja o que mais chama atenção no momento.
Ao contrário do React, que tem a Meta por atrás do projeto, e o Angular, que tem o Google, o Vue não tem uma empresa gigante suportando o projeto.
Dependendo do seu ponto de visto, isso pode ser bom ou ruim, mas, com certeza, não é algo que impacta negativamente na popularidade do Vue.
Dentre os 3 citados nessa lista, ele é o mais famoso no GitHub e seu projeto vem crescendo bastante nos últimos anos.
Na minha visão, a documentação dele é mais completa dessa lista e, se você já tem um conhecimento um pouco mais avançado de JavaScript, acho que vale a pena ler um pouco mais sobre o Vue.
- Vue.js (O competidor de peso do Angular e React) // Dicionário do Programador
- Introdução VueJS (Documentação)
- Vue.js - Alura Live #77
Conclusão
Se você chegou até aqui, espero que tenha conseguido começar bem sua jornada e que realmente esteja se sentindo uma verdadeira pessoa desenvolvedora front-end.
Esse é somente o começo da sua jornada, mas espero que o conteúdo desse artigo tenha te ajudado nesses primeiros passos.
Top comments (0)