Jornada do iniciante frontend

Esse foi o meu primeiro post que bombou no instagram, eu nem tinha muitos seguidores na época, mas até hoje 1 ano depois esse post ainda é um dos mais "bem sucedidos" do meu perfil. 

Isso mostra que as pessoas se sentem perdidas e não sabem o que fazer e por onde começar na programação. Por isso, hoje eu vou complementar esse post trazendo ideias de projetos, os cursos que eu recomendo, pra que isso seja realmente um road-map pra quem está começando no frontend.

HTML E CSS

Esse é o primeiro passo pra aprender desenvolvimento web. Html (estrutura) e CSS (estilização).

O que eu preciso saber:

• Html semântico: entender quando usar cada tag para melhorar o SEO
• Css (display, position, flexbox, grid)

Tutoriais:

• Tutorial Site responsivo (Youtube DesignCourse)
• Tutorial site de viagens (Youtube Papodedev)
• CSS Flexbox vs Grid quando usar cada (youtube Origamid)
• Documentação CSS Grid layout (Origamid)
• Tutorial carousel só com CSS (youtube RocketSeat)
• Tutorial responsividade CSS (youtube RocketSeat)
• Vídeo sobre CSS position (youtube girlCoding)

Cursos:

• Curso em vídeo: html, css, git e js (grátis)
• RocketSeat: Discover (grátis)
• Cod3r: Web completo (pago)
• Origamid: Js, grid, flexbox, sass, vue, react (pago)

Como praticar:

• Criando sites para empresas: ideia de layout
•  Criando um site pessoal para mostrar seus projetos, currículo, etc.. : exemplo
• Usar sites como o codepen para praticar alguns conhecimentos: login netflix, card de ecommerce
• Recriar layouts do site frontendmentor

JAVASCRIPT

Aqui a coisa começa a complicar. Porque até agora HTML e CSS não são linguagens de programação, então elas não envolvem lógica, que é onde as pessoas tem mais dificuldade ao começar. Mas sem desespero!

O Js é o que vai adicionar funcionalidades ao seu site/sistema web.

O que é importante aprender:

• Aprender o básico de JS (funções, variáveis, objetos, strings)
• Objetos (assign, keys, values)
• Manipular arrays (map, forEach, filter, find, some, every, findIndex, includes, join, pop, push, sort, shift, slice, )
• String (includes, slice, concat, replace, split, trim)
• Requisições (axios) e métodos HTTP
• Manipular a dom (getElementById, getElementByClassName, querySelector)
• Não precisa aprender Jquery

Tutoriais:

• Tutorial slider com JS (Papodedev) / Código no codepen
• Tutorial progress bar (papodedev) / Código no codepen
• Tutorial requisições usando axios (youtube Papodedev) 
• Consumindo API (youtube RocketSeat)
• O que é API, REST e RESTFUL? (youtube RocketSeat)
• Calculadora com Js

Cursos:

• 10 dias de js: HackerRank.
• Js6: Origamid. ⭐️⭐️⭐️⭐️⭐️
• Javascript: Curso em vídeo.
• Web Completo: Coder
• Js funcional e reativo: Cod3r (um pouco mais avançado) ⭐️⭐️⭐️⭐️⭐️

Como praticar:

• Certificação HackerRank (só pode fazer uma vez então só faça quando estiver seguro)
• Comece criando pequenas funcionalidades nos projetos que você já fez. Como por exemplo: funções em botões, sliders para os seus sites, formulários de contato.
• Crie uma lista de tarefas. Adicione novas tarefas, marque as já concluídas, delete tarefas.
• Faça um contador ou um pomodoro. Dica pesquise por setInterval e setTimeOut.
• Comece a fazer requisições para API's públicas 

Projetos para se inspirar:

• Luke Morales - Banco Inter
• Matheus Pires - Pokemon

FRAMEWORK

Nesse ponto você já deve ter uma base boa de javascript e você vai começar a aprender a usar um framework. Hoje em dias existem 3 mais famosos: Vue, React e Angular.

Qual eu escolho? Tanto faz. Todos eles são muito usados, nenhum sofre o risco de ser descontinuado. O mais usado hoje em dia é o React. Eu comecei com Angular e depois fui pro Vue. Não se apegue em framework, inevitavelmente um dia você pode ter que mudar, por isso que é importante saber o JS que é a base de todos.

Como eu trabalho com Vue, vou deixar as dicas de cursos e tutoriais de Vue.

Dica:

Se você está começando recomendo o codesandbox. Lá você consegue criar um projeto usando qualquer framework (estilo codepen).

O que você precisa saber:

• Lifecycle
• Data, Props, Computed, Methods, Watch
• Vuex
• Vue Router
• Comunicação entre componentes

Tutoriais:

• Todo list em 15 min  (youtube)
• Curso de vue (youtube)
• Componente tabs com Vue (pingback papodedev)
• Vue + Firebase tutorial (medium)
• Vue Router (medium)
• Gerenciando estados com Vuex (youtube)
• Component communication (props/events) (youtube)

Cursos:

• Origamid
• Cod3r
• Alura

Coloquei só esses 3 porque são os que eu conheço e recomendo.

Como praticar:

• App clima fazendo solicitações para apis externas
• Clone de algo já existente (tutorial spotify)
• Algo que você goste (gerenciar finanças, menu restaurante, etc..)
• Dashboards
• E-commerce (layout)

Começo de uma jornada..

Depois de ter estudado quase tudo disso, você vai estar apto a ser um frontend júnior! É bastante coisa né? Eu sei, por isso é muito importante que você pratique bastante e se desafie. 

Qualquer dúvida podem me chamar lá pelo insta @papodedev!