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 Toraline e para ser utilizado inicialmente em uma palestra no Hack the FEG, você pode conferir o vídeo aqui e os slides aqui.

Indice

• Lista de Conteúdos
• Fundamentais
• Cronograma base

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

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 Toraline (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 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

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.