-Curso Do Front ao End do MarcosBrunoBR
- Introdução
- Instalação
- Fluxo de vida
- Inicializando o repositório
- Trackeando arquivos e pastas
- Guardando estado local dos arquivos e pastas
- Adicionando repositório remoto
- Clonando repositório remoto
- Enviando arquivos e pastas para repositório remoto
- Protocolos que o Git suporta
- Verificando estados dos arquivos e pastas
- Pegando novidades do repositório remoto
- Informando quais arquivos não devem ser enviados para repositório remoto
- Trabalhando com branchs locais e remotas
- Resolvendo conflitos
- Merge vs Rebase
- Desfazendo alterações anteriores
- Removendo estados sujos
- Usando tags
- Introdução
- Criando conta
- Criando repositório
- Lendo código de outros projetos
- Colaborando com projetos open source
- Abrir e fechar PRs
- Fazendo e respondendo comentários em uma PR
- Reprovando e aprovando PR
- Como hospedar seu site no GitHub Pages de graça
- Como atualizar seu site no GitHub Pages
- Introdução
- Versão do HTML
- Comentários
- HTML semântico
- Tags sem semânticas mais úteis
- Tags de configuração
- Tags de marcação de conteúdo
- Tags de estrutura
- Tags de média
- Atributos globais e os não globais
- Acessibilidade com WAI-ARIA
- Introdução
- Seletor de tag
- Seletor de id
- Seletor de class
- Pseudo-elements
- Pseudo-class
- Como saber se a propriedade funciona no navegador
- Animação com transition e animation
- Seletor de filho
- Seletor de filho direto
- Seletores avançados
- Sistema de cores
- Sistemas númericos
- Unidade de medidas absolutas
- O Pixel não é um pixel de verdade
- Unidade de medidas relativas
- Custom properties CSS variables
- Criando regras com media query
- Fazendo cálculos com unidade de medidas diferentes
- Pensando mobile first
- Prefixo de tags novas
- Progressive enhancement
- Organizando as pastas do seu CSS com ITCSS
- BEM vs RSCSS
- Introdução
- Instalação
- NodeJS: a plataforma feliz pro FrontEnd
- Para que uso o npm
- Subindo seu servidor de dev com http-server
- Usando o npm script
- Automatizando tarefas chatas com o ShellJS
- Introdução
- Instalação
- Variáveis
- Operadores mátematicos
- Funções
- Reaproveitamento de código
- Resolvendo o problema chato de repetição do pai no seletor
- Importar comportamentos visuais
- Função de cores
- Media querys dinâmicas
- Compass um mundo feliz e pronto
- Mixin vs Extend
- Introdução
- O que é ECMAScript
- As formas de criar variáveis e a diferença entre elas
- Variáveis são as primeiras - hoisting
- Operadores aritmétricos para fazer umas contas
- Lidando com condições: if e else
- Operadores de comparação, salvando nossas vidas
- If ternário é muito bacana
- Funções com nomes e sem nomes
- Arrow function
- Precisamos falar sobre escopo
- O this no JavaScript é louco
- O que é léxica?
- Criando objeto com class e sem ela
- Métodos e outras coisas do Object
- JSON: um objeto bem diferente e muito usado
- Design pattern: resolvendo problemas do futuro
- String e Number
- Array é algo muito legal
- Felicidade de conhecer o destructuring
- Os loops de terno e gravata: for e while
- Coisas simples e úteis do array - splice e slice
- Array nunca acaba - toString, shift, unshift e concat
- Métodos felizes do Array, foreach, map, find e por aí vai
- Todas vez que usar Switch pode matar uma foca
- Progressive enhancement
- Escopo por arquivos - IIFE (Immediately-Invoked Function Expression)
- Seu JavaSrript mais chato e legal - use strict
- Promise e async/await
- Introdução
- Metacaracteres representantes
- Metacaracteres quantificadores
- Metacaracteres âncoras
- E outos metacaracteres que não consegui categorizar
- Introdução
- Instalação usando o npm
- Por que não fazer a instalação global?
- Fluxo de trabalho conhecido também como Workflow
- O que o gulpfile.js?
- Tá chato ter que atualizar o navegador toda vez
- Muitos arquivos CSS, muitas requisições
- CSS estão grandes demais
- JavaScript com muitas linhas
- Seu projeto está organizado mas tem muitos arquivos JS
- Você fez um site one page e o HTML está grande
- Site com muitas imagens, bora otimizar elas
- Criando pasta de deploy
- Pegando erros JS e CSS antes de ir para o navegador
- Introdução
- Usando variáveis de ambiente de forma feliz
- Importando os CSS
- Página carregando sem estilo e depois entra o estilo FOUC
- Importando os JavaScripts
- Página está muito grande, lidando com lazyloading
- Criando pasta para deploy
- Introdução
- Começando um projeto react de uma forma feliz
- HTML vs JSX
- Escrevendo JavaScript feliz que não funciona no navegador
- O que quer dizer components?
- Component vs Object
- Componentes com conteúdos dinâmicos
- Escrevendo CSS com código JavaScript
- Passando propriedade para o seu Componente (styled-components)
- Arquitetura de pastas feliz com ITCSS
- Criando CSS globais (styled-components)
- Agora está fácil usar SASS no React
- Criando muitas páginas (Router)
- Escondendo e aparecendo um componente com estado (state)
- Mesmo dado em componentes diferentes (Redux)
- Entendo os tipos de arquitetura do Redux
- Criando themas com Context API
- Quando usar componente sem ou com estado
- Lidando com eventos
- Ciclo de vida de um componente
- Validando as propriedades de um componente
- Problemas com o this do componente: bind ou arrow fuction
- Usando uma API com o axios
- Validando e enviando dados de um form com formik e yup
- Garantindo que está tudo certo com testes
- bônus #API REST com #Express
- Introdução
- Começando um projeto com npm
- Deixando a vida feliz com nodemon
- Criando uma integração com o PayPal
- Configurando o Nunjucks como view engine
- Definindo pasta pública
- Pegando dados de um formulário pelo body
- Criando resposta padrão para 404
- Guardando log da aplicação
- Criando a camada do Controller
- Criando seus arquivos de rota
- Criando a camada de service para conversar com o PayPal
- Aprendendo a lidar com o métodos HTTP
- Adicionando o SASS pra deixar o CSS mais feliz
- Como evitar repetição no HTML
- Entendo os diferentes testes no Backend
- bônus #UX pra #FrontEnd
- Introdução
- 10 heurísticas de Nielsen
- Affordance
- Teste AB
- Teoria das cores
- Leitura em Z e Y
- Thumb Zone
- Microinteraction
- Microcopy
- Lei de Fitts
- Lei de Hick
- Protótipo