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

Berkarir Sebagai Frontend Developer

Berkarir Sebagai Frontend Developer

PHPID Online Learning #12

Randy Vianda Putra

April 28, 2020
Tweet

More Decks by Randy Vianda Putra

Other Decks in Programming

Transcript

  1. Berkarir Sebagai
    Frontend Developer
    PHPID Online Learning #12

    View full-size slide

  2. Randy Vianda Putra, live in Bandung
    -Lead Frontend Engineer @WorkLifeBeyond
    -Instructor @SekolahFrontend
    Hello
    [email protected]
    github.com/randyviandaputra
    @randyvp

    View full-size slide

  3. Let’s Start

    View full-size slide

  4. 1. Kesalahpahaman mengenai kompleksitas Frontend Developer
    2. Mengetahui apa itu Frontend Developer.
    3. Mengetahui masalah apa saja yang dihadapi Frontend Developer.
    4. Gambaran dan Karir seorang Frontend Developer.
    5. Bagaimana menjadi Frontend Developer yang baik
    6. Bagaimana memulainya ?

    View full-size slide

  5. Apa kesalahpahaman
    mengenai Frontend
    Developer
    ?

    View full-size slide

  6. - Harus jago photoshop, adobe xd, sketch, .… Paint
    - Mengganggap HTML, CSS itu mudah
    - Mengganggap ngerubah wording itu mudah. bener ?
    - Mengganggap memindahkan sesuatu dari A ke B mudah
    - Mengganggap itu mah tinggal margin, padding, dst doang

    View full-size slide

  7. Apa itu Frontend
    Developer
    ?

    View full-size slide

  8. Frontend developer adalah pengembang website yang
    menggunakan baris kode HTML, CSS, dan JavaScript untuk
    menghasilkan website dengan tampilan yang menarik. Dan juga
    mengolah desain murni menjadi website yang interaktif dengan
    pengguna.

    View full-size slide


  9. “Seorang frontend developer harus
    memastikan tampilan website sesuai
    dengan yang disepakati dengan
    desainer, baik dari segi tampilan
    maupun fungsionalitas.”

    View full-size slide

  10. Kenapa perlu Frontend
    Developer
    ?

    View full-size slide

  11. Human Resource Marketing
    - Dunia periklanan di internet tumbuh
    - Layanan yang ada memerlukan mobile web solution
    - Data yang besar perlu divisualisasikan
    - Dari situ permintaan pekerjaan terhadap frontend developer sangat
    banyak.
    - Challenging

    View full-size slide

  12. Seperti apa peluang karir
    sebagai Frontend
    Developer
    ?

    View full-size slide

  13. - Cukup Popular
    - Learning path yang cukup mudah
    - Banyak dicari di perusahaan startup

    View full-size slide

  14. Frontend Developer yang
    gimana sih yang dicari saat
    ini?
    ?

    View full-size slide

  15. Non Teknis
    - Mempunyai fundamental yang kuat
    - Mau belajar
    - Mempunyai pemahaman tentang UI/UX
    - Harus Aktif

    View full-size slide

  16. Teknis
    - Memahami Html, css, javascript
    - Memahami tentang Responsive Design
    - Memahami Framework Css dan Javascript
    - Memahami cara mengconsume API
    - Memahami Version Control System (Git)
    - Memahami Testing/Debugging
    - Memahami Browser Developer Tools
    - Memahami Collaboration tools
    - Memahami tentang optimasi tools/website

    View full-size slide

  17. Seperti Apa Pekerjaannya?
    ?

    View full-size slide

  18. - Menentukan struktur dan desain halaman website
    - Memastikan desain web mampu memaksimalkan user experience
    - Melakukan optimasi agar tetap cepat dan terus dapat dikembangkan
    - Membuat style guide
    - Memastikan konsistensi branding melalui desain website
    - Bekerja sama dengan ui/ux, backend developer untuk melakukan
    coding dan troubleshooting

    View full-size slide

  19. Bagaimana menjadi
    Frontend Developer yang
    baik ?
    ?

    View full-size slide

  20. - Detail
    - Berpikir panjang
    - Haus akan pengetahuan
    - Dapat berkomunikasi dengan baik
    - Dapat bekerja tim
    - Mempunyai time management yang baik
    - Good programming skill
    - Mengetahui kapan harus optimasi
    - Good testing skill

    View full-size slide

  21. Bagaimana memulainya ?
    ?

    View full-size slide


  22. 1. Apakah kita tertarik dengan desain ?
    28

    View full-size slide


  23. 2. Apakah kita peduli dengan hal detail ?
    29

    View full-size slide


  24. 3. Apakah kita ingin mempelajari hal-hal baru?
    30

    View full-size slide


  25. 4. Selalu mencoba dan berlatih
    31

    View full-size slide


  26. 5. Jangan batasi diri kita untuk melakukan
    sesuatu yang baik
    32

    View full-size slide


  27. 6. Sering berurusan dengan banyak masalah
    cross-browser.
    33

    View full-size slide


  28. 7. Sering ketemu masalah yang ga logis
    seperti CSS
    34

    View full-size slide


  29. 8. Pasti mengulangi atau melakukan hal sama
    35

    View full-size slide


  30. 9. Kita harus menerima kode orang lain
    36

    View full-size slide

  31. Teknologi
    - Pelajari HTML, CSS, JavaScript
    Referensi :
    https:/
    /www.w3schools.com/
    https:/
    /developer.mozilla.org/id/docs/Web/JavaScript
    https:/
    /javascript.info/
    - Pelajari HTML5, CSS3, JavaScript Lanjutan, Framework CSS &
    JavaScript
    - Pelajari Grid system, teknik responsive design
    - Pelajari mengenai peningkatan performa
    - Pelajari mengenai visualisasi data

    View full-size slide

  32. Tools yang sering di pakai

    View full-size slide

  33. Links
    - https:/
    /frontendmasters.com/books/front-end-handbook/2019/
    - https:/
    /www.w3schools.com/
    - https:/
    /developer.mozilla.org/id/docs/Web/JavaScript
    - https:/
    /javascript.info/
    - https:/
    /github.com/kamranahmedse/developer-roadmap/blob/master/img/fro
    ntend.png?year-2020-2
    - https:/
    /frontendchecklist.io/

    View full-size slide

  34. 40
    Thanks
    Any questions?
    You can find me on github :
    @randyviandaputra

    View full-size slide