---
# System prepended metadata

title: RoadMap Fornt-end Dev. Jr.

---

# 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
    
    
    
    