Fiz esse guia baseado no processo que uso com o pessoal que dou mentoria e que contratei pelo Projeto Toraline e para ser utilizado inicialmente em uma palestra no Hack the FEG, você pode conferir o vídeo aqui e os slides aqui.

• Lista de Conteúdos
• Fundamentais
• Cronograma base

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.

• 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.
  • Exemplo da Larissa e da Karina
• 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.
  • A ideia aqui é aprender mais sobre manipulação do DOM de forma geral.
  • Exemplo da Larissa e da Karina

• Javascript: terminar a migração dos exercícios resolvidos do Human Resource Machine para JavaScript.
• Desenvolvimento da landing page do Toraline (que ainda não está no ar).
  • HTML + CSS
  • Countdown de data
  • Formulário de envio de e-mail

Como o Toraline 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.

• Migrar a todo-list para React
  • Exemplo Larissa e Karina

• 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

• Ler um código antigo (nesse caso foi esse aqui) e refatorar
• Exemplo Larissa e Karina

Desenvolvimento em projeto real.