/starting-front-dev-guide

Um guia pra começar no mundo do Front End

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.

Indice

Lista de Conteúdos

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

Fundamentais

  • 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

Cronograma base

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.

Fase 1 - lógica e básico de html e css

  • 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

Fase 2 - básico de js, semântica, básico de css, css variables, BEM

  • 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.

Fase 3 - mais algoritmos em js, data-attributes, manipulação de DOM

  • 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

Fase 4 - sass, manipulação de data, mais manipulação de DOM, formulários

  • 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

Fase 5 - introdução ao react

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.

Fase 6 - json-server, fetch API, manipulação de arrays

  • 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.

Fase 7 - confiança com react + API

  • 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

Fase 8 - leitura de código e refatoração

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

Fase 9 - Plataforma

Desenvolvimento em projeto real.