# RoadMap Fornt-end Dev. Jr.

1. Etapa: Introdução a internet
- Como funciona a internet?
- O que é HTTP?
- Navegadores e como eles funcionam?
- DNS e como funciona?
- O que é Nome de Domínio?
- O que é hospedagem?
2. Etapa: Configurar ambiente de desenvolvimento
- Instalar VSCode, ele é o editor de código aberto, que será utilizado para aprender lógica de programação. Também será utilizado para criação de sistemas e sites web, utilizando HTML, CSS e JavaScript.
- Instalar o NodeJS, ele é um software de código aberto, baseado no interpretador V8 do Google e que permite a execução de códigos JavaScript fora de um navegador web.
- Instalar o Git, ele é um sistema de controle de versões distribuído, usado principalmente no desenvolvimento de software, mas pode ser usado para registrar o histórico de edições de qualquer tipo de arquivo.
- Criar uma conta no GitHub, ele é uma plataforma de hospedagem de código-fonte e arquivos com controle de versão usando o Git. Ele permite que programadores, utilitários ou qualquer usuário cadastrado na plataforma contribuam em projetos privados e/ou Open Source de qualquer lugar do mundo.
- Gerar o par de chaves SSH Keys, são chaves de autenticação SSH para aprimorar a segurança do servidor remoto. Essas chaves será utilizada para se comunicar com a conta do GitHub
3. Etapa: Estudar Lógica de Programação e Git
- Sintaxe e Construções Básicas
- Faça bastantes algoritmos para treinar sua lógica
- Não esqueça de fazer rascunhos, antes de começar a codar
4. Etapa: Sistemas de controle de versão
- Estados do git:
- Working Directory (Arquivos modificados, excluidos e adicionados)
- Staging Area (Arquivos adicionados e preparados para serem versionados)
- .git directory (repositório no GitHub)
- Fluxo do versionamento:
- Entender o que são: (branch, feature, issues, pull request)
- O fluxo de trabalho básico Git é algo assim:
1. Você modifica, excluir ou criar arquivos no seu diretório de trabalho.
2. Você prepara os arquivos, adicionando imagens deles à sua área de preparo.
3. Você faz commit, o que leva os arquivos como eles estão na área de preparo e armazena essa imagens de forma permanente para o diretório do Git.
4. Você faz o git push, enviar os arquivos para o repositório no github
- Comandos básicos como:
- git clone (Clonar repositório do hithub)
- git init (iniciliar um novo repositório local)
- git remote add origin <link-do-repositorio>
- git add . (adicionar todos os arquivos)
- ou git add <nome-do-arquivo> (adicionar arquivos individualmente)
- git commit -m "sua mensagem" (adicionar no staging area)
- git push origin <nome-da-branch> (enviar arquivos para o repositório no github)
- git pull origin <nome-da-branch> (atualizar a branch local)
- git checkout <nome-da-branch> (mudar de branch)
- git checkout -b <nome-da-branch> (criar nova branch)
- git merge <nome-da-branch> (realizar o merge entre branches)

5. Etapa: HTML
1. Estrutura básica de uma página HTML
2. Tag's semânticas
3. Atributos das tags
4. Formulários
5. Link
6. Etapa: CSS
1. O que é o CSS?
2. Conhecendo o atributo style
3. Conhecendo o elemento style
4. Importando um arquivo CSS
5. Seletores básicos do CSS
6. Ordem de prioridade
7. Efeito cascata
8. Herança
9. Especificidade
10. Combinadores de seletores
11. Box-model
12. Margin, border e paddign
13. Bordas arredondadas
14. Reset e Normalize
15. Tipografia + Importação de fontes
16. Background
17. Layouts com Display Flex
18. Responsividade
7. Etapa: Javascript
1. DOM
2. Vinculação do JS
3. Evento inline
4. DOM Seletores
5. Modificando o DOM
6. addEventListener
7. Modificando classes
8. Manipulando Formulários
9. LocalStorage e SessionStorage
10. Assincronismo + Ajax
8. Etapa: Fazer deploy da aplicação no GitHub Pages
9. ReactJS
- O que é NPM e como utlizar os comandos básicos
- npx create-react-app <nome-do-site> - CRA (Create React App)
- Estrutura básica do React
- Componentes
- hooks (useState, useEffect, useRef)
- Integração com API
- Rotas, Link, useNavigate e useParam com React Router Dom
- Rotas protegidas
- useLocalStorage
- Context-API (Hooks customizados e contextos)
- Testes com React Testing Library
- Gerar Build da aplicação
- Deploy no Vercel
10. NextJS