Skip to content

dawkk/starting-front-dev-guide

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 

Repository files navigation

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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published