Guia de Estudos Front-End. JavaScript e TypeScript/Angular

Status	Marcadores: ✅Ok, ❌Pendente, 🟡Revisitar, 🔵Divisor de categorias.	Fonte
🔵	HTML HyperText Markup Language - Fundamentos:	Fonte
✅	Aprender quais tags são necessárias para um HTML básico	Fonte
✅	Criar um parágrafo de texto	⬆️
✅	Exibir uma imagem	Fonte
✅	Conhecer a diferença entre 'h1', 'h2', 'h3', etc	Fonte
✅	Criar um texto com hyperlink	Fonte
✅	Criar um formulário com campos relevantes	Fonte
✅	Criar uma lista de itens ordenada ou não ordenada	Fonte
✅	Criar uma lista de itens dentro de uma lista suspensa (dropdown list)	Fonte
✅	Conectar com um arquivo de CSS	Fonte
✅	Criar uma tabela	Fonte
✅	Adicionar IDs e classes	Fonte
🔵	Css Cascading Style Sheets - Fundamentos:
✅	Aprender a estrutura visual de uma página, com 'margin' e 'padding'	Fonte
✅	Estabelecer o tamanho com 'width' e 'height'	Fonte
✅	Aprender sobre a posição de um elemento ('static', 'relative' ou 'absolute)	Fonte
✅	Aprender sobre o 'display' de exibição de um elemento ('block', 'inline', 'inline-block')	Fonte
✅	Aprender a posicionar imagens em relação ao texto	Fonte
✅	Aprender sobre alinhamento	Fonte
✅	Aprender sobre estilo de fontes	Fonte
✅	Aprender as diferenças e vantagens de usar as diferentes unidades de medida em CSS (%, relativas, etc)	Fonte
✅	Conectar com os elementos (IDs, classes) de um arquivo HTML	Fonte
✅	Alterar características de um elemento quando o mouse passar por cima dele ('hover')	Fonte
✅	Aprender box-sizing	Fonte
✅	Aprender Flexbox	Fonte
✅	Aprender Grid	Fonte
🔵	JavaScript - Fundamentos:
✅	Conhecer os tipos primitivos	Fonte
✅	Declarar variáveis, considerando a diferença entre 'var', 'let' e 'const'	Fonte
✅	Usar estruturas condicionais ('if', 'else')	Fonte
✅	Conhecer os operadores de comparação ('=', '==', '===')	Fonte
✅	Usar estruturas de repetição e laços ('while', 'for')
✅	Usar funções, passando parâmetros e argumentos
✅	Manipular arrays e listas
✅	Aprender o conceito de Orientação a Objetos
✅	Fazer um CRUD
✅	Obter dados de uma API
✅	Fazer chamadas assíncronas usando 'Async/Await', 'Promise', etc
🔵	DOM - O Document Object Model- Fundamentos:
✅	Entender como funciona a árvore do DOM
✅	Acessar e manipular elementos do HTML e CSS
✅	Acessar os pais e filhos de um elemento
✅	Inserir um novo elemento na árvore
✅	Remover um elemento da árvore
✅	Esperar por um evento em certo elemento da página usando 'addEventListener()'
🔵	Js - Acessibilidade em Javascript:
✅	Escrever código com acessibilidade em mente
🔵	Pages - Estratégias de SEO:
❌	Escolher palavras-chave
❌	Entender como o Google classifica páginas
❌	Conhecer os fatores de rankeamento
❌	Fazer Link Building
🔵	Pages - Design Responsivo:
✅	Ajustar suas páginas para o tamanho da tela do usuário
✅	Media queries
✅	Conhecer o conceito de Mobile first
🔵	Nivel 2 -JavaScript - Callbacks e Promises:
✅	Aprender em quais situações é necessário o uso de programação assíncrona
✅	Fazer chamadas em APIs com fetch()
🔵	Js -JavaScript - Testes:
❌	Usar testes unitários
❌	Usar testes de integração
❌	Usar testes de comportamento (behavior)
❌	Usar mocks
🔵	Js - JavaScript - Manipulação de Erros:
❌	Conhecer e tratar as exceções mais comuns
❌	Saber quais os tipos de erros e em quais situações eles podem ocorrer
❌	Entender como o Node.js faz o manejo de erros
✅	Usar 'try' e 'catch' para tratamento de erros
✅	Em que ocasiões e de que forma utilizar o throw
✅	Criar exceções específicas de acordo com a necessidade de sua aplicação
🔵	Js - JavaScript - Modularização:
✅	Isolar partes do código em módulos
✅	Usar import e export
🔵	Js - Versionamento Semântico para Front-end:
❌	conjunto simples de regras e requisitos que ditam como os números de versão são atribuídos e incrementados
❌	Organizar as dependências de um projeto
🔵	Js - Jest:
❌	Testar componentes
🔵	Js - Cypress:
❌	Criar e executar testes
🔵	Js - Nivel 3 - Estruturas de Dados:
🔵	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.
❌	Conhecer as principais estruturas de dados
❌	Implementar as principais estruturas de dados
🔵	Js - Conceitos de Orientação a Objetos:
🔵	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.
✅	Como funcionam objetos
❌	Criar e utilizar construtores
❌	O que são classes
❌	Criar e utilizar métodos
❌	Como funciona encapsulamento
❌	O que é herança
❌	O que é polimorfismo
❌	Como funcionam interfaces
❌	O que são abstrações
🔵	Js - JavaScript - Armazenamento:
🟡	Armazenar dados no front-end com localStorage
🟡	Manipular dados armazenados
❌	Persistir dados armazenados
🔵	Js - JavaScript - Concorrência:
🔵	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
❌	Executar tarefas paralelamente
🔵	Js - TypeScript - Fundamentos:
🔵	TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript.
✅	Entender a fundo o que são tipos e a importância da tipagem
❌	Aprender o que é o TypeScript, por que foi criado, como ele funciona e sua relação com o JavaScript
❌	Conhecer as ferramentas do TypeScript (integração com o editor de código, verificador estático e compilador)
❌	Escrever código em TypeScript com suas ferramentas (interfaces, enum, decorators, etc)
❌	Desenvolver aplicações em TypeScript
🔵	GraphQL
🔵	GraphQL é uma linguagem de consulta e manipulação de dados de código aberto para APIs. É considerada uma alternativa para arquiteturas REST
❌	Aprender o que é GraphQL e por que foi criado
❌	Entender como o GraphQL é utilizado no desenvolvimento de APIs
❌	Criar APIs utilizando as bibliotecas e frameworks para GraphQL
🔵	Apollo Client
🔵	Apollo Client é uma biblioteca abrangente de gerenciamento de estado para JavaScript que permite gerenciar dados locais e remotos com o GraphQL
❌	Utilizar o Apollo para criar um servidor GraphQL
❌	Conectar com uma API
🔵	Habilidade Auxiliar: Infraestrutura e Back-end
🔵	Git e GitHub - Fundamentos
🔵	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.
✅	GitHub é um serviço de hospedagem para desenvolvimento de software e controle de versão usando Git.
✅	Criar um repositório
✅	Clonar um repositório
✅	Fazer commit, push e pull de e para o repositório
✅	Reverter um commit
🟡	Criar branches e pul requests
✅	Lidar com merge e conflitos
🔵	HTTP - Fundamentos
🔵	HTTP significa Hyper Text Transfer Protocol. A comunicação entre computadores cliente e servidores web é feita enviando solicitações HTTP e recebendo respostas HTTP.
❌	Entender a diferença dos verbos HTTP
❌	Testar os requests e ver os status codes no navegador
❌	Saber fazer uma requisição HTTP na linha de comando com WGET
❌	Baixar uma imagem com WGET
❌	Fazer um post
🔵	Js - JSON*
🔵	JSON significa JavaScript Object Notation (notação de objeto JavaScript). É um formato de texto para armazenar e transmitir dados
✅	Criar um objeto
✅	Transformar um objeto em uma string
✅	Transformar uma string em objeto
🟡	Manipular um objeto
🔵	Linha de comando - Fundamentos
🔵	CLI é um programa de linha de comando que aceita entradas de texto para executar funções do sistema operacional.
❌	Conhecer os principais comandos
🔵	Cloud - Fundamentos
🔵	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.
❌	Conhecer a diferença entre IaaS, PaaS e SaaS
❌	Conhecer os maiores provedores de cloud
❌	Especializar-se em algum provedor
🔵	YARN
🔵	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.
❌	Gerenciar pacotes
❌	Gerenciar dependências
❌	Instalação de pacotes offline
❌	Comandos
❌	Arquivo yarn.lock
🔵	Habilidade Auxiliar: UX e Design
🔵	Design Systems
🔵	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.
❌	Criar e manter bibliotecas que serão consumidas e usadas como padrão para a construção de um projeto
🔵	Design - Figma - Fundamentos
🔵	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.
❌	Criar layouts de páginas e componentes
🔵	Componentes de design
❌	Conhecer os componentes descrevem um layout ou interface
🔵	Sistemas de cores
❌	Definir uma paleta de cores que faça sentido para determinada interface
🔵	Como usar fontes
❌	Escolher a fonte mais adequada para determinado projeto
🔵	TypeScript - Framework - Angular - Nível 1
🔵	Angular é uma framework de construção de aplicações e plataforma de desenvolvimento construído em TypeScript para criar aplicações eficientes e sofisticadas de página única (SPA).
❌	Construir interfaces utilizando HTML, CSS e TypeScript
❌	Criar aplicações SPA
❌	Construir aplicações web, mobile ou desktop
❌	Integrar dados com API’s REST
❌	Utilizar a composição para criar componentes reutilizáveis
❌	Utilizar serviços do tipo Resolver
❌	Manipular requisições criando serviços do tipo Interceptor
🔵	O pattern Observer
🔵	Em engenharia de software, o padrão (pattern) chamado Observer é um padrão de projeto de software no qual um objeto, chamado de sujeito (subject), mantém uma lista de seus dependentes, chamados de observadores (observers), e os notifica automaticamente de qualquer mudança de estado, geralmente chamando um de seus métodos.
❌	Entender o que são Design Patterns
❌	Atualizar diversos elementos simultaneamente usando Observers
❌	Declarar os Subjects
❌	Criar programas baseados em eventos
🔵	Nível 2 - Angular - Templates
🔵	Em Angular, templates são um modelo para um fragmento de uma interface de usuário (IU). Templates são escritos em HTML, e uma sintaxe especial pode ser usada dentro de um template para construir com base em muitas das características do Angular.
🔵	Angular - Renderização
🔵	Uma aplicação Angular normal é executada no navegador, renderizando páginas no DOM em resposta às ações do usuário. A Angular Universal executa no servidor, gerando páginas de aplicação estática que mais tarde são inicializadas no cliente.
❌	Exibir uma página Angular no navegador
❌	Realizar renderização no lado do servidor
🔵	Angular - Services
🔵	Um serviço é uma categoria ampla que engloba qualquer valor, função ou funcionalidade que uma aplicação necessite. Um serviço é tipicamente uma classe com um propósito conciso e bem definido. O Angular distingue componentes de serviços, para aumentar a modularidade e a reusabilidade.
❌	Criar dados que estarão sempre disponíveis
❌	Dividir a aplicação web em diversas partes
🔵	Angular - Roteamento
❌	Navegar até um componente
❌	Incluir um parâmetro de rota
❌	Controlar o fluxo de navegação do seu usuário com guarda de rotas
🔵	Angular - CLI (Interface de Linha de Comando)
🔵	A Interface de Linha de Comando (CLI) do Angular é uma ferramenta de interface de linha de comando que você utiliza para inicializar, desenvolver, estruturar e manter aplicações Angular diretamente de um shell de comando.
❌	Aprender a sintaxe 'ng [argumento-opcional] [opções]'
❌	Conhecer os comandos mais importantes, como 'ng add', 'ng build', 'ng update', 'ng deploy', 'ng new', 'ng test', entre outros
🔵	Nível 3 - Angular - Gerenciamento de Estado
🔵	Um 'estado' (state) é qualquer dado necessário para reconstruir UI (Interface de Usuário) qualquer momento. A alteração desses dados desencadeará um redesenho da interface do usuário. O gerenciamento do estado é o conceito de adicionar, atualizar, remover e ler esses dedos e seus 'estados' em uma aplicação.
❌	Atualizar componentes em tempo real
❌	Esperar por alterações em algum componente e executar alterações
❌	Usar Redux, NGXS e outros
🔵	Angular - Formulários
🔵	Um formulário web é uma página online que aceita inserção de dados (inputs) do usuário. É uma página interativa que imita um documento ou formulário em papel, onde os usuários preenchem determinados campos.
❌	Criar formulários com Template Forms
❌	Criar formulários reativos com Reactive Forms
🔵	Angular - Módulos
🔵	m módulo (Module), diferentemente de um componente, não controla nenhuma view. Um módulo é constituído de um ou mais componentes. Uma aplicação Angular tem que ter no mínimo um módulo que contenha mínimo um componente (Component).
❌	Como usar a classe ngModule
❌	Declarar quais componentes podem ser usados por componentes de outros módulos
❌	Declarar quais services serão injetados
❌	Aprender a modularizar uma aplicação
❌	Carregar módulos como Lazy
🔵	Angular - Injeção de Dependências
🔵	A injeção de dependência permite declarar as dependências de suas classes TypeScript sem cuidar de sua instanciação. Em vez disso, o Angular trata da instanciação para você. Este design pattern permite escrever um código mais testável e flexível.
❌	Declarar as dependências de suas classes
❌	Injetar dependências em um componente
❌	Conhecer os Injection T✅ens
❌	Configurar providers
❌	Entender a Injeção de Dependência Hierárquicai
🔵	Angular - Testes
❌	Usar testes unitários
❌	Usar testes de integração
❌	Usar testes de comportamento (behavior)
❌	Usar mocks
❌	Familiarizar-se com Jasmine e/ou Karma