Como iniciar os estudos de Front-end: um passo a passo de como começar a estudar Front-end

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

Bom, você não é a única pessoa nessa situação. De fato, com tantas tecnologias, linguagens e frameworks, é difícil definir um plano de estudos para alcançar seu objetivo.

Mas não se preocupe. Nesse artigo, vou mostrar alguns caminhos que você pode seguir para organizar seus estudos de Front-end desde o básico até dominar um dos frameworks mais populares da atualidade. Tudo isso direto ao ponto e sem perder nenhum conteúdo importante de nossa plataforma.

Vamos lá? :)

Qual é o primeiro mergulho?

Sem dúvidas, essa é a pergunta mais frequente de quem decidiu iniciar seus estudos de Front-end, ou de quem está buscando agregar novos conhecimentos e até mesmo mudar de carreira — e escolheu Front-end para começar.

Para começo de conversa, recomendo bastante que você leia esses três artigos que te darão um panorama geral sobre como começar na programação (independentemente da área que você for escolher).

• Neste artigo, o CEO da Alura Paulo Silveira dá dicas valiosas para quem quer ou já começou a estudar programação.
• Neste outro artigo, você pode encontrar 7 dicas práticas para aprender a programar do zero.
• Por fim, esse texto vai te dar perspectiva de como sair do zero até se tornar dev Front-end.

Os títulos dos textos podem te dar a impressão de que eles são parecidos. Mas eles te darão perspectivas diferentes (e complementares!) sobre o assunto. Então, vale a pena, ok?

Como iniciar seu estudo de Front-end na plataforma da Alura

Se você acessou a plataforma da Alura e se deparou com diversos cursos da Escola de Front-end: o ideal é que você comece pelo básico.

Ou seja, em primeiro lugar, aprenda sobre os fundamentos de HTML e CSS. Isso vai te permitir entender como criar suas páginas web para diferentes telas, como adicionar diferentes estilos para elas, como escrever um código semântico com acessibilidade, boas práticas de códigos e daí por diante.

Você pode iniciar por esses links:

• Carreira Desenvolvimento Front-end React

E para começar a criar intimidade com versionamento de código, conheça o Git e Github, e você pode fazer isso acessando este curso:

• Curso de Git e Github

Ao conhecer o básico de HTML, CSS e de Git e Github, você está pronto para dar seus próximos passos no desenvolvimento web, publicar e compartilhar seus projetos.

Agora, é hora de ir um pouco mais longe na sua jornada. Vem comigo que vou te mostrar como você pode fazer isso!

Avance na sua jornada: aprenda o que é JavaScript

O próximo passo agora que você já sabe como criar páginas com HTML e CSS é aprender JavaScript. O JavaScript é a linguagem da web e foi criado para tornar a interação das pessoas usuárias com as páginas uma experiência mais simples e intuitiva.

O Júlio César, instrutor da Alura, explicou melhor o que é JavaScript nesse vídeo

https://youtu.be/N1BSG02z-Mw

Conheça o plano de estudo "Trilha JavaScript" da Alura

Para focar e direcionar seus estudos no JavaScript, também temos um plano de estudos que vai te levar do mais básico até o mais completo da linguagem.

Essa trilha vai te direcionar aos seguintes conteúdos: tipos de variáveis, operadores lógicos e condicionais, laços de repetição, funções, objetos e arrays até aprender como manipular elementos HTML das páginas e deixá-las com um comportamento dinâmico.

Além disso, você vai entender como consumir API’s com JavaScript e usar outros recursos da linguagem (como, por exemplo, o reconhecimento de voz) que permitirão criar aplicações incríveis.

E para elevar ainda mais seu nível, você ficará por dentro das diferenças entre JavaScript e Typescript e entenderá porque usar TypeScript em código nos ajuda a sermos mais produtivos e eficientes. Você pode acessar a trilha de estudos JavaScript no link abaixo:

Depois de dominar o JavaScript você estará pronto para iniciar em um framework. Vamos conhecer alguns deles?

Iniciando em um Framework

Agora que você mergulhou no mundo do JavaScript e TypeScript está na hora de escolher qual framework estudar.

Para começar, não existe o melhor framework. Lembre-se que um framework é uma ferramenta que vai possibilitar que você faça algo de uma maneira muito mais simples e produtiva. Ou seja, o importante é que você conheça as bases e que o framework realmente facilite sua vida como pessoa desenvolvedora.

Então, o o melhor framework é aquele que você sabe usar e que atende às suas necessidades. Combinado?

Então vamos conhecer alguns dos mais populares:

React js

Este aqui ganhou o status de framework mas é uma biblioteca JavaScript focada na criação de telas. O React se tornou bastante popular graças à gigantesca comunidade JavaScript pelo mundo e por facilitar bastante a forma como as pessoas desenvolvedoras Front-end constroem as interfaces de usuários (UI).

Para que você consiga dominar o React js, preparamos um plano de estudos que te ensina do básico até conceitos mais avançados como:

• Criar uma aplicação React;
• Diferença entre Function Components x Class Components;
• Ciclos de vida;
• Props vs State;
• Renderização condicional;
• Gerenciamento de estados;
• Testes automatizados.

Esse plano de estudos te mostra como criar aplicações React usando o JavaScript e o Typescript, com mais cursos focados em TypeScript.

Se você ainda não conhece o TypeScript( ou conhece o básico), ainda é possível acompanhar. No entanto, recomendo que você não pule os cursos de Typescript do plano de estudos em JavaScript.

Vue.js

Um outro framework muito popular é o Vue.js, que também é um framework JavaScript para criação de interfaces de usuário. Possui uma extensa comunidade no Brasil e no mundo, o que o torna bastante popular.

Assim como o React, possui renderização declarativa e reage às mudanças que ocorrem na nossa aplicação, atualizando a tela sempre que algo mudar.

O Vue.js ainda é muito usado em diversas empresas pelo mundo por suas capacidades. Por isso, vou deixar aqui embaixo uma trilha de estudos focada no Vue.js.

Nesta trilha você aprenderá desde o básico do Vue.js, entendendo as principais diferenças entre as versões 2 e 3 deste framework, as vantagens de utilizar o Vue.js com o Typescript, como gerenciar os estados de suas aplicações com Vuex e muito mais!

Angular

E para fechar a lista dos três gigantes de popularidade temos o Angular.

Esse não podia ficar de fora, pois compete em nível de igualdade com os anteriores. Também é um framework JavaScript focado para criação de interface de usuário.

Utiliza modelos simples e declarativos de componentes, permitindo a criação de aplicações que rodam no lado do servidor e oferecem boa velocidade e acessibilidade para as páginas web.

Vou deixar aqui um plano de estudos para você que deseja dominar o Angular, feita com muito carinho pelos nossos instrutores:

Dicas finais

Para dar continuidade a sua jornada pelo universo Front-end, temos outros cursos e formações que você pode e deve explorar quando sentir que precisa ir além nos seus estudos.

Formação de Next.js

Como tudo que é bom sempre pode ficar melhor, o Next.js surgiu para melhorar ainda mais suas aplicações React.

Nesta formação você será capaz de explorar tudo que o Next.js oferece para criar aplicações do lado do servidor, gerar conteúdo estático, descobrir como trabalhar com autenticação no Next.js e muito mais.

Svelte

O Svelte surpreendeu ao atingir o primeiro lugar entre os frameworks mais amados segundo o Stack Overflow Developer Survey 2021, mostrando que uma forte comunidade está surgindo por aí.

É por isso que não poderia deixar de comentar que temos aqui na Alura um curso de Svelte maravilhoso que vai te ensinar a dar seus primeiros passos com esse queridinho dos dev’s.

Imersões

Além disso, vale a pena participar e acessar a imersão Front-end, para evoluir seus conhecimentos com um projeto mão na passa.

A Imersão Front-End é um mergulho em conteúdos exclusivos e gratuitos no universo de Front. São cinco aulas para desenvolver habilidades avançadas em HTML e CSS, conhecer frameworks modernos e criar o Front-End de uma página de navegação inspirada no Spotify.

Conclusão

Espero que este artigo te ajude a conseguir se organizar e estudar os conteúdos que vão contribuir para realizar seus objetivos na carreira como pessoa desenvolvedora Front-end.

Você viu que é preciso estudar desde o básico como HTML e CSS, dominar a linguagem da web, o JavaScript, e que o TypeScript é fundamental para que você ganhe produtividade no seu dia a dia como dev.

Além disso, conheceu alguns dos frameworks mais populares do mercado de Front-end e agora poderá escolher entre um deles ou até mesmo estudar todos no seu tempo com as trilhas de estudo em nossa plataforma.

Estou muito feliz que você chegou até aqui. Por isso, não poderia deixar de te convidar a participar de nossa comunidade no Discord para aprendermos e crescermos juntos!

E não se esqueça de compartilhar conosco sua evolução ao longo dessa jornada, isso deixa nossos corações quentinhos!

Bons estudos e até a próxima!