Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Zero to Hero - Como se Tornar um Desenvolvedor Web Moderno

Zero to Hero - Como se Tornar um Desenvolvedor Web Moderno

11d2474c8637940299cecf8661a46687?s=128

Matheus Calegaro

October 16, 2018
Tweet

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!