Carreira Front-end - Agregando valor através de Interfaces

O que é Front-end e como se tornar um.

Transcript

1. André Felizardo
2. Carreira Front-End Agregando valor através de Interfaces 23 de Setembro, 2017
3. Agenda 1. Introdução 2. O que é Front-end 3. Base Front-end 4. Tipos de Front-end 5. Principais tecnologias do momento 6. Por onde começar 7. Conclusão
4. Introdução
5. André Felizardo Engenheiro Front-end | Huge Rio 4 anos de experiência Front-end, Agile, Treinamentos /andreluis.felizardo /in/andreluisfelizardo andrefelizardo.com.br
7. Nós criamos experiências que transformam marcas, desenvolvem negócios e melhoram a vida das pessoas.
8. O que é Front-end
10. Back-end
11. Front-End
12. Base Front-end
13. Base Front-end •HTML(5)+ •CSS(3)+ •Javascript • Editor de Imagens(Photoshop, Gimp, Sketch)
14. HTML • HyperText Markup Language • <p></p> • <a href=“www.google.com”>Google</a> • Versão atual do HTML
15. HTML
16. CSS • Cascading Style Sheets • body { color: white; } • Versão atual do CSS
17. HTML
18. HTML + CSS
20. Javascript • Linguagem de programação interpretada • Cresceu junto com o Chrome e os processadores • Também é usada no Back-end (Node.js) • Também é usada em ambientes desktop (Electron) • Versão atual do ECMAScript
21. HTML
22. Tipos de Frontend
23. Principais Tecnologias do momento
24. #Hype
26. Bootstrap • Framework Front-end • Facilita criar sites responsivos sem escrever CSS • Foi criado por desenvolvedores para agilizar a criação de sistemas
28. Sass • Pré-processador de CSS • Facilita reutilização de código • Focado na produtividade • Bootstrap 4 o utiliza
30. Gulp • Automatizador de tarefas Front-end • Facilita um workflow profissional • Fácil de usar. Eficiente. Qualidade. Fácil de aprender
32. Angular (4.4.1) • Framework Javascript • Objetivo de facilitar a construção de aplicações que podem ser reutilizadas para aplicativos mobile, web e até desktop • Talvez o mais famoso para quem não é Front-end
34. React.js • Framework Javascript • Desenvolvida por engenheiros do Facebook • Desenvolvimento orientado a componente • As grandes empresas estão usando
36. Vue.js • Framework Javascript • Também é orientado a componentes • Grande diferencial é a simplicidade
37. Por onde começar?
38. Caminho das pedras • Aprenda a base (HTML, CSS e JS) • Aprenda versionamento Git/Github • Saiba o básico dos editores de imagens • Inglês
39. Técnica Relacionamento Ética
40. Perguntas?
41. /andreluis.felizardo /in/andreluisfelizardo andrefelizardo.com.br