Introdução

Fala pessoal! Nessa postagem tentei reunir alguns tópicos e conteúdos para quem deseja iniciar no desenvolvimento front-end. Aqui coloquei indicações de conteúdos/ cursos gratuitos, dicas de estudo e sugestões para onde seguir. Tudo que está relatado foi baseado em minha própria experiência, não é um Roadmap definitivo da área, mas sim como eu decidi seguir e aplicar. Espero que possa ajudar!

Requisitos mínimos

Bom, é impossível falar de front-end sem falar de HTML, CSS e Javascript. Aqui neste tópico, vamos nos concentrar primeiramente a falar do HTML e do CSS (o Javacript vem logo em seguida).

HTML e CSS não são realmente consideradas linguagens de programação, mas são a base de uma página web. HTML sendo o conteúdo da página (textos, imagens, vídeos, links...) e o CSS as suas estilizações, para dar o design ao conteúdo da página.

Conteúdo

Para saber mais e começar os seus estudos sobre essas duas tecnologias, eu super indico o curso do Gustavo Guanabara, que além de ser um contéudo de uma grandiosa qualidade, muito atual, ainda é 100% free!
O curso está todo disponível no canal do Curso em Vídeo, e é dívidido em módulos, aqui embaixo deixei a playlist do primeiro módulo, mas você encontra os demais módulos no próprio canal do Youtube.

➡️ Curso em Vídeo - Curso completo de HTML e CSS (Módulo 1 de 5)

Praticando

Durante o próprio curso do Guanabara, você verá que terão diversos exercícios para praticar os conteúdos aprendidos. Mas se quiser, pode também ir além disso.

O que posso sugerir para praticar, e foi o que fiz também, foi criar ou clonar alguma Landing Page, desde o seu conteúdo, até as estilizações, o mais parecido que conseguir. Além disso, existem sites que você pode usar como inspiração para as suas criações. Eu curto muito a Frontend Mentor. Nele possuem diversos designs, onde o seu desafio é replicá-los e postar o seu resultado, é uma ótima forma de praticar.

O Javascript

O Javascript é ✨ A linguagem do front-end ✨, tudo vem dela, tudo passa por ela, não tem como escapar hehe. Ela então dará vida às suas páginas web, adicionando interatividade à elas. Junto com HTML e CSS, eles formam a grande tríade base do front-end.

Conteúdo

Para começar os seus estudos no Javascript, volto a citar o homem, a lenda, Gustavo Guanabara! No seu canal do youtube ele também possui um pequeno curso, com uma qualidade espetacular, sobre os príncipios do Javascript.

➡️ Curso em Vídeo - Curso Completo de Javascript

No curso são abordados os principais tópicos da linguagem que, na verdade é uma ótima base para qualquer outra linguagem de progração. No curso você terá aulas explicando o que é o DOM, Arrays, objetos, funções, além de vários exercícios práticos para aplicar o que está aprendendo.

Além do curso, é sempre bom também dar uma passada na documentação oficial da linguagem, ela pode ter um víes um pouco mais técnico, mas é bom ir se habituando a realizar consultas na documentação.

E bom, conteúdo sobre Javascript é o que não falta na internet, se quiser ir além do que está sugerido aqui, basta dar uma pesquisada sobre cursos, conteúdos adicionais e até dúvidas que te dou quase certeza que você encontrará algo que vai te ajudar. Aliás, saber pesquisar é uma ótma skill 😉.

Praticando

Com o Javascript, a ideia de projetos para praticar cresce para o infinito. Mas aqui, quis reunir alguns projetinhos que podem agregar muito conhecimento e podem te desafiar.

A lista de projetos abaixo foi retirada de vídeos do canal do Will Dev, que tem ótimos conteúdos sobre projetos com Javascript puro.

➡️ Criando app de anotações com Javascript
➡️ Criando Quiz com Javascript
➡️ Criando gerador de senhas com Javascript
➡️ Criando modal com HTML, CSS e JS
➡️ Criando drag and drop com Javascript

Além de serem ótimos conteúdos, não se contente apenas com isso, tente tirar suas ideias do papel! Pegue e faça, se desafie, só assim o progresso vem. Tente primeiro começar a fazer sozinho os projetos citados acima, não precisa acertar tudo de primeira. Se tiver dúvida, pesquise, dê uma olhadinha no vídeo. Não se contente em apenas assistir o vídeo e replicar o que está sendo mostrado.

Escolhendo uma Biblioteca/ Framework

Bom, daqui pra frente, vamos continuar falando da linguagem Javascript, mas junto dela, temos outras tecnologias, que são baseadas em Javascript, que nos auxiliam no desenvolvimento de nossas aplicações. Essas tecnologias, podem ser chamadas de Bibliotecas ou Frameworks.

No mercado, existem diversas dessas tecnologias, que podem ser usadas em contextos diferentes. As principais tecnologias, das quais você vai encontrar conteúdos (e vagas) serão React, Vue e Angular. Além delas, ainda existem outras ótimas tecnologias, como Svelte, Preact ou Nuxt.

Como disse, há uma infinidade de tecnologias (enquanto escrevo esse post, pode ter certeza que mais um Framwork Javascript foi criado 😅). Mas, quando estamos começando, pode parecer muito confuso, cada um com sua particularidade, com sua sintaxe e suas formas de resolver o mesmo problema. Então no começo, não tente aprender tudo de uma vez, vai por mim. Em vez disso, escolha uma tecnologia e foque nela.

Mas qual delas escolher? Bom, não existe um fórmula ou método de escolher, o jeito é testar. Escolha uma, estude por alguns dias e veja o que acha. Aqui nesse post vou me aprofundar mais em React, que foi a tecnologia que escolhi estudar (e se eu fosse te sugerir alguma, sugeria React de olhos fechados hehehe).

React

Vamos lá então! O React, como diz em sua própria documentação é Uma biblioteca Javascript para criar interfaces de usuários, baseada em componentes. O React é uma biblioteca desenvolvida e mantida pela equipe do Facebook. Existem diversas empresas que utilizam React no desenvolvimento de seus produtos, como o próprio Facebook!

De novo, existem uma infinidade de conteúdos sobre este tema na internet, não se contente com o que tem aqui apenas, vá fundo, procure cursos, pesquise e trilhe o seu caminho!

Conteúdo

Aqui, decidi sugerir primeiramente um vídeo da Rocketseat que achei super interssante, sobre 🔗 O que começar a estudar no React em 2022. O vídeo possui uma visão geral do que focar em estudar na tecnologia.

Além disso, no canal do Youtube do Matheus Battisti possui um curso completo e 100% gratuito sobre React JS, conta com conteúdos de muita qualidade, além de diversos exercícios práticos para ir aplicando o que está aprendendo.

➡️ Matheus Battisti - Curso completo de React JS

Outra sugestão que gostaria de deixar aqui, é o canal do Youtube do Huriel. Ele possui vários vídeos com conteúdos muito bons e muito atuais. Um deles que gostaria de citar aqui é a sua lista de vídeos explicando o uso dos React Hooks, que é um assunto muito importante do React e com certeza vai te agregar muito conhecimento.

➡️ Huriel - Entenda de vez os React Hooks

Praticando

Assim como foi no Javascript, com o React, é infinito o número de projetos que podem ser feitos com ele. Você pode literalmente fazer qualquer coisa com React. Aqui abaixo, deixo novamente mais algumas ideias de projetos, retirados do canal do Will Dev.

➡️ Criando formulário com React Js
➡️Criando sistema de controle de finanças com React Js
➡️ Criando sistema de login com React Js

Além dessas sugestões, gostaria de deixar um plus, do canal do Youtube do Pasquadev. Onde ele te ajuda a desenvolver uma Pokedex! É um ótimo projeto para por no seu portfólio. Ele é um pouco mais elaborado, conectando o projeto à uma API, mas é muito bem explicado e um bom começo para explorar novos conteúdos.

➡️ Crie uma Pokedex com React Js

Conteúdos adicionais

Bom, o post já está quase chegando ao fim, mas a lista do que você pode aprender estudando front-end está longe do final! Após você conseguir pegar a base do Javascript e do Framework de sua escolha, (no caso daqui do post, de React), é uma boa hora para ir se aprofundando cada vez mais tanto em Javascript como em React, e a realizar projetos cada vez mais elaborados. Aqui abaixo vou deixar uma lista de conteúdos adicionais que considero importantes na vida do desenvolvedor front-end.

• O que é uma API (Rocketseat)
• Git e Github (Gustavo Guanabara)
• Axios
• Crie um projeto React utilizando uma API pública (Pasquadev)
• Typescript
• Styled Components
• Redux

Outra sugestão para aprimorar cada vez mais o seus conhecimentos, é contribuindo para projetos Open Source (como o TabNews!). Mas aqui, gostaria de compartilhar outro projeto Open Source idealizado pelo Flávio Mendes. Que é o Trilha Info. O Trilha Info foi criado com o intuíto de ser uma plataforma de Roadmaps, onde você pode contrbuir adicionando conteúdos aos Roadmaps de cada área! Além também de usufruir dos conteúdos já existentes lá.

Por hoje é só!

Tentei centralizar o máximo de conteúdo relevante aqui no post, conteúdos estes que eu mesmo já fiz muito uso, mas sem me prolongar muito para não ficar cansativo, espero ter conseguido! Que esse post possa ter te ajudado você de alguma maneira, valeu! 👋