Guia Definitivo Do Zero à Primeira Vaga

• 📚 Guia do dev autodidata
• 🌎 Guia para o contexto WEB
• 👨‍🔬 Guia para iniciantes & pessoas migrando de área
• 🏆 Guia para quem quer focar mais na prática ao invés da teoria
• 👉 Gostou? deixa sua 🌟 ou segue este repo para receber atualizações
• 👉 NÃO Gostou? Abra uma issue e vamos conversar o que está errado! Valeu
• 🚧 Trabalho em andamento! Sua ajuda faz a diferença

Motivações

• Aprender tecnologias da área WEB
• Não sei se gosto de Backend ou de Frontend?
• Sempre alguém afirma que tem que aprender algo antes
• Aprender os fundamentos antes dos frameworks
• Separar sintaxe & lógica de programação nos estudos
• Separar JavaScript & JS para páginas web
• Hard vs Soft Skills
• Aprender fazendo algo real (projetos práticos)
• A maioria dos tutoriais na internet são feitos para pessoas da área, mesmo um tutorial básico de HTML/CSS já espera que o estudante conheça um monte de coisa

Links relacionados

• 🚧 Download do e-book
• 🚧 Playlist vídeos trilha fundamental
• ▶️ Parte 1 - Trilha Fundamental

Sequência recomendada

Esta é uma sequência pensada para que um iniciante não desista dos estudos, e que de alguma forma o estudante descubra se tem mais habilidades voltadas para o frontend ou para o backend. É claro, existem mais áreas e carreiras além destas, mas você será muito mais feliz se conseguir decidir inicialmente entre um desses dois caminhos. E mais importante, você só vai descobrir se gosta ou não, depois de fazer algo prático nestas duas áreas. A ideia geral aqui é começar mais pela parte visual e as tecnologias que estão presentes na web do lado do navegador e depois entender um pouco mais a comunicação com o lado do servidor.

• HTML: Começar com a linguagem de marcação HTML pode ser muito bom para quem nunca teve contato com código, outro motivo é que mesmo que depois de um tempo você se descubra que gosta do "backend" e não do "frontend", entender a base desta tecnologia é fundamental no contexto WEB. E ao contrário de começar com uma linguagem de programação, onde muitas vezes temos que aprender diversos conceitos sem criar algo concreto, com HTML & CSS em pouco tempo estamos criando e vendo o resultado de páginas web de verdade.

• Aprender a aprender: Entender um pouco de alguns conceitos sobre como aprender, vai te ajudar a reter mais conhecimento. Por exemplo, se você apenas lê ou assiste vídeos, provavelmente vai aprender muito menos do que se tivesse pausado o vídeo, digitado o código para ver ele rodando na sua máquina.

• CSS Básico: WIP

• Intro Layout: WIP

• Internet: WIP

• Terminal & Linha de comando: WIP

• Arquivo & Pastas: WIP

• Controle de versão de código (Git): WIP

• Plataforma para Devs (Github): WIP

• Publicar página web estática (deploy): WIP

• Sintaxe no JavaScript: Entender a sintaxe

• Lógica de programação com JS: WIP

💡 DICAS

• Tenha um mentor, ache alguém mais experiente e pegue o máximo de dicas que conseguir
• Aprender envolve fazer algo concreto com o que estudou, faça resumo, digite o código
• Faça um planejamento de estudo, bloco de tempos dedicado para cada assunto
• Peça ajuda e ajude os outros
• Pratique
• Faça um portfólio

🏢 Fundamentos

• Aprender a aprender

  • Defina um objetivo claro
  • Defina sua Agenda
  • Caminhada das Imagens (Picture Walk)
  • Modo Focado versus Difuso
  • Como evitar a procrastinação
  • Aprendendo enquanto você dorme
  • O Conhecimento entra pelos dedos
  • O poder das comunidades

• HTML

  • Introdução ao HTML
  • Ferramentas necessárias
  • Olá mundo com HTML
  • Visão geral das TAGs do HTML
  • As principais TAGS do HTML
  • 🏆 Entendendo marcações HTML na prática
  • Tags e seus atributos
  • Estrutura, DOM e a anatomia de uma página HTML
  • Formulários e campos para obter dados

• CSS Básico

  • Motivações para entender CSS
  • O que é Cascading Style Sheets (CSS)
  • 🏆 CSS na prática
  • 🏆 Estilo inline, Tag Style e arquivos externos
  • Aprendendo CSS criando uma página web
  • Estilo em textos
  • 🏆 Estilo no título #3.1
  • 🚀 Dica DEV #1 - Editor de código
  • Introdução aos seletores CSS
  • Tipos de seletores
  • Especificidade de seletores CSS
  • Visão geral dos seletores CSS
  • Cascata nos seletores nem sempre funcionam
  • 🏆 Mais estilo nos textos #3.2
  • 🚀 Dica DEV #2 - Codepen
  • 🏆 Formatando links e botões #3.3
  • 🚀 Dica DEV #3 - Chrome Dev Tools
  • 🏆 Alinhar textos e espaçamentos #3.4
  • Entendendo a unidade px (pixels)
  • 🏆 Tamanho e posicionar imagem #3.5
  • Depuração no CSS (debugging)
  • Entendendo a tag
  • 🏆 Estilo de lista e cor de fundo #3.6
  • Entendendo cores no CSS
  • 🏆 Estilo da barra de progresso #3.7
  • 🏆 Formatar o rodapé #3.8
  • 🏆 Importar fonte web #3.9
  • Entendendo o reset.css
  • Propriedade abreviada (shorthand wheel)

• Intro Layout CSS

  • Normal flow
  • Box-model
  • Containers com divs
  • 20% do flexbox para resolver 80% dos seus problemas

• Internet

  • Como funcionam as páginas web
  • URL ou Link: você sempre usa, mas não prestou atenção
  • Domínio, IP e Domain Server Name (DNS)
  • Página web estática

• Terminal & Comandos

  • Por que um terminal Linux?
  • Por que a linha de comando?
  • Navegação entre pastas
  • Operador de piping
  • Saída padrão (stdout) e saída de erro (stderr)
  • Vim vs Nano
  • Alias e Links
  • Permissões de arquivos
  • Criação de chaves
  • Processos
  • Atalhos de teclado

• Arquivo & Pastas

  • Organização de pastas & arquivos
  • Estrutura de pastas e arquivos
  • Navegando em pastas
  • Organizando projetos

• Controle de versão de código (Git)

  • Viagem no tempo e intro ao controle de versão de código
  • Iniciando com Git
  • Transformando uma pasta em um repositório de versões
  • Gerando commit (foto do estado atual)
  • Navegando entre versões
  • Git Stages

• Plataforma Dev (GitHub)

  • Criar conta no Github
  • Chave SSH para acesso completo
  • Criando meu primeiro repositório
  • Sincronizando código local com repositório do GitHub
  • Conectando novo repositório com pasta existente

• Deploy página web estática

  • Github Pages

• Sintaxe do JS

  • Sintaxe vs Lógica de programação
  • Onde rodar código JS?
  • Comentários de código
  • 🚀 Dica DEV: Como utilizar o interpretador NodeJS
  • Sintaxe e caracteres
  • Case sensitivity
  • Tipos de dados (Data Types)
  • 🏆 Crie uma variável z que é a soma de x + y
  • Declaração e atribuição de variáveis
  • 🏆 crie uma variável nomeDoCarro e atribua o valor "Volvo”
  • Escopos (var, let e const)
  • Palavras reservadas
  • Operadores aritméticos + - / * % ** e Math.floor
  • Operadores ++x e x++
  • 🏆 Qual uma alternativa para atribuir x = x * y?
  • 🏆 Como atribuir um número aleatório na variável r?
  • Tipo String e suas operações
  • 🏆 Crie uma variável com o tamanho de let texto = "Olá Mundo"
  • 🏆 Converta a variável texto para maiúsculo
  • String como Array (bracket notation)
  • Conversão de Tipos (casting)
  • Desvios condicionais (if, if else, else)
  • Operador de igualdade == e === (equality & strict equality)
  • Operador de desigualdade != e !==
  • Operações lógicas e tabela verdade
  • 🏆 Imprima true quando x = 10 for maior que y = 5
  • 🏆 Corrigir o condicional
  • Repetições (for, for in, for of e forEach)
  • 🏆 Desafios D12, D13 e D14
  • Repetições (break e continue)
  • Repetições (while, do while)
  • 🏆 Desafios D15 e D16

• Lógica de programação com JS

  • 🏆 Desafios Lista 1 e Lista 2

• Uma pouco mais de JS

  • Iniciando com funções (functions) no JS
  • Parâmetros, Return e argumentos
  • Escopo
  • Funções anônimas e funções flechas (arrow functions)
  • Primeiros passos com Objetos no JS
  • Módulos, import e export

TRILHA FRONTEND - Tabela de Conteúdo

• Mobile first

  • Entender o conceito de responsividade
  • Media Queries

• Web Feliz

  • 🏆 Criar um portfólio usando web templates
  • Web templates
  • Criando páginas com markdown (Vuepress ou HUGO)
  • Visão geral de frameworks CSS
  • Bootstrap & Biblioteca de componentes

• Ferramentas & Boas práticas

  • npm
  • package.json
  • Linter, code & style

• JS & Páginas Web

  • Entendendo o DOM
  • Adicionando JS na página
  • Entendendo o document.write
  • Entendendo o createElement, createTextNode e appendChild
  • Entendendo o seletores de elementos (querySelector)
  • Entendendo o textContent, innerHTML, setAttribute e classList
  • Entendendo eventos com addEventListener
  • Entender o Callback
  • Entender Promise
  • Entender uma chamada a uma API para atualizar a página
  • 🏆 Obter a quantidade de estrelas de um repositório do github
  • 🏆 Obter a lista de pokemons
  • Entender uma imitação do backend com API Mock
  • Entender Client-side vs Server-side
  • Dados com JSON (JavaScript Object Notation)
  • 🏆 Um CRUD de tarefas 100% JS
  • Fetch API

• Mais conceitos CSS

  • Regras do @import
  • Mais seletores
  • Mais CSS units
  • Webpack para empacotamento
  • SASS para pré processamento de CSS

• Mais Layout CSS

  • Position & Float
  • Aspect-ratio
  • box-sizing

• Framework JS com VueJS

  • Quais problemas um framework JS resolve?
    • Visualização, Dados, Eventos
    • Estrutura e organização, utilizar JS moderno, web componentes
  • Olá mundo VueJS e entendendo o v-bind
  • v-if para exibição condicional
  • v-for para renderizar listas
  • v-on para executar código com eventos
  • :class & :style
  • propriedades computadas (computed)
  • v-model e atribuição dupla de valores (two ways data binding)
  • Mais formas de uso do v-model
  • Criando um toast para melhor UI
  • Primeiro componente com VueJS
  • Transformando tudo em componentes (vue loader)

• Frontend no mundo real

  • Criando projetos utilizando o npm create
  • Processo de criação (build)
  • Variáveis de ambiente
  • Estrutura e organização
  • Biblioteca de componentes
  • Tratamento de erros: try/catch/finally
  • HTTP Headers & Cookies
  • [Async/await]
  • Rest API
  • NVM

• Deploy de projetos reais na Vercel

• EXTRA: JS

  • Escopos Global e local
  • Entender a chave this
  • Escopo de block e hoisting
  • Closures
  • Template literals e Multi-line strings
  • Spread syntax
  • Destructuring assignment
  • Geolocation API
  • localStorage e sessionStorage
  • Básico de programação orientada à objetos
  • Prototypes e herança (inheritance)
  • Classes, polimorfismo e encapsulamento
  • Programação funcional
  • Funções puras
  • Funções de alta ordem
  • Imutabilidade
  • Modulos do ES6
  • Delegação e propagação de eventos
  • Type Coercion
  • Strict Mode
  • call, apply & bind
  • Memoization

📚 Livros JS

• 🇧🇷 Eloquent Javascript - FREE
• 🇧🇷 JavaScript - O guia definitivo, David Flanagan
• 🇧🇷 JavaScript - Guia do Programador, Maurício Samy Silva
• 🇧🇷 Vue.js - Construa aplicações incríveis, Caio Incau
• 🇺🇸 JavaScript Succinctly - FREE
• 🇺🇸 JavaScript: The Good Parts

‍🎓 Cursos JS & Tutoriais

• Apostila Caelum Pula a parte html e vai para o Javascript
• Freecodecamp - JS Algorithms and Data Structures
• Sololearn - JavaScript
• Grasshopper JS para iniciantes, dá para mudar para pt-br
• Tony Lâmpada - JS do básico ao avançado Pula a parte de Angular
• Javascript.info
• Codecademy - Learn JavaScript
• Udemy - Javascript Essentials

‍🎓 Docs JS

• Mdn Docs
• DevDocs.io
• W3 Schools
• Geeksforgeek

‍🎓 Cursos VueJS

• Tony Lâmpada - VueJS Basicão
• Vue Mastery
• Vue Mastery - releitura em pt-br

▶️ Canais no Youtube

• Guanabara
• Rodrigo Branas
• Filipe Deschamps
• CodeWithHarry
• Programming with Mosh
• Traversy Media

🏆 Praticar & Lógica de programação com JS

• Hackerrank
• Codewars
• Exercism
• JavaScript30
• JSchallenger
• Javascript-exercises GH
• 10 ideas for your Projects e este outro aqui

🛠️ Ferramentas e outros mapas de estudo

• JavaScript Visualizer 9000
• Algorithm Visualizer
• Trilha.Info/front
• Roadmap.sh

🏟️ Outros conteúdos úteis

• Every-some-find-includes
• LearnVue