Fiz esse guia baseado no processo que uso com o pessoal que dou mentoria e que contratei pelo Projeto Trampolim e para ser utilizado inicialmente em uma palestra no Hack the FEG.
Inicialmente, tivemos uma lista de conteúdos e fomos marcando todos os que já tinham pelo menos noção do que era. Não tem problema não saber nenhum item da lista, inclusive. O mais importante aqui é se familiarizar com nomes e ter um tracking do que você está aprendendo com o passar do tempo.
Separei esses conteúdos iniciais em quatro categorias: gerais, lógica de programação, HTML e CSS. Ignorei um pouco o JavaScript no comecinho, mas vou deixar aqui a lista de JS que usamos quando começamos com ele também.
Lembrando que essa lista é apenas um tracker, então está em ordem alfabética e não de prioridade. A ordem de prioridade que seguimos está nas próximas seções.
Gerais
- Diferenças entre Back End e Front End
- Editor de texto
- Eslint
- Git
- Inspecionador de Elementos
- Live Server
- Npm
- Scrum
- Servidor
- Terminal
Lógica de Programação
- Arrays
- Estrutura condicional (if/else)
- Estrutura de repetição (for, while, etc)
- Objetos
- Operação de negação
- Operações aritméticas (soma, multiplicação, etc)
- Operações condicionais (maior que, igual que, etc)
- Tipos de dados (number, string, boolean, etc)
- Variáveis
HTML
- Acessibilidade
- Formulário
- Semântica
- SVG
CSS
- After e Before
- Animações
- BEM - Block Element Modifier
- Box Model
- CSS Variables
- Display
- Estilização de texto
- Flexbox
- Formulário
- Grid
- Imagens
- Position
- Seletores
JavaScript
- Array methods (map, filter, reduce)
- Async JS (promises/async/await)
- Data Attributes
- DOM
- Estruturas de dados
- Fetch API & HTTP
- Funções
- Loops
- Tipos de dados
- Git + Github
- HTML básico - semântica e tags
- Fundamentos CSS - o que é e
- Posicionamentos e alinhamentos - display flex e grid
- Design Responsivo - media queries e mobile first
- SASS - importante pra começar a manipular o css de uma forma diferente
- UI - importante pra ter noção de como a tela se comporta e como deixar a tela acessível, mesmo que não vá criar nada do zero
- Cor e contraste
- Espaçamentos entre elementos
- Tamanho
- Hierarquia Visual
- Tipografia
- Lógica de programação
- Fundamentos JS (com es6) - gosto bastante do EloquentJS
- Import/export JS e import CSS
- Requisições HTTP e Fetch API
Vou dividir esse cronograma em fases, pra ficar um pouco mais simplificado. As atividades das fases aconteciam em paralelo e, no nosso caso, como elas fazem 4 horas por dia, cada fase representa de 7 a 15 dias.
Para todos os projetos desenvolvidos:
- Tudo no github (criando uma branch separada para trabalhar e abrindo Pull Request para revisão)
- Quebrando os projetos em pequenas tarefas antes de começar e criando um card no Trello para cada tarefa.
- Restrospectiva quinzenal pra analisar o que está dando certo e o que está faltando ou está com dificuldade.
- Lógica de programação: Fases do Human Resource Machine todos os dias.
- HTML + CSS + noções de design: site pessoal.
- Layout no figma: a ideia aqui é ser algo que você goste, não precisa ficar perfeito, mas é importante ter seu nome, imagem (não necessariamente sua), um textinho e links de contato.
- Criação do repositório com o nome da conta + github.io
- Desenvolvimento em HTML + CSS e rodando no github pages.
- Exemplo da Larissa e da Karina
- Pesquisa e estudo: estudar um conteúdo específico para explicar pra um grupo. A ideia aqui é pegar familiaridade com organização de conteúdo e pesquisa. Aqui podem entrar quaisquer outros temas, mas os temas que usamos foram:
- Unidades de medida
- Formulários
- Input
- Checkbox e radio button
- Select
- Image
- Background-image
- Seletores
- Pseudo-seletores
- Pseudo-elementos
- Javascript: continuar os algoritmos no Human Resource Machine e migrar os exercícios do Human Resource Machine que já tinham resolvido para JavaScript.
- Javascript: 30 days of code do Hacker Rank até o dia 7 - Arrays.
- HTML + CSS: reprodução de layout de todo-list. Aqui poderia ser outros projetos que possuem layout e funcionalidade separados como uma calculadora.
- Procuramos o layout no codepen ou em outros sites com modelos bonitos. Tem alguns links de referência nesse outro repositório.
- Por enquanto, apenas HTML e CSS, inclusive pra marcar os itens da lista como concluídos.
- Javascript: término dos exercícios do Human Resource Machine e continuação da migração dos exercícios resolvidos do Human Resource Machine para JavaScript.
- Funcionalidade do todo-list.
- Javascript: terminar a migração dos exercícios resolvidos do Human Resource Machine para JavaScript.
- Desenvolvimento da landing page do Projeto Trampolim (que ainda não está no ar).
- HTML + CSS
- Countdown de data
- Formulário de envio de e-mail
Como o Trampolim usa React, priorizei o contato inicial com a ferramenta. Você pode inverter a fase 5 com a 6, já que a 5 não depende de ferramenta.
- Criação de API usando json-server
- Consumir a API na todo-list. Aqui consumimos no React, mas poderia ser no VanillaJS (js puro) também.
- Procurar uma API pública com um tema que goste
- Fazer um aplicativo em React (ou com outra ferramenta que quiser) baseado nessa API
- Exemplo da Larissa e da Karina
Desenvolvimento em projeto real.