Guia para o Desenvolvedor Frontend

Se você está começando agora a estudar desenvolvimento frontend ou está querendo migrar para a área e anda um pouco perdido, sem saber por onde começar, preparei este guia de estudos para te ajudar e descomplicar esta jornada.

Neste guia vou agrupar conteúdos e links que tenho compartilhado no meu Instagram e YouTube.

Este guia será atualizado constante, portanto, recomendo que você salve esta página nos seus favoritos e volte aqui sempre que precisar.

Inclusive, recomendo que você se inscreva na minha newsletter para receber atualizações da página. Além disso, caso não encontre algo que gostaria de aprender, deixe seu comentário no fim da página, vou pesquisar e trazer a informação da forma mais clara e descomplicada possível.

O que eu preciso para começar?

Para começar seus estudos, recomendo que você utilize algum editor de código como o Visual Studio Code, embora seja possível utilizar outros editores ou até mesmo um editor de texto como o Bloco de Notas no Windows, usar uma ferramenta apropriada vai te trazer muitos benefícios, além de ficar mais próximo da realidade do dia a dia de um desenvolvedor front-end.

Você encontra o Visual Studio Code clicando aqui.

O que estudar primeiro?

O primeiro passo para se tornar um desenvolvedor front-end web é dedicar tempo para entender como a internet funciona. Se isto parecer muito básico para você, apenas verifique se consegue responder as perguntas a seguir.

• Como funciona a internet?
• O que é HTTP e HTTPS?
• Como funcionam os navegadores?
• O é um COOKIE?
• O que é e como funciona um serviço de DNS?
• O que é um domínio?
• O que é uma hospedagem?

Se você não souber responder alguma das pergunta, este é um sinal para estudar ou revisar. Para começar a revisar estes tópicos, nesta página da MDN você contra tudo sobre HTTP.

Conseguiu responder a todas perguntas? Maravilha, o próximo passo são os fundamentos de HTML e CSS.

Para HTML estude os seguintes tópicos:

• Os elementos da linguagem de marcação HTML;
• Elementos semânticos do HTML;
• Formulários e Validações com HTML;
• Acessibilidade para web, veja sobre ARIA;
• Elementos Meta do Head;
• O básico de SEO;

Nesta página você encontra os fundamentos e tutoriais para estudar HTML.

Para CSS estude os seguintes fundamentos:

• O que são folhas de estilo (CSS) e propriedades;
• Pseudo elementos CSS;
• Posicionamento de elementos (CSS Grid, Flex Box, Floats, Positions, Display);
• Layout responsivo e CSS Media Queries;
• Animações com CSS;

Nesta página você encontra os fundamentos de CSS para estudar e praticar com tutoriais;

Foque em estudar e praticar, não existe mágica no desenvolvimento para web, existe pratica e repetição. Recomendo que você comece criando layouts simples, tente reproduzir algum site que você acessa frequentemente ou crie algo novo, usando os conceitos que aprendeu.

Se você sente que dominou os fundamentos de HTML e CSS, o seu próximo caminho é JavaScript.

É com JavaScript que você poderá criar interações e comportamentos no HTML, por se tratar de uma linguagem de programação que pode funcionar no browser do usuário (client-side), é com ele que vamos conseguir criar uma interface rica, dinâmica e mais interessante para o usuário.

Aqui os estudos vão ficar mais profundos, mas foque nos fundamentos, não pule etapas:

• O que é e como funcionar o JavaScript?
• Sintaxe do JavaScript, Funções, Estruturas e Tipos de Dados;
• O que é e como manipular o DOM.
• O que é e como trabalhar com Fetch API e Ajax (XHR).
• O que são e como trabalhar com módulos JavaScript;
• Versões do JavaScript (ES6);
• O que é Strict Mode, Prototype, Scope, Shadow DOM e Event Bubbling;

Para todos estes tópicos de JavaScript, nesta página do MDN você encontra os conceitos e tutoriais para aprender e praticar.

Por fim, uma sugestão final é você colocar seus estudos no ar e deixar acessível na internet, para isso você vai precisar de algum provedor de hospedagem, eu recomendo que utilize a Umbler, pois oferece uma maneira rápida e descomplicada de publicar um site.

Já dominei os fundamentos

Se você sente que os fundamentos de HTML, CSS e JavaScript estão dominados, agora chegou o momento de avançar para os seguintes tópicos:

• O que são Sistemas de Controle de Versão?
• O que é o Git;
• Comandos básicos de Git;
• Serviços de hospedagem de repositório;
• Crie uma conta no GitHub e aprenda o básico para usar;

Após os fundamentos de controle de versão, foque em:

• Gerenciadores de pacotes, NPM e Yarn;
• Arquitetura CSS, tenha ao menos um conhecimento básico sobre BEM;
• Pré Processadores CSS, tenha ao menos um conhecimento básico;
• Aprenda o básico sobre Sass;
• Aprenda sobre Ferramentas de Compilação;
• Gerenciadores de tarefas como npm script, gulp e grunt;
• Linters, especialmente ESLint e suas configurações;
• Formatters, uma opção é o Prettier;
• Empacotadores de módulos, especialmente Webpack;

Venceu os fundamentos anteriores?

Agora chegou o momento de você conhecer bibliotecas, frameworks, ferramentas de teste, CSS moderno, Type Chekers e muito mais, mas vamos deixar isso para outra publicação, dedicada exclusiva para estes próximos tópicos.

Enquanto isso, me manda uma mensagem lá no meu direct do Instagram o que achou deste guia e se faltou algo que gostaria de saber.

Se você tiver interesse em se tornar um desenvolvedor front-end profissional, te convido a conhecer o meu curso FrontExpert, nele entrego um conteúdo prático e descomplicado, com aulas atualizadas mensalmente sobre Frontend.