 HTML - Fundamentos:

o HTML é uma linguagem de marcação que define a

estrutura do seu conteúdo. HTML consiste em uma série
de elementos que você usa para mostrar algo de uma
determinada maneira ou agir de uma certo modo. As tags
podem criar um hiperlink de uma palavra ou imagem para
outro lugar, podem colocar palavras em itálico, podem
aumentar ou diminuir a fonte e assim por diante.
o Aprender quais tags são necessárias para um HTML
básico
o Criar um parágrafo de texto
o Exibir uma imagem
o Conhecer a diferença entre 'h1', 'h2', 'h3', etc
o Criar um texto com hyperlink
o Criar um formulário com campos relevantes
o Criar uma lista de itens ordenada ou não ordenada
o Criar uma lista de itens dentro de uma lista suspensa
(dropdown list)
o Conectar com um arquivo de CSS
o Criar uma tabela
o Adicionar IDs e classes
 CSS - Fundamentos:
o Cascading Style Sheets (CSS) é uma linguagem usada
para descrever a apresentação de um documento escrito
em uma linguagem de marcação como HTML ou XML. CSS
pode ser usado para estilos de texto de documentos
muito básicos — por exemplo, para alterar a cor e o
tamanho de títulos e links. Ele pode ser usado para criar
um layout — por exemplo, transformar uma única coluna
de texto em um layout com uma área de conteúdo
principal e uma barra lateral para informações
relacionadas. Pode até ser usado para efeitos como
animações.
o Aprender a estrutura visual de uma página, com 'margin'
e 'padding'
o Estabelecer o tamanho com 'width' e 'height'
o Aprender sobre a posição de um elemento ('static',
'relative' ou 'absolute)
o Aprender sobre o 'display' de exibição de um elemento
('block', 'inline', 'inline-block')
o Aprender a posicionar imagens em relação ao texto
o Aprender sobre alinhamento
o Aprender sobre estilo de fontes
o Aprender as diferenças e vantagens de usar as diferentes
unidades de medida em CSS (%, relativas, etc)
 o Conectar com os elementos (IDs, classes) de um arquivo
HTML
o Alterar características de um elemento quando o mouse
passar por cima dele ('hover')
o Aprender box-sizing
o Aprender Flexbox
o Aprender Grid
 JavaScript - Fundamentos:
o JavaScript é a linguagem de programação mais popular
do mundo e é uma das principais tecnologias da World
Wide Web, juntamente com HTML e CSS. Ela possui
tipagem dinâmica, orientação a objetos baseada em
protótipos e funções de primeira classe. Ela é multi-
paradigma e suporta estilos de programação orientados a
eventos, funcionais e imperativos.
o Conhecer os tipos primitivos
o Declarar variáveis, considerando a diferença entre 'var',
'let' e 'const'
o Usar estruturas condicionais ('if', 'else')
o Conhecer os operadores de atribuição e comparação ('=',
'==', '===')
o Usar estruturas de repetição e laços ('while', 'for')
o Usar funções, passando parâmetros e argumentos
o Manipular arrays e listas
o Aprender o conceito de Orientação a Objetos
o Fazer um CRUD
o Obter dados de uma API
o Fazer chamadas assíncronas usando 'Async/Await',
'Promise', etc
 DOM - Fundamentos:
o O Document Object Model (DOM) é uma interface de
programação para documentos web. Ele representa a
página para que os programas possam alterar a estrutura,
o estilo e o conteúdo do documento. O DOM representa o
documento como nós e objetos; dessa forma, linguagens
de programação podem interagir com a página.
o Entender como funciona a árvore do DOM
o Acessar e manipular elementos do HTML e CSS
o Acessar os pais e filhos de um elemento
o Inserir um novo elemento na árvore
o Remover um elemento da árvore
o Esperar por um evento em certo elemento da página
usando 'addEventListener()'
 Acessibilidade em Javascript:
 o Acessibilidade Digital é a eliminação de barreiras na Web.
O conceito pressupõe que os sites e portais sejam
projetados de modo que todas as pessoas possam
perceber, entender, navegar e interagir de maneira
efetiva com as páginas.
o Escrever código com acessibilidade em mente
 Estratégias de SEO:
o SEO significa otimização para motores de busca e que diz
respeito as estratégias usadas para ranquear um site
dentro de mecanismos de busca como o Yahoo, o Bing e,
claro, o mais famoso de todos, o Google.
o Escolher palavras-chave
o Entender como o Google classifica páginas
o Conhecer os fatores de rankeamento
o Fazer Link Building
 Design Responsivo:
o Ajustar suas páginas para o tamanho da tela do usuário
o Media queries
o Conhecer o conceito de Mobile first

Nivel 2
 JavaScript - Callbacks e Promises:
o Uma promessa (Promise) é um proxy para um valor não
necessariamente conhecido quando a promessa é criada.
Isso permite que métodos assíncronos retornem valores
como métodos síncronos - em vez de retornar
imediatamente o valor final, o método assíncrono retorna
uma promessa de fornecer o valor em algum momento no
futuro.
o Uma função de Callback é uma função passada para outra
função como um argumento, que é então invocado dentro
da função externa para completar algum tipo de rotina ou
ação.
o Uma função assíncrona (async) é uma função declarada
com a palavra-chave async, e a palavra-chave await é
permitida dentro dela. As palavras-
chave async e await permitem que o comportamento
assíncrono e baseado em promessas seja escrito em um
estilo mais limpo, evitando a necessidade de configurar
explicitamente as cadeias de promessas.
o Entender o conceito de assincronicidade em programação
o Escrever código assíncrono entendendo o conceito de
promessas em JavaScript
o Utilizar os métodos, palavras-chaves e objetos do
JavaScript para manipulação de promessas como
'Async/Await', '.then()', 'Promise', etc
 o Aprender em quais situações é necessário o uso de
programação assíncrona
o Fazer chamadas em APIs com fetch()
 JavaScript - Testes:
o O teste de software é o processo de avaliação e
verificação de que um software realmente faz o que
deveria fazer. Os benefícios dos testes incluem a
prevenção de bugs, a redução dos custos de
desenvolvimento e a melhoria do desempenho.
o Usar testes unitários
o Usar testes de integração
o Usar testes de comportamento (behavior)
o Usar mocks
 JavaScript - Manipulação de Erros:
o O tratamento de erros refere-se aos procedimentos de
resposta e recuperação de condições de erro presentes
em um aplicativo de software. Em outras palavras, é o
processo composto de antecipação, detecção e resolução
de erros de aplicação, de programação ou de
comunicação.
o Conhecer e tratar as exceções mais comuns
o Saber quais os tipos de erros e em quais situações eles
podem ocorrer
o Entender como o Node.js faz o manejo de erros
o Usar 'try' e 'catch' para tratamento de erros
o Em que ocasiões e de que forma utilizar o throw
o Criar exceções específicas de acordo com a necessidade
de sua aplicação
 JavaScript - ES6:
o Conhecer as diferenças dessa versão do JavaScript
 JavaScript - Modularização:
o Isolar partes do código em módulos
o Usar import e export
 Versionamento Semântico para Front-end:
o SemVer (Versionamento Semântico) é um conjunto
simples de regras e requisitos que ditam como os
números de versão são atribuídos e incrementados.
o Organizar as dependências de um projeto
 Jest:
o Testar componentes
 Cypress:
o Criar e executar testes

Nivel 3
 Estruturas de Dados:
 o No contexto dos computadores, uma estrutura de dados é
uma forma específica de armazenar e organizar os dados
na memória do computador para que esses dados possam
ser facilmente recuperados e utilizados de forma eficiente
quando necessário posteriormente.
o Conhecer as principais estruturas de dados
o Implementar as principais estruturas de dados
 Conceitos de Orientação a Objetos:
o A Programação Orientada a Objetos é um paradigma de
programação de software baseado na composição e
interação entre diversas unidades chamadas de 'objetos'
e as classes, que contêm uma identidade, propriedades e
métodos). Ela é baseada em quatro componentes da
programação: abstração digital, encapsulamento, herança
e polimorfismo.
o Como funcionam objetos
o Criar e utilizar construtores
o O que são classes
o Criar e utilizar métodos
o Como funciona encapsulamento
o O que é herança
o O que é polimorfismo
o Como funcionam interfaces
o O que são abstrações
 JavaScript - Armazenamento:
o Armazenar dados no front-end com localStorage
o Manipular dados armazenados
o Persistir dados armazenados
 JavaScript - Concorrência:
o Programação concorrente é um paradigma de
programação para a construção de programas que fazem
uso da execução simultânea de várias tarefas
computacionais interativas, que podem ser
implementadas como programas separados ou como um
conjunto de threads criadas por um único programa.
o Executar tarefas paralelamente
 TypeScript - Fundamentos:
o TypeScript é uma linguagem de programação fortemente
tipada que se baseia em JavaScript.
o Entender a fundo o que são tipos e a importância da
tipagem
o Aprender o que é o TypeScript, por que foi criado, como
ele funciona e sua relação com o JavaScript
o Conhecer as ferramentas do TypeScript (integração com o
editor de código, verificador estático e compilador)
 o Escrever código em TypeScript com suas ferramentas
(interfaces, enum, decorators, etc)
o Desenvolver aplicações em TypeScript
 GraphQL:
o GraphQL é uma linguagem de consulta e manipulação de
dados de código aberto para APIs. É considerada uma
alternativa para arquiteturas REST.
o Aprender o que é GraphQL e por que foi criado
o Entender como o GraphQL é utilizado no desenvolvimento
de APIs
o Criar APIs utilizando as bibliotecas e frameworks para
GraphQL
 Apollo Client:
o Apollo Client é uma biblioteca abrangente de
gerenciamento de estado para JavaScript que permite
gerenciar dados locais e remotos com o GraphQL.
o Utilizar o Apollo para criar um servidor GraphQL
o Conectar com uma API

Habilidade Auxiliar: Infraestrutura e

Back-end
 Git e GitHub - Fundamentos:
o Git é um sistema de controle de versão distribuído
gratuito e de código aberto projetado para lidar com tudo,
desde projetos pequenos a muito grandes com velocidade
e eficiência.
o GitHub é um serviço de hospedagem para
desenvolvimento de software e controle de versão usando
Git.
o Criar um repositório
o Clonar um repositório
o Fazer commit, push e pull de e para o repositório
o Reverter um commit
o Criar branches e pul requests
o Lidar com merge e conflitos
 HTTP - Fundamentos:
o HTTP significa Hyper Text Transfer Protocol. A
comunicação entre computadores cliente e servidores
web é feita enviando solicitações HTTP e recebendo
respostas HTTP.
o Entender a diferença dos verbos HTTP
o Testar os requests e ver os status codes no navegador
o Saber fazer uma requisição HTTP na linha de comando
com WGET
 o Baixar uma imagem com WGET
o Fazer um post
 JSON:
o JSON significa JavaScript Object Notation (notação de
objeto JavaScript). É um formato de texto para armazenar
e transmitir dados.
o Criar um objeto
o Transformar um objeto em uma string
o Transformar uma string em objeto
o Manipular um objeto
 Linha de comando - Fundamentos:
o CLI é um programa de linha de comando que aceita
entradas de texto para executar funções do sistema
operacional.
o Conhecer os principais comandos
 Cloud - Fundamentos:
o Cloud, ou computação em nuvem é a distribuição de
serviços de computação pela Internet usando um modelo
de preço pago conforme o uso. Uma nuvem é composta
de vários recursos de computação, que abrangem desde
os próprios computadores (ou instâncias, na terminologia
de nuvem) até redes, armazenamento, bancos de dados e
o que estiver em torno deles. Ou seja, tudo o que
normalmente é necessário para montar o equivalente a
uma sala de servidores, ou mesmo um data center
completo, estará pronto para ser utilizado, configurado e
executado.
o Conhecer a diferença entre IaaS, PaaS e SaaS
o Conhecer os maiores provedores de cloud
o Especializar-se em algum provedor
 YARN:
o Yarn é um gerenciador de pacotes para seu código. Ele
permite que você use e compartilhe código com outros
desenvolvedores. O código é compartilhado por meio de
algo chamado pacote (às vezes chamado de módulo). Um
pacote contém todo o código que está sendo
compartilhado, bem como um arquivo package.json que
descreve o pacote.
o Gerenciar pacotes
o Gerenciar dependências
o Instalação de pacotes offline
o Comandos
o Arquivo yarn.lock

Habilidade Auxiliar: UX e Design

 Design Systems:
o Um Design Systems (sistema de design) é uma coleção
de componentes reutilizáveis, guiados por padrões claros,
que podem ser colocados juntos para construir
aplicações.
o Criar e manter bibliotecas que serão consumidas e usadas
como padrão para a construção de um projeto
 Figma - Fundamentos:
o Figma é uma aplicação web colaborativa para design de
interfaces. O conjunto de recursos do Figma se concentra
na interface do usuário e no design da experiência do
usuário, com ênfase na colaboração em tempo real,
utilizando uma variedade de editores de gráficos vetoriais
e ferramentas de prototipagem.
o Criar layouts de páginas e componentes
 Componentes de design:
o Conhecer os componentes descrevem um layout ou
interface
 Sistemas de cores:
o Definir uma paleta de cores que faça sentido para
determinada interface
 Como usar fontes:
o Escolher a fonte mais adequada para determinado projeto