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

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

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.

Amanda Vilela

September 28, 2017
Tweet

More Decks by Amanda Vilela

Other Decks in Programming

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