Roadmap Frontend 2023

✅ Aprenda a programar do zero ao profissional: https://mapadaprogramacao.com.br/
⭐ Não deixe de deixar o seu start no repositório.

1. Como funciona a internet?

• Pesquisar artigos e vídeos de como funciona a internet
• O que é HTTP
• Funcionamento de um browser
• DNS
• Hosting

2. Lógica de Programação

Antes de ir para linguagem de programação e passar para o roadmap de qualquer uma das áreas, o ideal é que você estude a lógica de programação, que irá treinar o seu raciocínio para resolução de problemas através de pseudo códigos. Existem diversas formas de se estudar essa matéria, mas minha indicação é que você estude através de algoritmos em Portugol.

Site para treinar e aprender portugol:

Sequência de estudos:

1. Variáveis, Comandos de entrada e de saída
2. Operadores Aritméticos
3. Operadores Relacionais
4. Operadores Lógicos
5. Estruturas Condicionais
6. Estruturas de Repetição
7. Funções
8. Vetores
9. Matriz

3. Roadmap JavaScript

1. Sintaxe e Variáveis
2. Comandos de entrada e saída (Dica: biblioteca prompt-sync)
3. Operadores Matemáticos
4. Operadores de Comparação
5. Operadores Lógicos
6. Estruturas de Condição
7. Funções
8. Objetos
9. Arrays
10. Interação com Arrays
11. Métodos de cada tipo de variável
12. Datas
13. Promises

Package Managers

Para facilitar o desenvolvimento de aplicações JavaScript, precisamos de instalar bibliotecas que nos ajudem a fazer determinadas tarefas de maneira mais efetivas. Essas libs podem ajudar desde com a manipulação de dadas, moedas, chamadas de API, conexão com banco de dados e outras funcionalidades que envolvem a parte lógica, ou até mesmo nos fornecer pacotes visuais com elementos pré-feitos. Os dois principais package managers são:

• npm: https://www.npmjs.com/
• yarn: https://yarnpkg.com/

Recomendo que você leia a documentação dos dois para entender um pouco mais como funcionam e os instale na sua máquina.

4. Roadmap Git e Github

• Inicializar um repositório (git init)
• Checkar o status (git status)
• Adicionar um arquivo pra stage area (git add)
• Adicionar a modificações ao histórico (commit)
• Visualizar histórico (git log)
• Verificar modificações nos arquivos (git diff)
• Renomear, remover e mover arquivos (rm, mv)
• Restaurar arquivos e alterar commits (restore, amend)
• Navegar para um commit passado (git checkout)
• Limpar working directory (git clean)
• Reverter um commit (git revert)
• Ignorar arquivos (git ignore)
• Branches (branch)

5. HTML e CSS

O HTML tem o papel de ser o documento da página web onde os elementos serão ordenados e renderizados. Já o CSS tem o papel de estilizar esses elementos. Dominar muito bem os fundamentos dessa duas linguagens deve ser sua prioridade nos estudos de front-end. Para isso, sugiro que domine os seguintes tópicos:

HTML:

1. Sintaxe de um documento
2. Tags de Blocos:
   1. Header
   2. Body
   3. Div
   4. Nav
   5. Footer
3. Tags de Texto:
   1. Heading
   2. Paragraph
4. Botão
5. Imagem
6. Link
7. Input
8. Tabelas
9. Listas
10. Formulários

CSS

1. Tamanhos e unidades de medida
2. Cores
3. Estilizações de textos
4. Espaçamentos
5. Background
6. Bordas
7. Posicionamento:
   1. Absoluto e Relativo
   2. Flexbox
   3. Grid

6. Aplicações básicas web

1. Formulários
2. Eventos
3. Manipulação do DOM
4. Fetch API
5. Media Query

7. React.js

1. JSX
2. Components
3. State
4. React Hooks
5. Navegação (react-router-dom)
6. Estado Global
   • Context API
   • Redux
   • Zustand
7. Chamadas de API:
   • Axios
   • React Query
   • useHttp
   • SWR
   • Graphql - Apollo
8. CSS moderno:
   • Separação de components com Atomic Design
   • Styled Components
   • Tailwind
   • Emotion
   • Chakra UI
   • Material UI
9. Formulários:
   • Yup
   • Formik
   • React Hook Form

Eslint e Prettier

Eslint e Prettier são ferramentas de formatação de código que nos ajudam a previnir erros e também que o código siga um padrão em relação a sua formatação. Recomendo que você os utilize nas suas aplicações.

8. Cloud Básico

• Vercel
• Netlify
• AWS S3

💡 Dominando estes pontos até aqui você já pode começar a se aplicar para entrevistas de emprego.

9. Sugestão de tópicos avançados

Para continuar evoluindo nos seus estudos e na sua jornada de front-end sugiro que estude:

• TypeScript (e aplicação da linguagem no React)
• Next.js (framework de React)
• CI/CD
• Github Actions
• PWA
• Testes:
  • Jest
  • React Testing Library
  • Cypress
• Firebase
• Sentry