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

Step by Step Guide to Becoming Frontend Developer

Step by Step Guide to Becoming Frontend Developer

PHP Online Learning #85

73eeac32b9932a63ed361f1ff5c5e92a?s=128

Randy Vianda Putra

May 03, 2021
Tweet

Transcript

  1. Step by Step Guide to Becoming Frontend Developer PHP Online

    Learning #85
  2. Randy Vianda Putra, live in Bandung -Frontend Lead @WorkLifeBeyond -Instructor

    @SekolahFullstack modulloe@gmail.com github.com/randyviandaputra @randyvp Hello 🙇
  3. Agenda o What is Frontend Developer o Learn HTML o

    Styling your pages using CSS o Basics of Javascript o Version Control System o Deployment o Q&A
  4. What is Frontend Developer

  5. What is Frontend Developer 5 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.
  6. PHP Online Learning #12

  7. Learn HTML

  8. What is HTML 8 Singkatan dari Hypertext Markup Language. HTML

    memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
  9. Learn HTML 9 HTML 5 Semantic Elements Meta Elements Accessibility

  10. Learn HTML 10 Semantic Elements Semantic element mendeskripsikan dengan jelas

    ke browser dan developer contoh non-semantic elements: <div> dan<span> contoh semantic elements: <form>, <table>, <article>
  11. Learn HTML 11 Meta Elements

  12. Learn HTML 12 Accessibility

  13. Learn HTML 13 HTML 5 Memungkinkan kita mendeskripsikan konten kita

    dengan lebih tepat.
  14. Resources 14 ❖ W3schools ❖ https:/ /developer.mozilla.org/id/docs/Web/HTML ❖ HTML Tutorial

    for Beginners: HTML Crash Course [2021] - Programming with Mosh Youtube
  15. Styling your pages using CSS

  16. What is CSS 16 CSS adalah bahasa Cascading Style Sheet

    dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
  17. Styling your pages using CSS 17 Media Query Box Models

    Positions Layout (Flexbox/Grid) Spacing CSS Units
  18. Styling your pages using CSS 18 CSS Preprocessor CSS Framework

    CSS Methodology CSS in JS
  19. Styling your pages using CSS 19 CSS Preprocessor CSS Preprocessor

    merupakan bahasa script preprocessor yang dikompilasi dalam bentuk CSS
  20. 20

  21. Styling your pages using CSS 21 CSS Methodology CSS Methodology

    adalah sebuah pedoman dalam penulisan code secara modular, kode yang dituliskan reusable dan scalable BEM Atomic-CSS Utility-First
  22. 22

  23. Styling your pages using CSS 23 CSS Framework CSS Framework

    adalah sebuah Framework yang fungsinya untuk memudahkan developer dalam mendesain sebuah tampilan aplikasi/website
  24. None
  25. Styling your pages using CSS 25 CSS in JS CSS-in-JS

    adalah teknik styling yang dimana JavaScript digunakan untuk mengatur styling suatu component.
  26. None
  27. None
  28. Resources 28 ❖ W3schools ❖ https:/ /developer.mozilla.org/id/docs/Web/HTML ❖ https:/ /www.creativebloq.com/features/a-web-designers-gui

    de-to-css-methodologies#section-bem ❖ https:/ /2020.stateofcss.com/ ❖ https:/ /getbootstrap.com/ ❖ https:/ /tailwindcss.com/
  29. Basics of Javascript

  30. What is Javascript 30 JavaScript adalah bahasa pemrograman yang digunakan

    dalam pengembangan website agar lebih dinamis dan interaktif.
  31. Basics of Javascript 31 Syntax Type Function DOM Manipulation Hoisting

    ES6+ Fetch API Storing Data
  32. Package Manager 32 Package Manager atau istilah globalnya Package-management System

    adalah sebuah Tools yang berfungsi untuk mengkoleksi sebuah sofware/libraries yang dibutuhkan dengan proses installation, upgrade, removing atau configuration secara otomatis di dalam operating system komputer anda.
  33. Package Manager 33

  34. Libraries/Frameworks 34 Kumpulan code yang biasanya terkumpul dalam sebuah module/package

    yang dapat di import/pakai ke program lain.
  35. Javascript Libraries/Frameworks 35

  36. None
  37. Build Tools 37 Build tools adalah sebuah libraries/software application yang

    diciptakan untuk menangani beberapa pekerjaan proses development & deployment secara otomatis dan dapat disesuaikan dengan kebutuhan
  38. Build Tools

  39. None
  40. Resources 40 ❖ W3schools ❖ https:/ /developer.mozilla.org/id/docs/Web. ❖ https:/ /www.youtube.com/watch?v=PkZNo7MFNFg

    Youtube
  41. Version Control System

  42. What is Version Control System 42 Sebuah sistem yang merekam

    perubahan-perubahan dari sebuah berkas atau sekumpulan berkas dari waktu ke waktu sehingga Anda dapat menilik kembali versi khusus suatu saat nanti
  43. Version Control System 43 Git GitHub BitBucket GitLab Repo Hosting

    Server
  44. Deployment

  45. Deployment 45 Deployment adalah kegiatan yang bertujuan untuk menyebarkan aplikasi

    yang telah dikerjakan oleh para pengembang. Penyebarannya dapat melalui beragam cara tergantung dari jenis aplikasinya.
  46. Deployment 46

  47. What Next ?

  48. “ Keep Learning ! 48

  49. Recommended topics 49 ❖ Web Performance ❖ Web Security, ❖

    Dev Tools, ❖ SPA, ❖ PWA, ❖ SSR/CSR, ❖ Web Storage ❖ Dll
  50. 50 THANKS!

  51. Q & A