Zero to Hero - Como se Tornar um Desenvolvedor Web Moderno

Transcript

1. None

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
32. None
33. None
34. None
35. None

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!