Zero to Hero - Como se Tornar um Desenvolvedor Web Moderno

Transcript

2. Matheus Calegaro Alô mundo, me chamo matheus.me github.com/mathcale linkedin.com/in/mathcale Dev Web, futuro Data Scientist
3. O que eu já fiz japassou.com
4. O que eu já fiz brosbeer.com.br
5. O que eu já fiz chuvatec.com.br
6. O que eu já fiz rionovorock.com.br
7. Como era “antigamente” • Tendência de criar Monolitos; • O programador back-end também tinha que lidar diretamente com HTML e CSS; • Manutenção difícil; • Apenas no browser; • APIs? Só XML e String; • Flash;
8. O que mudou? • Separação dos “-ends” • Front-end: HTML, CSS e Javascript • Back-end: Literalmente qualquer coisa que rode em um servidor • Times de desenvolvimento separados; • Tecnologias de front-end são utilizadas no mobile e desktop; • RESTful & JSON pra todo lado; • Frameworks! • R.I.P. Flash;
9. Tecnologias Web Desenvolver para a Web ≠
10. VS Code
11. Spotify
12. League of Legends
13. Não só desktop! Skype Instagram Untappd + 1 B downloads* + 1 B downloads* + 1 M downloads* * Downloads feitos na plataforma Google Play Store
14. O Mercado Nos últimos 12 meses Fonte: Love Mondays Júnior
15. O Mercado Nos últimos 12 meses Fonte: Love Mondays Pleno
16. O Mercado Nos últimos 12 meses Fonte: Love Mondays Sênior
17. O Mercado Fonte: StackOverflow Developer Survey 2018
18. O Mercado Fonte: GitHub Octoverse 2017
19. Então, por onde começo?
20. Conhecimentos Gerais Front-end Back-end
21. Conhecimentos Gerais Front-end Back-end
22. Inglês Conhecimentos Gerais Recomendações: https://pt.duolingo.com/ https://www.myenglishonline.com.br/ Leitura de documentações e tutoriais, escrita de código e comunicação https://www.ted.com/
23. HTTP Conhecimentos Gerais Recomendações: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Overview Básico do protocolo, requisição e resposta, cabeçalhos, códigos de mensagens
24. Terminal e Linha de Comando UNIX Conhecimentos Gerais Recomendações: Instale o Linux Mint ou Ubuntu em uma máquina virtual Navegação entre diretórios, manipular arquivos (criar, copiar, mover, apagar)
25. Git Conhecimentos Gerais Recomendações: https://git-scm.com/book/pt-br/v1 Adicionar/remover arquivos da árvore, criar ramificações, resolver conflitos
26. Algoritmos Conhecimentos Gerais Recomendações: https://www.hackerrank.com/ Raciocínio lógico, estruturas condicionais, repetição e controle, funções e rotinas
27. Servidores Conhecimentos Gerais Recomendações: Heroku, Digital Ocean ($100/60 dias), AWS (1 ano), Netlify (sites estáticos) FTP, SSH, VPS, PaaS, Iaas, Cloud
28. Testes Conhecimentos Gerais Recomendações: PHPUnit, Mocha, Jest, Lighthouse, WebPageTest Unitários, Integração, Usabilidade, Performance, Segurança
29. Conhecimentos Gerais Front-end Back-end
30. HTML Front-end Recomendações: https://pt.khanacademy.org/computing/computer-programming/html-css/intro-to- html/pt/html-basics • Começe com: • Texto: <h*>, <p>, <span> • Imagens: <img>, <figure> • Formatação: <b>, <u>, <i>, <s> • Depois: • Listas: <ul>, <ol>, <li> • Tabelas: <table>, <tr>, <td> • Formulários: <form>, <input>, <label> • Organização: <div> • Importante: • Semântica: <header>, <section>, <footer>
31. CSS Front-end Recomendações: https://www.w3schools.com/css/default.asp • Começe com: • background-color e color • font-size, font-weight, text-align • font-family • border • Depois: • box-model e posicionamento • float • media queries • Mais pra frente: • flexbox • grid • variáveis
36. codepen.io/mathcale
37. Javascript Front-end Recomendações: https://rocketseat.com.br/starter/curso-gratuito-javascript • Começe com: • Básico de programação • Console do navegador • alert, confirm, prompt • Depois: • Manipular o DOM • Funções • Escopo • Arrays e Objetos • Mais pra frente: • Hoisting • Prototype • Requisições AJAX (fetch e Axios) • Novidades do ES6 • Um pouco de programação funcional
38. Tooling & Frameworks Front-end Recomendações: Documentação de cada ferramenta • Começe com: • Sass • Gulp • NPM/Yarn • Bootstrap, Bulma ou Materialize • Depois: • ESLint • Vue (@vue/cli) • React (create-react-app) • Webpack • Babel • Mais pra frente: • React Native • Vuex • Redux
39. Conhecimentos Gerais Front-end Back-end
40. NodeJS Back-end Recomendações: https://rocketseat.com.br/starter/curso-gratuito-nodejs • Começe com: • http e fs • Módulos CommonJS • Express • Depois: • Middlewares • MVC • Conexão com D.B. • Mais pra frente: • AdonisJS • Sockets e Real-Time • Server-side Rendering
41. PHP Back-end Recomendações: https://www.udemy.com/curso-php-7-online/ • Começe com: • Básico de programação • Orientação a Objetos • Depois: • Conexão com D.B. (PDO) • CRUD • Autoload • Mais pra frente: • Composer • Laravel
42. MySQL Back-end Recomendações: https://www.cursoemvideo.com/course/curso-banco-dados-mysql/ • Começe com: • Linha de Comando • SELECT, INSERT, UPDATE, DELETE, TRUNCATE, CREATE DATABASE, CREATE TABLE • Depois: • Relacionamentos • Mais pra frente: • Views • Triggers
43. MongoDB Back-end Recomendações: https://www.tutorialspoint.com/mongodb/ • Começe com: • NoSQL Document-based • Primeiro contato via linha de comando • CRUD (createOne, insertOne, find, updateOne, deleteOne) • Depois: • Projeção • Índices • Relacionamentos
44. Praticar! Conhecimentos Gerais Recomendações: Faça uma agenda diária e a coloque em lugares estratégicos Dedique pelo menos 1h por dia, invista em material Técnica Pomodoro
45. Dicas de Projetos Controle de Estoque Lista de Compras Blog Pessoal Currículo Digital Galeria de Fotos Busca de Filmes Pokédex Consulta de CEP Job Listing Lista de Tarefas Bazar/Desapega Controle de Finanças
46. Lugares para aprender e compartilhar Medium dev.to scotch.io Udemy School of Net Codecademy Udacity Alura Rocketseat Wes Bos
47. Onde procurar jobs LinkedIn Revelo Love Mondays Indeed
48. Obrigado! Agora você é um hero!