Guia de 21 dias
Não tudo. Mas o suficiente pra colocar um projeto teu rodando no navegador. JS roda no front, no back com Node e até em app mobile.
Para quem está começando do zero. Um dia por vez, na ordem. Cada dia tem uma tarefa e um vídeo.
Constância vence intensidade. Se perder um dia, continue de onde parou. Não tente compensar fazendo dois.
Semana 1 · dias 1 a 7
let/const, tipos, if, arrays, loops e funções, incluindo arrow function.
Sem essa base, todo framework parece mágica.
Abra o console com F12 e use console.log para imprimir seu nome, sua idade e uma conta. Depois crie um index.html com uma tag script e veja a mesma saída no console.
Como usar o CONSOLE no navegador? | Conteúdo extra das aulas de Javascript! (Rafaella Ballerini)
Assistir ↗
Declare 5 variáveis com let e const e tente reatribuir uma const de propósito. Leia o erro que aparece no console e anote o que ele diz.
Var, Let, Const - Tudo o que você precisa saber (Programador BR)
Assistir ↗
Crie uma variável de cada tipo (string, number, boolean, null, undefined) e use typeof em cada uma. Some uma string com um número e explique para você mesmo o resultado.
Variáveis e Tipos Primitivos - Curso JavaScript #05 (Curso em Vídeo)
Assistir ↗
Escreva um código que recebe uma idade e mostra no console se a pessoa é menor de idade, adulta ou idosa. Teste com pelo menos 4 valores diferentes.
Condições (Parte 1) - Curso JavaScript #11 (Curso em Vídeo)
Assistir ↗
Crie um array com 5 filmes que você gosta. Adicione um com push, remova outro com pop, mostre o tamanho com length e pegue o primeiro e o último item.
Variáveis Compostas - Curso JavaScript #15 (Curso em Vídeo)
Assistir ↗
Use um for para imprimir a tabuada do 7 e um for...of para mostrar cada filme do array de ontem. Depois faça um while que conta de 10 até 0.
Repetições (Parte 1) - Curso JavaScript #13 (Curso em Vídeo)
Assistir ↗
Escreva uma função que calcula a média de 3 notas e retorna aprovado ou reprovado. Depois reescreva a mesma função como arrow function e compare as duas.
Arrow Function em Javascript. Aprenda o que é e como usar! - Curso de Javascript Moderno - Aula 25 (CFBCursos)
Assistir ↗
Semana 2 · dias 8 a 14
Objetos, map/filter/reduce, DOM e eventos.
Clique, evento, o site muda. Aqui o JS deixa de ser teoria.
Crie um objeto pessoa com nome, idade e uma lista de hobbies. Acesse cada propriedade, mude a idade e adicione uma propriedade nova.
Curso JavaScript #10 - Tipos de dados Objeto (Matheus Battisti - Hora de Codar)
Assistir ↗
Monte um array com 4 objetos de produtos (nome, preço, categoria). Use JSON.stringify para ver o texto e JSON.parse para voltar ao objeto.
Aprenda JSON em 20 minutos (Matheus Battisti - Hora de Codar)
Assistir ↗
Com o array de produtos, use map para listar só os nomes, filter para pegar os que custam menos de 50 e reduce para somar o total.
Curso de JavaScript #04 - Map, Filter & Reduce (Felipe Rocha • Full Stack Club)
Assistir ↗
Pratique find, some, every e forEach no mesmo array de produtos. Refaça o reduce de ontem sem olhar o código.
10 MÉTODOS DE ARRAY QUE TODO DESENVOLVEDOR PRECISA CONHECER (Matheus Battisti - Hora de Codar)
Assistir ↗
Crie uma página com um título e um parágrafo. Pelo console, selecione os dois com querySelector e troque o texto e a cor de cada um.
Introdução ao DOM - Curso JavaScript #09 (Curso em Vídeo)
Assistir ↗
Use createElement e appendChild para gerar uma lista ul a partir do array de filmes do dia 5. Cada filme vira um li na tela.
Curso JavaScript #40 - Inserindo elementos (appendChild e insertBefore) (Matheus Battisti - Hora de Codar)
Assistir ↗
Faça um input e um botão. Ao clicar, o texto digitado vira um item novo na lista, e o input fica vazio de novo.
Eventos DOM - Curso JavaScript #10 (Curso em Vídeo)
Assistir ↗
Semana 3 · dias 15 a 21
Promises, async/await, fetch numa API, localStorage e um projeto final no navegador.
É aqui que nasce teu primeiro projeto de portfólio.
Crie uma Promise que resolve depois de 2 segundos com setTimeout e use then e catch. Faça uma versão que rejeita e leia o erro no console.
Desvendando DEFINITIVAMENTE as Promises em JavaScript // Mão no Código #21 (Código Fonte TV)
Assistir ↗
Reescreva a Promise de ontem usando uma função async com await. Coloque try/catch para tratar o caso de erro.
Async / Await SIMPLES e DESCOMPLICADO no JavaScript // Mão no Código #22 (Código Fonte TV)
Assistir ↗
Use fetch para buscar dados de https://pokeapi.co/api/v2/pokemon/pikachu e mostre o nome e o peso no console. Abra a aba Network e veja a requisição.
Aprendendo sobre FETCH para consumo de APIs em Javascript #P1 - Curso de Javascript - Aula 122 (CFBCursos)
Assistir ↗
Crie um input onde você digita o nome de um pokémon e, ao clicar em buscar, a página mostra nome, imagem e tipo. Mostre uma mensagem se o nome não existir.
APRENDA FETCH API DE JAVASCRIPT COM PROJETO (Matheus Battisti - Hora de Codar)
Assistir ↗
Salve seu nome no localStorage com setItem, recarregue a página e leia de volta com getItem. Depois apague com removeItem e confira na aba Application.
WebStorage, localStorage e SessionStorage em Javascript - Curso de Javascript - Aula 121 (CFBCursos)
Assistir ↗
Pegue a lista de tarefas do dia 14 e faça ela sobreviver ao recarregar a página. Use JSON.stringify para salvar e JSON.parse para ler.
Aprenda tudo sobre localStorage e sessionStorage de JavaScript (Matheus Battisti - Hora de Codar)
Assistir ↗
Junte tudo numa Pokédex: busca pela PokeAPI, card com nome, imagem e tipo, e botão de favoritar. Os favoritos ficam salvos no localStorage e aparecem numa lista ao abrir a página.
Como criar uma Pokedex com HTML, CSS e JavaScript | Projeto Completo #javascript #html #css (Manual do Dev)
Assistir ↗
Projeto final
Você vai construir uma Pokédex com favoritos que roda no navegador. A página busca um pokémon na PokeAPI com fetch e async/await, mostra o card na tela e deixa você favoritar. Os favoritos ficam salvos no localStorage, então continuam lá quando você fecha e abre o navegador.
Coloca um README dizendo o que o projeto faz e como rodar. É a primeira coisa que o recrutador abre.
Próximos guias
Mais conteúdo sobre carreira dev no Instagram: @lucasadvice ↗
