Front-end: o que é, mercado e como começar

Palestra apresentada na Jornada Acadêmica de Tecnologia no campus Sorocaba no dia 28/09/2017.

Transcript

1. Front-end: o que é, mercado e
   como começar
   Amanda Vilela
   UNIP
   

   View Slide

2. Amanda Vilela
   

   View Slide

3. O que é front-end?
   

   View Slide

4. “O front-end é responsável por coletar a entrada
   do usuário em várias formas e processá-la para
   adequá-la a uma especificação em que o back-end
   possa utilizar.”
   https://pt.wikipedia.org/wiki/Front-end_e_back-end
   

   View Slide

5. O que faz um desenvolvedor
   front-end?
   

   View Slide

6. projetar, construir e otimizar
   

   View Slide

7. sites e aplicações web
   

   View Slide

8. Como é a demanda do mercado?
   

   View Slide

9. View Slide

10. View Slide

11. Quero ser um desenvolvedor(a)
    front-end.
    Como faz?
    

    View Slide

12. View Slide

13. HTML & CSS
    Conteúdo & estilização
    

    View Slide

14. Semântica
    Organização e Significado
    

    View Slide

15. Convenções de nomenclatura CSS
    

    View Slide

16. Grid Systems e Responsividade
    

    View Slide

17. Faça sua própria página ;)
    

    View Slide

18. Mostre seu código para o mundo
    

    View Slide

19. Github Pages
    

    View Slide

20. Crie uma conta no CodePen
    

    View Slide

21. Pratique ;D
    

    View Slide

22. View Slide

23. Pré-processadores CSS
    

    View Slide

24. JS
    JavaScript não é Java :P
    

    View Slide

25. JavaScript Guide
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
    

    View Slide

26. DOM
    A árvore de elementos do HTML.
    

    View Slide

27. Assíncrono
    

    View Slide

28. Não se esqueça de mostrar seu
    código para o mundo ;)
    

    View Slide

29. Design Patterns
    

    View Slide

30. Algum framework JS
    

    View Slide

31. Architectural Patterns
    

    View Slide

32. automatizar tarefas (gulp/grunt)
    

    View Slide

33. noções de UX/UI
    

    View Slide

34. algum software de edição de imagem
    

    View Slide

35. inglês
    

    View Slide

36. View Slide

37. Mantenha-se atualizado(a)
    

    View Slide

38. https://css-tricks.com
    https://www.smashingmagazine.com
    https://web-design-weekly.com
    

    View Slide

39. Comunidades <3
    

    View Slide

40. View Slide

41. View Slide

42. facebook.com/sorocabacss
    dá um like ai ;)
    

    View Slide

43. python sorocaba - https://grupopythonsorocaba.herokuapp.com/
    guru sorocaba - https://www.facebook.com/GURUSorocaba/
    hacklab - https://www.facebook.com/hacklabsorocaba/
    GDG Sorocaba - https://www.facebook.com/GDGSorocaba/
    SorocabaJS - https://www.facebook.com/sorocabajs/
    JS Meetup - http://www.meetup.com/GDG-Sorocaba/
    WomenTechmakers - https://www.facebook.com/groups/wtmsorocaba/
    in.tegra.do - http://www.meetup.com/In-Tegra-Do/
    english meetup - http://www.meetup.com/Sorocaba-English-Conversation-Happy-Hours/
    SorocabaCSS - https://www.meetup.com/pt-BR/SorocabaCSS
    

    View Slide

44. https://www.meetup.com/
    

    View Slide

45. View Slide

46. https://goo.gl/WxcNrQ
    

    View Slide

47. Obrigada :D
    amandavilela.com
    

    View Slide

48. https://www.codecademy.com/pt-BR/tracks/web
    https://www.codeschool.com/
    http://pt-br.learnlayout.com/
    https://try.github.io
    https://www.codecademy.com/pt-BR/tracks/javascript
    

    View Slide