# Roadmap - Front-end

<details>
<summary>1 - Ambiente de desenvolvimento</summary>

- Instalar os programas necessários para desenvolvimento

</details>

<details>
<summary>2 - Terminal básico</summary>

- Comandos básicos navegação de diretórios
- Comandos básico de manipulação de arquivo

</details>

<details>
<summary>3 - git/github</summary>

- Comandos do git
- Gerênciar repositórios remotos no github

</details>

<details>
<summary>4 - Nodejs</summary>

- Gerenciar módulos com npm/yarn
- Saber executar arquivos javascript com o npm/yarn

</details>

<details>
<summary>5 - Lógica de programação</summary>

- Variáveis
- Condicionais e Thruthiness
- Arrays e Loops
- Objetos
- Funções
- Métodos de Strings
- Métodos de Arrays
- Callbacks

</details>

<details>
<summary>6 - HTML</summary>

- Elementos HTML (inline/block)
- Atributos
- Estrutura básica de uma página HTML
- tag's semâticas

</details>

<details>
<summary>7 - CSS</summary>

- Conhecendo o atributo style
- Conhecendo o elemento style
- Importando um arquivo CSS
- Seletores básicos do CSS
- Ordem de prioridade
- Efeito cascata
- Herança
- Especificidade
- Combinadores de seletores
- Box-model
- Margin, border e paddign
- Reset e Normalize
- Tipografia
- Background
- Variáveis CSS
- Pseudo-elements
- Pseudo-classes
- O que é o Flexbox?
- Flexbox
- Estrutura básica de Flexbox
- Eixos em Flexbox
- flex-direction
- justify-content
- align-items
- order
- flex-grow
- align-self

</details>

<details>
<summary>8 - Javascript</summary>

- DOM
- Vinculação do JS
- Manipular objetos
- DOM Seletores
- Modificando o DOM
- Modificando classes
- Eventos
- Event Listeners
- HTML dinâmico
- CSS Dinâmico
- setInterval/setTimeout
- Manipular formulários

</details>

<details>
<summary>9 - Assincronismo</summary>

- Promise
- async/await
- then/catch
- try/catch
- Leitura e escrita de arquivos

</details>

<details>
<summary>10 - Requisições Axios/Fecth</summary>

- Fazer requisições GET/POST
- Manipular JSON

</details>

<details>
<summary>11 - React</summary>

- CRA
- Estrutura JSX + CSS
- Criação de Componentes
- Compartilhamento de props/children
- hooks (useState, useRef, useEffect)
- react-router-dom
- controle de rotas protegidas
- criaçã de páginas com rotas
- useLocalStorage
- useParam
- ContextAPI (context e hooks personalizado)
- intetgração com API
- Teste unitário
- Test end-to-end

</details>

<details>
<summary>12 - Deploy</summary>

- Heroku
- Vercel
- AWS
- Azure
- Google Cloud

</details>